[分享]css3持续左右移动

CSS3动画效果中，持续左右移动是一种常见的展示效果。通过CSS3的transform和animation属性，可以实现文字和图片的无缝左右移动效果，让网页更加动态、生动。/CSS3代码/ .box{...

CSS3动画效果中，持续左右移动是一种常见的展示效果。通过CSS3的transform和animation属性，可以实现文字和图片的无缝左右移动效果，让网页更加动态、生动。

/*CSS3代码*/

.box{
    width: 500px;
    height: 300px;
    margin: 0 auto;
    position: relative;
}

.box img{
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation: move 5s linear infinite;
}

@keyframes move{
    0%{
        left: -100px;
    }
    50%{
        left: 600px;
    }
    100%{
        left: -100px;
    }
} 

上述代码中，创建了一个包含图片的div容器，并设置容器的宽高为500px和300px。图片的宽高为100px，并且使用绝对定位和居中方式将图片置于容器中央。

接下来，通过CSS3的transform属性将图片向左移动100px。使用animation属性，并设置动画执行时间为5s，并且循环执行。最后，通过使用@keyframes关键字，创建动画的关键帧，让图片以线性方式从左侧移动到右侧，再从右侧移回左侧不断循环。

总之，CSS3持续左右移动效果让网页更加生动活泼，通过过渡效果和动画效果增加了页面的美感和视觉效果，为用户带来更好的浏览体验。