CSS3是一个强大的样式语言,它不仅可以美化网站的外观,还能实现各种动态效果。其中,轮显是一种常见的效果,用于在指定时间内依次显示多张图片或多个元素。下面我们就来看看如何使用CSS3实现轮显。
<div class="slider"> <img src="1.jpg"/> <img src="2.jpg"/> <img src="3.jpg"/> </div> /* CSS */ .slider { width: 500px; height: 300px; overflow: hidden; position: relative; } .slider img { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } .slider img:first-child { opacity: 1; } .slider img.active { opacity: 1; }
这是一个基础的轮显实现,我们首先使用div包裹需要展示的图片,设置该div的高度和宽度,并将overflow属性设置为hidden,使得超出div的图片会被隐藏。接下来,我们使用position属性将图片定位到div的左上角,并将其透明度设置为0,使其不可见。我们在第一个img标签上添加了active类,将其透明度设置为1,作为轮显的初始状态。
接着,我们使用CSS3的transition属性来实现轮显效果。当某个img标签的active类被添加时,其透明度会从0变为1,而当active类被移除时,其透明度会从1变为0。这样,我们就能够在指定时间内实现图片的循环展示了。