纯粹css3动画实现,鼠标悬浮上去,有立体倒立滚动的感觉,其实就是css3的rotate旋转效果
定义导航菜单样式
nav{
display: inline-block;
margin-top: 100px;
}
nav a{
display: inline-block;
color: white;
text-decoration: none;
perspective:200px;
}
nav a span{
line-height: 40px;
background-color: #2195de;
display: inline-block;
padding: 0 25px;
position: relative;
transform-origin:top;
transition:all 1s;
transform-style:preserve-3d;
}
nav a span::after{
content: attr(data-hover);
position: absolute;
top: 100%;
left: 0;
background-color: #0965a0;
width: 100%;
height: 100%;
transform:rotateX(-90deg);
transform-origin:top;
}
nav a:hover span{
transform:rotateX(90deg) translateY(-20px);
}
<nav>
<a href="">
<span data-hover="hei">hello</span>
</a>
<a href="">
<span data-hover="ha">world</span>
</a>
</nav>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791