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

王小优
王小优
王小优
231
文章
0
评论
2015年10月15日 评论 1,670 1426字阅读4分45秒

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

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

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

直接贴出代码

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>Shake text</title>  
  6. </head>  
  7. <style type="text/css">  
  8. *{margin-bottom:0;padding:0;border: 0;}  
  9. .wrap{margin: 0 auto;width: 500px;height: 300px;margin-top: 100px;background-color: #2ecc71;overflow: hidden;color: #fff;}  
  10. .wrap .gd-shake{margin: 40px auto 0;width: 300px;text-align: center;}  
  11. .gd-shake img{position: relative;}  
  12. .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;}  
  13. @keyframes gd-shake{0%{top:0;}  
  14. 50%{top:-2px;}  
  15. 100%{top:2px;}}  
  16. </style>  
  17. <body>  
  18. <div class="wrap">  
  19. <div class="gd-shake">  
  20. <a href="">  
  21. <img src="girl.jpg">  
  22. </a>  
  23. </div>  
  24. <p style="text-align: right;padding:5px 10px;">Demo By Www.WangXiaoYou.Com</p>  
  25. </div>  
  26. </body>  
  27. </html>  

大家测试后会发现,把鼠标放上去,美女会上下跳动(脑子里突然污了利用CSS3动画功能制作鼠标放上 元素跳动效果),没错这根本没有用到JS,仅仅是通过CSS就实现了动画效果,是不是很神奇?

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

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

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

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
利用animation动画实现呼吸灯效果 CSS3

利用animation动画实现呼吸灯效果

阿里云看到其Banner上的一个呼吸灯效果,利用animation来实现的动画效果。 在阿里云看到其Banner上的一个呼吸灯效果,感觉非常具有科技感,看了下源码,原来只是一个CSS3效果,利用ani...
用CSS3给按钮添加类似雷达扫光效果 CSS3

用CSS3给按钮添加类似雷达扫光效果

如今的Web前端技术层出不穷,大家所看的网页也从原来的简单刻板的风格逐步演变为绚丽多特效的“现代化”效果了,今天就用CSS3给一个按钮添加类似雷达扫光的效果。 如今的Web前端技术层出不穷,大家所看的...
纯CSS制作像素风史蒂芬·乔布斯 CSS

纯CSS制作像素风史蒂芬·乔布斯

都知道CSS3很强大,但你见过用几个标签加上纯CSS做的画么?下面就让我们看下用纯CSS画出来的乔布斯,太牛了! 先让我们看一下效果,虽然是像素风小人,但我们似乎还是能从人物的轮廓中隐约看出来这是苹果...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: