[分享]css3整个图片从有向左滑动

在Web开发中，CSS3动画的应用越来越普遍。今天，我们来学习如何使用CSS3实现整个图片从右到左滑动的效果。

 /* HTML代码 */
    <div class="container">
        <img src="img/sunset.jpg" alt="美丽的落日">
    </div>

    /* CSS代码 */
    .container {
        width: 500px;
        height: 300px;
        overflow: hidden;
    }
    img {
        position: relative;
        animation: slide-to-left 5s linear infinite;
    }
    @keyframes slide-to-left {
        0% {
            left: 100%;
        }
        100% {
            left: -100%;
        }
    } 

首先，我们需要一个包含图片的div容器，并将其设置为指定的宽高比例。然后，我们将图片设置为相对定位，并给它添加一个动画效果。

动画效果使用了CSS3关键帧动画（@keyframes）。在这里，我们定义了两个关键帧，分别为0%和100%。0%关键帧将图片的left值设置为100%，使图片从容器右侧开始滑动；而100%关键帧将图片的left值设置为-100%，使图片滑出容器左侧。

最后，我们将动画应用到图片上，设置为5秒线性无限循环。这样，图片就可以一直从右到左地滑动了。