淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1503|回复: 8
收起左侧

一枚放大+滑动特效/大神勿喷

[复制链接]
  • TA的每日心情
    加油
    2016-9-9 10:00
  • 签到天数: 23 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    9

    主题

    48

    帖子

    4703

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    4703

    QQ
    发表于 2016-1-6 12:19:54 | 显示全部楼层 |阅读模式
    1. <style>
    2. .gif_Box {height: 174px;left: 50px;position:relative;width: 500px;top:50px;}
    3. .gif_Box ul li {background: #fff none repeat scroll 0 0;float: left;height: 164px;position: relative;text-align: center;width: 140px;margin:5px;padding:0px; list-style:none;}
    4. .gif_Box ul li a {display: block;height: 100%;width: 100%;z-index: 5;}
    5. .gif_Box ul li .p1 {position: relative;top: 20px;transition: all 0.3s ease-in-out 0s;z-index: 2;}
    6. .gif_Box ul li .p2 img {position: relative;top: 15px;transform: scale(0.7);transition: all 0.3s ease-in-out 0s;z-index: 2;}
    7. .gif_Box ul li .foot {position:relative;top:-55px;left:0px;width: 100%;z-index: 6;}
    8. .gif_Box ul li:hover .p1 {top: -20px;}
    9. .gif_Box ul li:hover .p2 img {top: 0;transform: scale(1);}
    10. </style>
    11. <div class="gif_Box">
    12. <ul class="clear_fix">
    13.         <li>
    14.             <p class="p1"><img width="140" height="33" src="http://cdn.taobaoux.com/album/201601/05/225534qgeupbr3pflntstt.jpg.thumb.jpg"> </p>
    15.             <p class="p2"><a href="#" target="_blank"><img width="140" height="110" src="http://cdn.taobaoux.com/album/201601/06/011622pp5brkb33brcacrg.jpg.thumb.jpg"></a></p>
    16.             <p class="foot"><img width="140" height="21" src="http://cdn.taobaoux.com/album/201601/05/225532hg57dqharqdqco8a.jpg.thumb.jpg"></p>
    17.         </li>
    18.         <li>
    19.             <p class="p1"><img width="140" height="33" src="http://cdn.taobaoux.com/album/201601/05/225534elzwrgeibkrpwer9.jpg.thumb.jpg"> </p>
    20.             <p class="p2"><a href="#" target="_blank"><img width="140" height="110" src="http://cdn.taobaoux.com/album/201601/05/225535dk8s1ah8blwttczh.jpg.thumb.jpg"></a></p>
    21.             <p class="foot"><img width="140" height="21" src="http://cdn.taobaoux.com/album/201601/05/225533e2t26thtjbw3j2ti.jpg.thumb.jpg"></p>
    22.         </li>
    23.         <li>
    24.             <p class="p1"><img width="140" height="33" src="http://cdn.taobaoux.com/album/201601/05/225534cddtirz5fxlps0lx.jpg.thumb.jpg"> </p>
    25.             <p class="p2"><a href="#" target="_blank"><img width="140" height="110" src="http://cdn.taobaoux.com/album/201601/06/011623d2fcbpcpb7tjffof.jpg.thumb.jpg"></a></p>
    26.             <p class="foot"><img width="140" height="21" src="http://cdn.taobaoux.com/album/201601/05/225534pzzm0b30hmpm3m3k.jpg.thumb.jpg"></p>
    27.         </li>
    28. </ul>
    29. </div>
    复制代码



    只要你还有一口气就不能放弃
  • TA的每日心情

    前天 09:38
  • 签到天数: 205 天

    连续签到: 1 天

    [LV.7]炉火纯青

    31

    主题

    1310

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    37436

    热心会员最佳新人

    QQ
    发表于 2016-1-6 12:41:06 | 显示全部楼层
    谢谢分享
    当断不断,必受其乱
  • TA的每日心情
    加油
    2016-9-9 10:00
  • 签到天数: 23 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    9

    主题

    48

    帖子

    4703

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    4703

    QQ
     楼主| 发表于 2016-1-6 13:34:58 | 显示全部楼层

    不谢,一起分享

    只要你还有一口气就不能放弃
  • TA的每日心情
    臭美
    2016-8-31 13:49
  • 签到天数: 274 天

    连续签到: 1 天

    [LV.8]自成一派

    23

    主题

    393

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    32053

    发表于 2016-1-6 14:05:11 | 显示全部楼层
    想问一下,淘宝能用吗?
    小煒小站 http://www.lliwenwei.net/ 打打小广告
  • TA的每日心情
    加油
    2016-3-25 10:53
  • 签到天数: 17 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    0

    主题

    29

    帖子

    2427

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2427

    发表于 2016-1-6 14:08:36 | 显示全部楼层
    谢谢分享

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    加油
    2016-9-9 10:00
  • 签到天数: 23 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    9

    主题

    48

    帖子

    4703

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    4703

    QQ
     楼主| 发表于 2016-1-6 14:39:20 | 显示全部楼层
    喜欢就好,就是闲的蛋痛
    只要你还有一口气就不能放弃
  • TA的每日心情
    无奈
    昨天 22:45
  • 签到天数: 321 天

    连续签到: 4 天

    [LV.8]自成一派

    11

    主题

    172

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43336

    发表于 2016-1-6 21:48:13 | 显示全部楼层
    没有css呀大神

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    加油
    2016-9-9 10:00
  • 签到天数: 23 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    9

    主题

    48

    帖子

    4703

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    4703

    QQ
     楼主| 发表于 2016-1-7 09:26:34 | 显示全部楼层

    那就只能买了,嘿嘿,其实我是天猫官方派来的逗逼

    只要你还有一口气就不能放弃
  • TA的每日心情
    加油
    2016-9-28 11:04
  • 签到天数: 88 天

    连续签到: 1 天

    [LV.6]渐入佳境

    16

    主题

    616

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    21384

    最佳新人热心会员

    QQ
    发表于 2016-1-8 10:38:21 | 显示全部楼层
    luguo路过   不过没效果我是不会丢出贞操的
    哒哒哒
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2016-12-5 08:32 , Processed in 0.127661 second(s), 20 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表