css焦点图片怎么做 |环形进度条 css

HTML代码：
<div class="focus">
<ul class="img-list">
<li class="active"><img src="img1.jpg" alt=""></li>
<li><img src="img2.jpg" alt=""></li>
<li><img src="img3.jpg" alt=""></li>
</ul>
<ul class="nav">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
CSS代码：
/*设置容器大小及样式*/
.focus {
width: 900px;
height: 400px;
margin: 0 auto;
position: relative;
}
/*设置图片样式*/
.img-list li img {
width: 100%;
height: 100%;
}
/*设置导航样式*/
.nav li {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
opacity: 0.4;
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
}
/*设置导航悬停样式*/
.nav li:hover {
opacity: 0.7;
}
/*设置导航当前激活样式*/
.nav li.active {
background-color: #f60;
opacity: 1;
}
/*设置图片列表悬停样式*/
.img-list:hover li:not(.active) {
opacity: 0.7;
}
/*设置图片列表当前激活样式*/
.img-list li.active {
opacity: 1;
transition: opacity 0.5s;
}

以上代码实现了一个图片轮播的效果，并且可以通过导航选择当前显示的图片。大家通过设置图片悬停和当前激活状态的样式，来实现焦点图片的效果。

希望本文对大家学习CSS焦点图片有所帮助。