淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2766|回复: 17
收起左侧

分享一个简单的背景图轻移效果

[复制链接]
  • TA的每日心情

    2016-11-16 15:40
  • 签到天数: 99 天

    连续签到: 2 天

    [LV.6]渐入佳境

    16

    主题

    336

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43960

    发表于 2015-7-7 16:05:46 | 显示全部楼层 |阅读模式
    这个class很简单,只用到滑过背景图位置偏移加css3的过渡效果 背景轻移.gif

    class如下:
    1. /*详情页定位有效,可做背景轻移效果*/
    2. .tmsg_button_close-app {
    3.     background-position: 0 -57px;
    4.     height: 15px;
    5.     position: absolute;
    6.     right: 15px;
    7.     top: 15px;
    8.     width: 15px;
    9. }
    10. .tmsg_button_close-app:hover {
    11.     background-position: -16px -57px;
    12. }
    复制代码
    这个class可解决详情页绝对定位失效的问题,不用footer-more-trigger,用这个就可以了,更多应用大家可自行探索

    评分

    参与人数 1美工币 +1 收起 理由
    snrtmnmnyk + 1 感谢分享!

    查看全部评分

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


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

  • TA的每日心情
    加油
    昨天 16:56
  • 签到天数: 1100 天

    连续签到: 1 天

    [LV.10]功行圆满

    11

    主题

    714

    帖子

    27万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    279557

    发表于 2015-7-7 16:28:21 | 显示全部楼层
    收藏了,以后全用到的,
    感谢分享~

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


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

  • TA的每日心情
    加油
    2016-10-17 16:29
  • 签到天数: 327 天

    连续签到: 1 天

    [LV.8]自成一派

    6

    主题

    370

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    63610

    最佳新人热心会员

    发表于 2015-7-7 16:43:29 | 显示全部楼层
    收藏起来,试一试。

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


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

  • TA的每日心情
    抱抱
    昨天 09:36
  • 签到天数: 620 天

    连续签到: 3 天

    [LV.9]已臻大成

    42

    主题

    1236

    帖子

    11万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    117737

    天猫美工最佳新人热心会员

    发表于 2015-7-7 17:16:23 | 显示全部楼层
    收藏了,以后全用到的,
    感谢分享~

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


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

  • TA的每日心情
    思考
    2016-9-11 15:54
  • 签到天数: 206 天

    连续签到: 1 天

    [LV.7]炉火纯青

    24

    主题

    1028

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    32979

    淘宝钻级店美工最佳新人热心会员

    QQ
    发表于 2015-7-7 20:31:56 | 显示全部楼层
    收藏了,以后全用到的,
    感谢分享~
    即使睁开眼睛也看不见,我的心在黑暗中——林疋火昱
  • TA的每日心情
    思考
    2015-10-5 16:32
  • 签到天数: 26 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    5

    主题

    247

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    27725

    发表于 2015-7-7 21:33:15 | 显示全部楼层
    这直接做个GIF图不就行了吗?还需要用代码,这不是多余吗

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


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

  • TA的每日心情

    2016-11-16 15:40
  • 签到天数: 99 天

    连续签到: 2 天

    [LV.6]渐入佳境

    16

    主题

    336

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43960

     楼主| 发表于 2015-7-7 22:42:49 | 显示全部楼层
    风一样的男子丿 发表于 2015-7-7 21:33
    这直接做个GIF图不就行了吗?还需要用代码,这不是多余吗

    鼠标滑过变化你可以用gif做出来?

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


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

  • TA的每日心情
    臭美
    2016-8-31 13:49
  • 签到天数: 274 天

    连续签到: 1 天

    [LV.8]自成一派

    23

    主题

    393

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    32053

    发表于 2015-7-8 08:48:07 | 显示全部楼层
    感谢大神的分享~
    小煒小站 http://www.lliwenwei.net/ 打打小广告
  • TA的每日心情
    吐舌头
    2016-7-13 09:16
  • 签到天数: 49 天

    连续签到: 1 天

    [LV.5]略有小成

    10

    主题

    69

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    12843

    QQ
    发表于 2015-7-8 09:24:19 | 显示全部楼层
    收藏哈,以后可能会用到,谢谢分享

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


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

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2016-12-8 00:36 , Processed in 0.139205 second(s), 28 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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