css3从右到左显示图片 |css 轮播 多样式

img {
position: relative;
right: -100%;
animation: slide-in 1s forwards;
}
@keyframes slide-in {
100% {
right: 0%;
}
}

上面的代码是实现从右到左显示图片的核心代码。首先，大家将图片的位置设置为相对定位，并且将right属性设置为-100%。这样就将图片从原本的位置移动到了屏幕的右侧。

接着，大家使用CSS3的动画特性来实现图片从右到左的滑动效果。通过@keyframes规则定义一个名为slide-in的动画，将right属性从-100%逐渐变化到0%，就能实现图片从右到左的滑动效果了。

最后，大家给动画加上forwards参数，使得动画结束后，图片停留在最终的位置上。这样，大家就成功地实现了图片从右到左的显示效果。