淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
  • TA的每日心情
    抱抱
    2016-12-1 09:10
  • 签到天数: 4 天

    连续签到: 1 天

    [LV.2]登堂入室

    64

    主题

    164

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    53057

    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的每日心情
    加油
    2017-1-2 09:54
  • 签到天数: 239 天

    连续签到: 1 天

    [LV.7]炉火纯青

    9

    主题

    176

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    36615

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

    连续签到: 14 天

    [LV.9]已臻大成

    36

    主题

    2275

    帖子

    14万

    积分

    高级会员

    阅读权限: 50

    【单身狗认证】

    Rank: 8Rank: 8

    积分
    146210

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

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

  • TA的每日心情
    臭美
    2017-1-7 20:53
  • 签到天数: 45 天

    连续签到: 1 天

    [LV.5]略有小成

    24

    主题

    125

    帖子

    8492

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    8492

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

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


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

  • TA的每日心情
    不爽
    昨天 09:01
  • 签到天数: 69 天

    连续签到: 1 天

    [LV.6]渐入佳境

    5

    主题

    258

    帖子

    9200

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    9200

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

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


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

  • TA的每日心情
    大哭
    昨天 18:36
  • 签到天数: 262 天

    连续签到: 8 天

    [LV.8]自成一派

    3

    主题

    223

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    59780

    最佳新人热心会员

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

    欢迎
    光临
    小店:缘恩网络服务
  • 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, 2017-1-19 00:27 , Processed in 0.140766 second(s), 23 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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