利用css3动画功能制作鼠标放上 元素跳动效果

2016-12-12 12:21 来自本站原创 21,780 11 5
[摘要]

不要以为CSS只是修饰网页颜色大小的花拳绣腿,最新的CSS3技术可以轻松实现简单的动画效果,本文使用CSS3实现一个鼠标放上去,图片上下跳动的效果。

在接触CSS3之前,对CSS的印象只是修饰页面的作用,感觉其最主要的功能就是改下页面颜色、调下元素大小,而实际上CSS3确是神通广大,特别是这两年h5页面在社交化媒体上的流行,更是让H5和CSS3技术大放异彩,今天通过CSS3的动画功能实现一个鼠标放上,图片上下跳的效果。

利用css3动画功能制作鼠标放上 元素跳动效果

直接贴出demo代码。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Shake text</title>
</head>
<style type="text/css">
 *{margin-bottom:0;padding:0;border: 0;}
 .wrap{margin: 0 auto;width: 500px;height: 300px;margin-top: 100px;background-color: #2ecc71;overflow: hidden;color: #fff;}
 .wrap .gd-shake{margin: 40px auto 0;width: 300px;text-align: center;}
 .gd-shake img{position: relative;}
 .gd-shake:hover img{-webkit-animation: gd-shake 0.2s ease infinite;-moz-animation: gd-shake 0.2s ease infinite;animation: gd-shake 0.2s ease infinite;}
 @keyframes gd-shake{0%{top:0;}
 50%{top:-2px;}
 100%{top:2px;}}
</style>
<body>
 <div class="wrap">
 <div class="gd-shake">
 <a href="">
 <img src="1.jpg">
 </a> 
 </div>
 <p style="text-align: right;padding:5px 10px;">Demo by yaxi.net</p>
 </div>
</body>
</html>

大家测试后会发现,把鼠标放上去,美女会上下跳动(脑子里突然污了 [偷笑] ),没错这根本没有用到JS,仅仅是通过css就实现了动画效果,是不是很神奇?

在线demo

原理很简单,先通过@keyframes gd-shake定义了gd-shake这一动画名称,并设置了其动作,使用animation简写属性,将动画与 img 元素绑定。且咱们定义的是在img父元素被鼠标指向的时候(:hover)的时候除非此样式,所以结果就是鼠标放上去,美女开始跳动 [坏笑]

具体的CSS3 @keyframes 规则、CSS3 animation 属性请自行百度,有更专业的文档等待大家阅读,雅兮网不再赘述。不过由于IE和旧版本的浏览器对CSS3的兼容性比较差,所以本特效在现代浏览器上才能有较好的体验。

本例可用于广告代码或者其他需生动展示的页面效果,更重要的是希望读者能够举一反三,将其用到需要的地方去。

本文最后更新于2016年12月12日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:11   其中:访客  0   博主  0
    加载中...
    1. 6年前 (2017-11-17) 0楼

      [坏笑]

    2. 7年前 (2016-12-13) 0楼

      为什么我把鼠标放上去,没发现美女会上下跳动呢?

    3. 7年前 (2016-12-13) 0楼

      太YD了......... [吓]

    4. 7年前 (2016-12-12) 0楼

      [可爱] 这样的图配上这样的动作,很坏啊

    5. 7年前 (2016-12-12) 0楼

      这个特效配上那张图,好坏好坏啊

    6. 7年前 (2016-12-12) 0楼

      好不容易抢了次沙发

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    分享 11 5 21,780
    Top