底部固定效果

<!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">![](http://upload-images.jianshu.io/upload_images/6449520-e524753c4a27f378.gif?imageMogr2/auto-orient/strip)</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&amp;&amp;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>

最后编辑于：2017.12.08 03:37:42

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,491评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,856评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,745评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,196评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,073评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,112评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,531评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,215评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,485评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,578评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,356评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,215评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,583评论 3赞 299
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,898评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,174评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,497评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,697评论 2赞 335

底部固定效果

推荐阅读更多精彩内容