css图片自动切换特效 |css的 focus禁用样式

HTML代码：
<div id="slider">
<img class="active" src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
</div>
CSS代码：
#slider {
width: 400px;
height: 300px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#slider img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#slider img.active {
opacity: 1;
}

上面是一段CSS代码，它实现了一个简单的图片切换特效。首先，大家先在HTML代码中添加了一个id为“slider”的div元素，和四个img元素。其中，第一个img元素添加了class为“active”，表示默认情况下这张图片会被展示。其他的img元素则不添加该class。

在CSS代码中，首先大家设置了id为“slider”的div元素的宽度、高度、居中显示、相对定位和隐藏溢出部分。接着，针对img元素，设置了绝对定位，以及放置位置为左上角，并将不处于激活状态的图片都设置了opacity为0，让其默认不显示。最后，为在激活状态的图片设置了opacity为1，使其显示出来。而图片的切换则是通过给固定时间添加class实现的。

这段CSS代码实现了一个十分简单的图片切换特效，优美大气，让用户浏览网页时能够感受到新的惊喜和视觉上的享受。在实际的网页设计中，大家还可以通过添加其他属性、调整动画效果等方式，进一步完善这种图片自动切换特效。