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>
*
回帖描述:*
链接类型:*
下载链接:*
描述:*
回帖描述:*
链接类型:*
阅读权限:*
下载链接:



聚优部落技术论坛 © 版权所有 鲁ICP备15007479号-6
Copyright(C)web.com, All Rights Reserved.
