纯CSS3实现元素抖动特效

2017年12月21日21:45:53 发表评论 278

上次在一个博客里面看到很有意思的一个特效,刷新网页,页面所有的窗口都在抖动,简直是亮瞎眼,其实这样的特效用css3很容易就可以实现,学web前端的都知道css3动画的@keyframes,这是用于定义一个动画的规则。

css3抖动动画完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>纯CSS3实现元素抖动特效</title>
  6.     <style>
  7.         div{
  8.             width500px;
  9.             height500px;
  10.             margin: 0 auto;
  11.             backgroundred;
  12.         }
  13.         .shake:hover{
  14.             animation: shake-crazy 1s infinite;
  15.         }
  16.         @keyframes shake-crazy {
  17.             0% {
  18.                 transform: translate(0px0px) rotate(0deg);
  19.                 opacity: 0.4
  20.             }
  21.             10% {
  22.                 transform: translate(3px10px) rotate(-1deg);
  23.                 opacity: 0.8
  24.             }
  25.             20% {
  26.                 transform: translate(5px14px) rotate(-3deg);
  27.                 opacity: 0.5
  28.             }
  29.             30% {
  30.                 transform: translate(14px3px) rotate(4deg);
  31.                 opacity: 0.6
  32.             }
  33.             40% {
  34.                 transform: translate(-17px0px) rotate(9deg);
  35.                 opacity: 0.7
  36.             }
  37.             50% {
  38.                 transform: translate(1px17px) rotate(-4deg);
  39.                 opacity: 0.7
  40.             }
  41.             60% {
  42.                 transform: translate(9px, -4px) rotate(-10deg);
  43.                 opacity: 0.2
  44.             }
  45.             70% {
  46.                 transform: translate(13px7px) rotate(7deg);
  47.                 opacity: 0.4
  48.             }
  49.             80% {
  50.                 transform: translate(10px12px) rotate(9deg);
  51.                 opacity: 0.1
  52.             }
  53.             90% {
  54.                 transform: translate(0px3px) rotate(5deg);
  55.                 opacity: 0.6
  56.             }
  57.         }
  58.     </style>
  59. </head>
  60. <body>
  61.     <div class="shake">我是会动的</div>
  62. </body>
  63. </html>

说下这段代码每个属性的含义:

  • shake-crazy:是这个动画的名称
  • transform:定义2d、3d动画的转换
  • translate:css3动画中移动动画属性
  • rotate:css3动画中旋转动画属性
  • opacity:定义元素的透明度

PS:百分数表示当前动画的进度。当鼠标移入div元素时,div就会执行shake-crazy的动画,animation是将div和shake-crazy绑定,执行shake-crazy,时间是1s,动画速度曲线是infinite。

猿梦

发表评论

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