手机纯css图片切换效果
时间2023-07-29 04:11:03发布访客分类CSS浏览586
导读：在现代化的网站开发中，对于图片切换效果的要求越来越高，这也催生了许多不同的图片切换方式。本文将介绍如何使用css纯手工打造手机端的图片切换效果。HTML结构：这是第一张图片这是第二张图片这是第三张图片CSS样式：* {margin: 0;p...
在现代化的网站开发中，对于图片切换效果的要求越来越高，这也催生了许多不同的图片切换方式。本文将介绍如何使用css纯手工打造手机端的图片切换效果。
HTML结构：
CSS样式：* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
margin: 1rem auto;
width: 90%;
height: 50vw;
overflow: hidden;
position: relative;
}
li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s;
}
li.active {
opacity: 1;
}
li:nth-child(1) {
background-color: #FFD9D9;
}
li:nth-child(2) {
background-color: #F7FFD9;
}
li:nth-child(3) {
background-color: #D9FBFF;
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.title {
background-color: rgba(0,0,0,.5);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3vw;
line-height: 3vw;
text-indent: 1rem;
color: #FFF;
font-size: .8rem;
}
首先我们给ul元素设置一定的宽高和隐藏溢出部分，然后让li元素绝对定位并占满整个父级元素。接着我们给li元素添加过渡效果，然后利用nth-child伪类选择器对每个li元素进行样式区分。对于图片的大小我们使用了object-fit属性来解决兼容性问题。最后我们添加了标题的样式设置。
实现的效果是，一开始所有li元素透明，只有被标记为active的li元素透明度设置为1，这样就可以达到切换效果的效果，并且我们在hover li元素上也能得到良好的交互效果。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 手机纯css图片切换效果
本文地址： https://pptw.com/jishu/340870.html
