hover悬停滚动菜单

下载代码

html

css

分享到微信朋友圈

html

css

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

body{
  background:#222;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.items, .items2{
  margin: 0 auto;
  max-width: 1140px;
}
.items2{
  padding-top:50px;
}
.items a, .items2 a{
  display:inline-block;
  text-decoration:none;
  color:white;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  font-size: 20px;
  font-weight:400;
  margin:0 20px;
  height: 20px;
  overflow: hidden;
}
.items a span{
  display: inline-block;
  position:relative;
  transition: transform 500ms;
  -webkit-transition: -webkit-transform 500ms;
  -moz-transition: transform 500ms;
  
}
.items a span:after{
  content: attr(data-hover);
  position: absolute;
  top: -30px;
  left:0;
  transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
}
.items a:hover span,
.items a:focus span {
	transform: translateY(30px);
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
}

/* x3 */
.items2 a span{
  display: inline-block;
  position:relative;
  transition: transform 600ms;
  -webkit-transition: -webkit-transform 600ms;
}
.items2 a span:before{
  content: attr(data-hover);
  position: absolute;
  top: -60px;
  left:0;
  transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
}
.items2 a span:after{
  content: attr(data-hover);
  position: absolute;
  top: -30px;
  left:0;
  transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
}
.items2 a:hover span,
.items2 a:focus span {
	transform: translateY(60px);
  -webkit-transform: translateY(60px);
  -moz-transform: translateY(60px);
}

JavaScript

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