寻梦xunm

html+纯css导航动画
html+纯css导航动画html代码 <div>首...
扫描右侧二维码阅读全文
07
2019/04

html+纯css导航动画

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

Last modification:April 7th, 2019 at 07:58 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment