[分享]css3控制上下抖动

CSS3是一种增强式的样式表语言，用于控制网页的外观和布局。在CSS3中，可以使用一些新的属性和值，实现一些以前无法实现的特效和效果。其中，控制上下抖动是CSS3中常用的一种技术。 .shaking ...

CSS3是一种增强式的样式表语言，用于控制网页的外观和布局。在CSS3中，可以使用一些新的属性和值，实现一些以前无法实现的特效和效果。其中，控制上下抖动是CSS3中常用的一种技术。

 .shaking {
        animation: shaking 2s ease-in-out infinite;
    }

    @keyframes shaking {
        0% { transform: translateY(0); }
        10%, 30%, 50%, 70%, 90% { transform: translateY(-10px); }
        20%, 40%, 60%, 80%, 100% { transform: translateY(10px); }
    } 

以上代码展示了如何使用CSS3控制元素上下抖动。首先，在元素的class中加入一个名为“shaking”的类。然后，在该类中，使用animation属性来指定元素动画效果，对应的值为“shaking 2s ease-in-out infinite”。这条语句的意思是，使用名为“shaking”的动画，持续2秒，使用缓动函数“ease-in-out”，无限循环播放。

接下来，使用@keyframes关键字定义一个名为“shaking”的动画。该动画包括三个关键帧，分别表示动画的开始、中间、和结束状态。在开始状态（0%），元素的transform属性的值是“translateY(0)”；在中间状态（10%、30%、50%、70%、90%），元素的transform属性的值是“translateY(-10px)”；在结束状态（20%、40%、60%、80%、100%），元素的transform属性的值是“translateY(10px)”。

最终的效果是，元素会在垂直方向上上下抖动，给人以视觉上的震动感，从而增强网页的动态效果和视觉效果。