在CSS中,有多种方法可以使图片一张张划过,下面我们来介绍其中两种方法。/* 方法一:使用animation实现图片切换 */ .box { width: 960px; height: 400px;
在CSS中,有多种方法可以使图片一张张划过,下面我们来介绍其中两种方法。
/* 方法一:使用animation实现图片切换 */ .box { width: 960px; height: 400px; margin: 50px auto; position: relative; overflow: hidden; } @keyframes rolling { 0% { left: 0; } 20% { left: 0; } 25% { left: -960px; } 45% { left: -960px; } 50% { left: -1920px; } 70% { left: -1920px } 75% { left: -2880px; } 100% { left: -2880px; } } .box img { width: 960px; height: 400px; position: absolute; left: 0; top: 0; animation: rolling 10s linear infinite; }
上面代码中,我们创建了一个包含多张图片的容器,设置了其宽度、高度、位置和溢出等属性。然后,定义了一个名为rolling的关键帧动画,该动画包括8个关键帧,每个关键帧定义了图片容器的位置。
接下来,在图片元素上应用该动画,设置了单张图片的宽度、高度和位置等属性,最后,定义了图片水平滚动的时间函数、速度和是否无限循环等属性。
/* 方法二:使用transition实现图片切换 */ .box { width: 960px; height: 400px; margin: 50px auto; position: relative; overflow: hidden; } .box img { width: 960px; height: 400px; position: absolute; left: -960px; top: 0; transition: left 2s linear; } .box img:nth-child(2) { left: 0; z-index: 2; } .box img:nth-child(3) { left: 960px; z-index: 3; } .box img:nth-child(4) { left: 1920px; z-index: 4; } .box:hover img { left: calc(-960px * 2); }
上面代码中,我们设置了和方法一相同的图片容器和单张图片属性,然后,定义了每个图片元素的初始位置和z-index(避免图片重叠)。
接下来,使用:hover伪类和transition属性,设置了当鼠标悬停在图片容器上时,图片元素的位置。同时,transition属性确保位置变化具有渐变效果。
以上两种方法都可以让图片一张张划过,你可以根据自己的需求选择其中一种。
粉丝
0
关注
0
收藏
0