css3 果冻抖动效果

CSS3果冻抖动效果是一种非常有趣的动画效果，可以为网站添加一些趣味性和互动性。下面我们来详细了解一下如何实现CSS3果冻抖动效果。

.box {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px auto;
    background-color: #f00;
    animation: jelly 0.5s ease infinite alternate;
 }
@keyframes jelly {
from {
    transform: skewX(-5deg) skewY(-10deg);
}
to {
    transform: skewX(5deg) skewY(10deg);
}
}
    

如上所示，我们首先创建一个包含若干元素的容器，我们使用.position:relative; 属性为容器添加定位属性，用.width和.height设置容器的宽和高，.margin属性用于让容器居中显示，.background-color: #f00; 设置它的背景颜色。

接下来，我们定义了一个名为jelly的CSS3动画关键帧，用于控制容器元素的变化效果，其中.from用于设置动画的初始状态，包括容器元素的.skewX和.skewY属性的旋转角度值。.to用于设置动画的结束状态，包括容器元素的.skewX和.skewY属性的旋转角度值。

最后，我们使用.animation属性将jelly动画应用于容器元素上，具体包括.infinit：表示动画无限循环，.alternate：表示动画交替播放。

这样通过CSS3的动画关键帧和属性的组合，就可以实现果冻抖动效果了。让你的网站活力更加的缤纷吧！

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