淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 676|回复: 6
收起左侧

【渔舟】制作鼠标经过抖动强调动画

[复制链接]
  • TA的每日心情
    抱抱
    6 天前
  • 签到天数: 4 天

    连续签到: 1 天

    [LV.2]登堂入室

    62

    主题

    157

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    52086

    QQ
    发表于 2016-11-4 15:47:33 | 显示全部楼层 |阅读模式
    先看效果
    01.gif

    因gif效果图片太大,实际效果请到这里查看:https://yijohn.taobao.com/p/xgzs.htm
    原始效果来自六月设计,代码经过更改,可以不购买模板,只需要调用战国策模块即可。


    此效果需要调用战国策模块的css文件。 有兴趣的朋友可以试用战国策模块。

    这个效果比较简单,主要是利用hover伪类制作鼠标经过margin发生变化,然后利用css3的过渡达到动画效果。

    那这个抖动是如何实现的呢?  其实也是css3,css3的过渡中有个transition-property参数,利用这个参数可以自定义动画的速度曲线,通过调整速度曲线,就可以形成抖动效果,我这里设置的是cubic-bezier(0.5,1.5,0.5,-1.5)

    详细代码如下:
    1. <div style="height:1007px;">
    2.   <div class="wd_self_abs wd_minus485" style="width:1920px; height:1007px;background:url(https://img.alicdn.com/imgextra/i4/39767794/TB2D4M4iVXXXXXzXXXXXXXXXXXX_!!39767794.jpg);">
    3.      <!--01-->
    4.      <div class="wd_self_rel">
    5.          <div class="eff-b-mor030 wd_self_abs" style="width:547px; height:240px; background:url(https://img.alicdn.com/imgextra/i1/39767794/TB2R6QViVXXXXaZXXXXXXXXXXXX_!!39767794.png); top:180px; left:685px; transition:all 0.5s cubic-bezier(0.5,1.5,0.5,-1.5); -ms-transition:all 0.5s cubic-bezier(0.5,1.5,0.5,-1.5); -webkit-transition:all 0.5s cubic-bezier(0.5,1.5,0.5,-1.5); -o-transition:all 0.5s cubic-bezier(0.5,1.5,0.5,-1.5); -moz-transition:all 0.5s cubic-bezier(0.5,1.5,0.5,-1.5);"></div>
    6.      </div>
    7.      <!--01 end-->
    8.   </div>
    9.   </div>
    复制代码


    是不是很简单?

    评分

    参与人数 2美工币 +108 收起 理由
    峰生水起之林 + 100 赞一个!
    缘恩 + 8 很给力!

    查看全部评分

  • TA的每日心情
    加油
    昨天 12:29
  • 签到天数: 232 天

    连续签到: 2 天

    [LV.7]炉火纯青

    9

    主题

    156

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    33717

    QQ
    发表于 2016-11-4 16:08:37 | 显示全部楼层
    沙发沙发。。。。。。
    微信号:cai-weicheng
    现实的社会,
    睁一只眼,闭一只眼,
    难道就会海阔天空吗?
  • TA的每日心情
    大哭
    3 天前
  • 签到天数: 651 天

    连续签到: 4 天

    [LV.9]已臻大成

    37

    主题

    2231

    帖子

    13万

    积分

    高级会员

    阅读权限: 50

    【单身狗认证】

    Rank: 8Rank: 8

    积分
    138218

    最佳新人热心会员宣传达人活跃会员优秀版主灌水之王

    QQ
    发表于 2016-11-4 20:42:04 | 显示全部楼层
    动态评分4.4!厉害了,我的哥!

  • TA的每日心情
    思考
    4 天前
  • 签到天数: 43 天

    连续签到: 1 天

    [LV.5]略有小成

    24

    主题

    123

    帖子

    8169

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    8169

    发表于 2016-11-4 20:48:05 | 显示全部楼层
    复制了你的代码进去,不能动

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


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

  • TA的每日心情
    心跳
    3 天前
  • 签到天数: 43 天

    连续签到: 1 天

    [LV.5]略有小成

    3

    主题

    170

    帖子

    6068

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    6068

    发表于 2016-11-5 09:14:41 | 显示全部楼层
    复制了,看不到效果

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


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

  • TA的每日心情
    吐舌头
    昨天 13:08
  • 签到天数: 220 天

    连续签到: 70 天

    [LV.7]炉火纯青

    2

    主题

    204

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    47283

    最佳新人热心会员

    QQ
    发表于 2016-11-5 09:46:37 | 显示全部楼层
    很给力!

    欢迎
    光临
    小店:缘恩网络服务
    还是别点了~
    其实只是卖350装修模版的~[/col
  • TA的每日心情
    臭美
    2016-11-21 18:38
  • 签到天数: 4 天

    连续签到: 4 天

    [LV.2]登堂入室

    0

    主题

    6

    帖子

    1904

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    1904

    发表于 2016-11-18 09:53:29 | 显示全部楼层



    很好很强大,谢谢了

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-7 06:00 , Processed in 0.142107 second(s), 30 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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