[分享]css3实现图片左右摇摆

CSS3是一种让网页更加美观的技术，其中包括了许多有趣的动画特效。在本文中，我们将介绍如何使用CSS3实现一个图片左右摇摆的特效。 .shakeimage{ display: inlineblock;...

CSS3是一种让网页更加美观的技术，其中包括了许多有趣的动画特效。在本文中，我们将介绍如何使用CSS3实现一个图片左右摇摆的特效。

 .shake-image{
        display: inline-block;
        animation: shake .5s infinite;
    }
    
    @keyframes shake {
        0% { transform: translateX(0); }
        50% { transform: translateX(10px); }
        100% { transform: translateX(-10px); }
    } 

上述代码是实现图片左右摇摆的核心代码。我们使用了CSS3的关键帧动画技术，在50%的时间内，图片向右移动10像素，再在100%的时间内向左移动10像素，形成摇摆的效果。

同时，我们还通过display属性将图片的display设置为inline-block，使其可以在行内进行排列。

使用这段代码只需将图片的class设置为shake-image即可：

 <img src="image.jpg" class="shake-image"> 

至此，我们就成功实现了图片左右摇摆的特效。