CSS 导航跟随移动

下载代码

html

css

分享到微信朋友圈

html

css

body {
  font-family: sans-serif;
  background-color: #fff
}
ul {
  display: flex;
  list-style: none;
  text-transform: uppercase;
  width: 100%;
  box-sizing: border-box;
}
li {
  flex: 1 1;
}
li:last-child::after {
  content: "";
  width: 100%;
  height: 3px;
  background-color: transparent;
  display: block;
  transition: .3s ease;
  position: relative;
  left: 0%;
}
li:nth-child(1).current ~ li:last-child::after {
  left: -500%;
  background-color: #360033;
}
li:nth-child(2).current ~ li:last-child::after {
  left: -400%;
  background-color: #301441;
}
li:nth-child(3).current ~ li:last-child::after {
  left: -300%;
  background-color: #263357;
}
li:nth-child(4).current ~ li:last-child::after {
  left: -200%;
  background-color: #1b546f;
}
li:nth-child(5).current ~ li:last-child::after {
  left: -100%;
  background-color: #117385;
}
li:nth-child(6).current:last-child::after {
  left: 0;
  background-color: #0b8793;
}
li:nth-child(1):hover ~ li:last-child::after {
  left: -500%;
  background-color: #360033;
}
li:nth-child(2):hover ~ li:last-child::after {
  left: -400%;
  background-color: #301441;
}
li:nth-child(3):hover ~ li:last-child::after {
  left: -300%;
  background-color: #263357;
}
li:nth-child(4):hover ~ li:last-child::after {
  left: -200%;
  background-color: #1b546f;
}
li:nth-child(5):hover ~ li:last-child::after {
  left: -100%;
  background-color: #117385;
}
li:nth-child(6):last-child:last-child:hover::after {
  left: 0;
  background-color: #0b8793 !important;
}
li:nth-child(6):hover::after {
  left: 0%;
  background-color: #0b8793;
}
li:nth-child(1) a {
  color: #360033;
}
li:nth-child(2) a {
  color: #301441;
}
li:nth-child(3) a {
  color: #263357;
}
li:nth-child(4) a {
  color: #1b546f;
}
li:nth-child(5) a {
  color: #117385;
}
li:nth-child(6) a {
  color: #0b8793;
}
a {
  padding: 1rem;
  display: block;
  text-align: center;
  text-decoration: none;
  background-color: #fff;
  color: #666;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg