<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>底部固定效果</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none
}
a{
text-decoration: none
}
.user-yh-footer {
width: 100%;
height: 64px;
background: #000;
position: fixed;
bottom: 0;
z-index:1000;
}
.user-yh-footer ul {
width: 860px;padding:11px 0 11px 130px;
margin:0 auto;
height: 42px;
position:relative;
}
.user-yh-footer ul .user-yh-logo {
position: absolute;top:0;left:0; width:131px;background:#c21624;height:64px;
}
.user-yh-footer ul li {
float: left;
width: 171px;
height: 100%;
position:relative;
font-size: 18px;
border-left:1px solid #c21624;
}
.user-yh-footer ul li div{ position:absolute; top:-11px;bottom:-11px; left:0px; width:100%; z-index:1;overflow:hidden;}
.user-yh-footer ul li div span{ width:150px; height:100px; background:url(http://img10.360buyimg.com/cms/jfs/t4651/72/625936196/1958/86f7d299/58d2847dN06d582a6.png) no-repeat; position:absolute; -webkit-transition: all 0.35s; transition: all 0.35s; top:70px;}
.user-yh-footer ul li div span.h1{ position:absolute; left:-60px;}
.user-yh-footer ul li div span.h2{ position:absolute; left:-20px;}
.user-yh-footer ul li div span.h3{ position:absolute; left:20px;}
.user-yh-footer ul li div span.h4{ position:absolute; left:80px;}
.user-yh-footer ul li div span.h1 {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.user-yh-footer ul li div span.h2 {
-webkit-transition-delay: .08s;
transition-delay: .08s;
}
.user-yh-footer ul li div span.h3 {
-webkit-transition-delay: .16s;
transition-delay: .16s;
}
.user-yh-footer ul li span.h4 {
-webkit-transition-delay: .24s;
transition-delay: .24s;
}
.user-yh-footer ul li:hover div span{ top:-5px;}
.user-yh-footer ul li:hover div span.h1 {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.user-yh-footer ul li:hover div span.h2 {
-webkit-transition-delay: .08s;
transition-delay: .08s;
}
.user-yh-footer ul li:hover div span.h3 {
-webkit-transition-delay: .16s;
transition-delay: .16s;
}
.user-yh-footer ul li:hover div span.h4 {
-webkit-transition-delay: .24s;
transition-delay: .24s;
}
.user-yh-footer ul li a{color:#ffffff; position:absolute;top:-26px;bottom:-26px;left:0;right:0;font-weight: bold;
text-align: center;line-height: 94px;z-index:2;-webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transition-delay: .4s; transition-delay: .4s;}
.user-yh-footer ul li:hover a{color:#c21624;}</style>
</head>
<body>
<div class="user-yh-footer">
<ul>
<div class="user-yh-logo"></div>
<li>
<div> <span class="h1"></span><span class="h2"></span><span class="h3"></span><span class="h4"></span></div> <a href="//sale.jd.com/act/IR13gwQ24PCrc.html?cpdad=1DLSUE" target="_blank">主会场</a> </li>
<li>
<div> <span class="h1"></span><span class="h2"></span><span class="h3"></span><span class="h4"></span></div> <a href="//coll.jd.com/list.html?sub=13671&&cpdad=1DLSUE" target="_blank">全部4免1商品</a> </li>
<li>
<div> <span class="h1"></span><span class="h2"></span><span class="h3"></span><span class="h4"></span></div> <a href="https://sale.jd.com/act/a0U1ZrQ7I8vA.html?cpdad=1DLSUE" target="_blank">自营专区</a> </li>
<li>
<div> <span class="h1"></span><span class="h2"></span><span class="h3"></span><span class="h4"></span></div> <a href="https://sale.jd.com/act/Uk8XwnLfomaFpt7I.html?cpdad=1DLSUE" target="_blank">京质装修</a> </li>
<li>
<div> <span class="h1"></span><span class="h2"></span><span class="h3"></span><span class="h4"></span></div> <a href="https://sale.jd.com/act/nQY2VEHXOt8cGzMA.html?cpdad=1DLSUE" target="_blank">门店大牌</a> </li>
</ul>
</div>
</body>
</html>
网友评论