奇乐网 - 草根博客网站

html+纯css导航动画

寻梦xunm 174 0

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

html+纯css导航动画

html代码

css代码

.nav {
    list-style:none;
}
.nav li {
    float:left;
    height:50px;
    width:100px;
    border:1px solid #EEEEEE;
    background:wheat;
    text-align:center;
    line-height:50px;
    position:relative;
    cursor:pointer;
    overflow:hidden;
}
.nav li>div {
    transition:all .3s;
    -moz-transition:all .3s;
    -ms-transition:all .3s;
    -webkit-transition:all .3s;
}
.nav li>div:first-child {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background:aqua;
}
.nav li>div:last-child {
    position:absolute;
    bottom:-52px;
    left:0;
    right:0;
    background:red;
}
.nav li:hover>div:last-child {
    bottom:0;
}
.nav li:hover>div:first-child {
    bottom:52px;
}

火狐截图_2019-04-07T11-51-20.002Z.png

评论列表 (已有0条评论)

消灭零回复

发表评论 (已有0条评论)