菜单悬停效果

下载代码

html

css

分享到微信朋友圈

html

<nav class="navigation">
	<ul class="menu">
		<li class="menu__item">
			<a href="#" class="menu__link">
				
					
						About
					
				
						Us
					
				
			</a>
		</li>

<li class="menu__item">
			<a href="#" class="menu__link">
				
					
						Our
					
				
						History
					
				
			</a>
		</li>

<li class="menu__item">
			<a href="#" class="menu__link">
				
					
						Latest
					
				
						News
					
				
			</a>
		</li>

<li class="menu__item">
			<a href="#" class="menu__link">
				
					
						New
					
				
						Arrivals
					
				
			</a>
		</li>

<li class="menu__item">
			<a href="#" class="menu__link">
				
					
						Contact
					
				
						Us
					
				
			</a>
		</li>
	</ul>
</nav>

css

body {
  display: flex;
  align-items: center;
  height: 100vh;
  background: #fefefe;
}

a {
  outline: 0;
  text-decoration: none;
}

.navigation {
  width: 100%;
  border-bottom: 3px solid #ccd7d7;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 22px;
}

.menu {
  display: flex;
  justify-content: center;
  max-width: 1150px;
  margin: 0 auto;
  padding-left: 0;
}

.menu__item {
  display: inline-block;
  white-space: nowrap;
}
@media screen and (max-width: 480px) {
  .menu__item:nth-child(n + 3) {
    display: none;
  }
  .menu__item:nth-child(2) .menu__link {
    border-right: 0;
  }
}
@media screen and (max-width: 768px) {
  .menu__item:nth-child(n + 4) {
    display: none;
  }
  .menu__item:nth-child(3) .menu__link {
    border-right: 0;
  }
}
@media screen and (max-width: 992px) {
  .menu__item:nth-child(n + 5) {
    display: none;
  }
  .menu__item:nth-child(4) .menu__link {
    border-right: 0;
  }
}
.menu__item:last-child .menu__link {
  border-right: 0;
}

.menu__link {
  display: block;
  padding: 6px 30px 3px;
  border-right: 2px dotted #ccd7d7;
}
.menu__link:hover .menu__first-word, .menu__link:focus .menu__first-word {
  transform: translate3d(0, -105%, 0);
}
.menu__link:hover .menu__second-word, .menu__link:focus .menu__second-word {
  transform: translate3d(0, 105%, 0);
}
@media screen and (min-width: 768px) {
  .menu__link {
    padding: 6px 40px 3px;
  }
}

.menu__title {
  display: inline-block;
  overflow: hidden;
}

.menu__first-word,
.menu__second-word {
  display: inline-block;
  position: relative;
  transition: transform .3s;
}
.menu__first-word::before,
.menu__second-word::before {
  position: absolute;
  content: attr(data-hover);
}

.menu__first-word {
  color: #0c8040;
}
.menu__first-word::before {
  top: 105%;
  color: #626262;
}

.menu__second-word {
  color: #626262;
}
.menu__second-word::before {
  bottom: 105%;
  color: #0c8040;
}

JavaScript

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