html: <div class="card-slider"> <div class="card-slider-container"> <div class="card-slider-item"> <img src="img/1.jpg" alt=""> </div> <div class="card-slider-item"> <img src="img/2.jpg" alt=""> </div> <div class="card-slider-item"> <img src="img/3.jpg" alt=""> </div> <div class="card-slider-item"> <img src="img/4.jpg" alt=""> </div> </div> </div> css: * { margin: 0; padding: 0; box-sizing: border-box; } .card-slider { position: relative; width: 100%; height: 300px; overflow: hidden; } .card-slider-container { position: absolute; width: 100%; height: 100%; display: flex; transition: all 1s ease; } .card-slider-item { flex: 1; margin: 10px; border-radius: 10px; overflow: hidden; position: relative; transition: all 1s ease; } .card-slider-item img { width: 100%; height: 100%; object-fit: cover; } .card-slider-item::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; z-index: 1; transition: all 0.5s ease; } .card-slider-item:hover::before { opacity: 1; } .card-slider-item::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 25px solid #fff; transform: translate(-50%, -50%); z-index: 2; } .card-slider-container:hover .card-slider-item { transform: scale(1.1); }
以上就是CSS卡片式轮播图的代码,通过对CSS的样式设置,可以实现一个美观、动感的轮播图效果,增强网页的视觉效果,提高用户体验。在实际开发中,大家可以根据需求进行调整、更改,达到更好的展示效果。