css3 窗口抖动动画

CSS3是一种新一代的浏览器样式语言，它在设计动画效果方面拥有强大的能力，如今已经广泛应用于网页设计中，窗口抖动就是其中之一。

在CSS3中使用窗口抖动动画是非常简单的，只需要一些简单的CSS代码就可以实现。以下是实现窗口抖动动画的代码：

/*定义键盘动画*/@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
}
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
}
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
}
}
/*定义窗口抖动元素*/.shake-window {
      -webkit-animation-name: shake;
      -webkit-animation-duration: 0.8s;
      -webkit-animation-timing-function: cubic-bezier(.36,.07,.19,.97);
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-delay: 1s;
}
    /*应用窗口抖动*/ div class="shake-window">
      
窗口抖动动画

可以看到，上述代码定义了一个名为“shake”的CSS动画，它使用translateX函数实现元素在水平方向上的移动，同时应用了cubic-bezier函数使抖动更加自然。

接下来在元素上应用了shake动画，将其进行无限循环，就完成了窗口抖动动画，看起来非常炫酷。

总而言之，CSS3的窗口抖动动画是一种简单而强大的动画效果，它可以为网页设计提供更加生动的展示效果，让用户获得更好的浏览体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！