html5+css3实现的立体导航栏

来源:https://www.sucaihuo.com/js/1616.html 2017-04-01 23:47浏览(2162) 收藏

纯粹css3动画实现,鼠标悬浮上去,有立体倒立滚动的感觉,其实就是css3的rotate旋转效果
html5+css3实现的立体导航栏
分类:导航菜单 > 动画导航 难易:初级
查看演示 下载资源 下载积分: 5 积分

定义导航菜单样式

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>
标签: 旋转立体rorate
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2