HTML&CSS：高级感的图片轮播效果(一键复制)

yycvip · 发表于昨天 21:57

这个页面的设计是一个简单的图片轮播效果，适合用作网页的背景或者展示多个图片的场景

效果演示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端Hardy</title>
<style>
body {
font-family: 'Poppins', sans-serif;
font-weight: 300;
font-size: 15px;
line-height: 1.7;
color: #343434;
background-color: #212121;
overflow-x: hidden;
}
.section {
position: relative;
width: 100%;
display: block;
text-align: center;
}
.full-height {
min-height: 100vh;
}
.over-hide {
overflow: hidden;
}
.padding-tb {
padding: 100px 0;
}
[type="radio"]:checked,
[type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
}
.checkbox:checked+label,
.checkbox:not(:checked)+label {
position: relative;
cursor: pointer;
margin: 0 auto;
text-align: center;
margin-right: 6px;
margin-left: 6px;
display: inline-block;
width: 50px;
height: 50px;
border: 3px solid #bdc3c7;
background-size: cover;
background-position: center;
box-sizing: border-box;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
background-image: url('https://assets.codepen.io/1462889/sl1.jpg');
animation: border-transform 6s linear infinite alternate forwards;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
animation-play-state: paused;
}
.checkbox.scnd+label {
background-image: url('https://assets.codepen.io/1462889/sl2.jpg');
}
.checkbox.thrd+label {
background-image: url('https://assets.codepen.io/1462889/sl3.jpg');
}
.checkbox.foth+label {
background-image: url('https://assets.codepen.io/1462889/sl4.jpg');
}
.checkbox:checked+label {
box-shadow: 0 8px 25px 0 rgba(16, 39, 112, .3);
transform: scale(1.3);
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
animation-play-state: running;
}
@keyframes border-transform {
0%,
100% {
border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}
14% {
border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
}
28% {
border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
}
42% {
border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
}
56% {
border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
}
70% {
border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
}
84% {
border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
}
}
.slider-height-padding {
padding-top: 440px;
}
ul {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
z-index: 100;
padding: 0;
margin: 0;
list-style: none;
}
ul li {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: block;
z-index: 100;
padding: 0;
margin: 0;
list-style: none;
height: 400px;
border: 5px solid #bdc3c7;
background-size: cover;
background-position: center;
background-image: url('https://assets.codepen.io/1462889/sl1.jpg');
border-radius: 50%;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
font-weight: 900;
font-size: 16px;
letter-spacing: 2px;
line-height: 2.7;
color: #343434;
writing-mode: vertical-rl;
opacity: 0;
pointer-events: none;
box-shadow: 0 8px 25px 0 rgba(16, 39, 112, .1);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
ul li span {
mix-blend-mode: difference;
}
ul li:nth-child(2) {
background-image: url('https://assets.codepen.io/1462889/sl2.jpg');
}
ul li:nth-child(3) {
background-image: url('https://assets.codepen.io/1462889/sl3.jpg');
}
ul li:nth-child(4) {
background-image: url('https://assets.codepen.io/1462889/sl4.jpg');
}
.checkbox.frst:checked~ul li:nth-child(1) {
opacity: 1;
pointer-events: auto;
border-radius: 16px;
}
.checkbox.scnd:checked~ul li:nth-child(2) {
opacity: 1;
pointer-events: auto;
border-radius: 16px;
}
.checkbox.thrd:checked~ul li:nth-child(3) {
opacity: 1;
pointer-events: auto;
border-radius: 16px;
}
.checkbox.foth:checked~ul li:nth-child(4) {
opacity: 1;
pointer-events: auto;
border-radius: 16px;
}
.logo {
position: absolute;
top: 30px;
right: 30px;
display: block;
z-index: 100;
transition: all 250ms linear;
}
.logo img {
height: 26px;
width: auto;
display: block;
}
@media (max-width: 767px) {
.slider-height-padding {
padding-top: 340px;
}
ul li {
height: 300px;
font-size: 13px;
letter-spacing: 1px;
}
}
@media (max-width: 575px) {
.slider-height-padding {
padding-top: 240px;
}
ul li {
height: 200px;
}
}
</style>
</head>
<body>
<div class="section full-height over-hide px-4 px-sm-0">
<div class="container">
<div class="row full-height justify-content-center">
<div class="col-lg-10 col-xl-8 align-self-center padding-tb">
<div class="section mx-auto text-center slider-height-padding">
<input class="checkbox frst" type="radio" id="slide-1" name="slider" checked />
<label for="slide-1"></label>
<input class="checkbox scnd" type="radio" name="slider" id="slider-2" />
<label for="slider-2"></label>
<input class="checkbox thrd" type="radio" name="slider" id="slider-3" />
<label for="slider-3"></label>
<input class="checkbox foth" type="radio" name="slider" id="slider-4" />
<label for="slider-4"></label>
<ul>
<li>
<span>MALE GOOFY FACE</span>
</li>
<li>
<span>TOY PIG</span>
</li>
<li>
<span>SHY PORTRAIT</span>
</li>
<li>
<span>SKATEBOARD FACE</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

复制代码

section full-height over-hide：这是最外层的容器，设置了全屏高度和隐藏溢出的内容。
container：内部容器，用于包裹整个内容。
row full-height justify-content-center：用于垂直居中对齐内部元素的行容器。
col-lg-10 col-xl-8 align-self-center padding-tb：列容器，用于限制内容的宽度，并在垂直方向上居中。
section mx-auto text-center slider-height-padding：这是轮播图的容器，设置了自动外边距和文本居中。
轮播图控件：四个input元素，类型为radio，用于控制轮播图的切换。每个input都有一个对应的label标签。
轮播图列表：ul元素包含四个li元素，每个li元素代表一个幻灯片，包含一个span元素显示文本。
全局样式：body：设置了字体、字重、字号、行高、颜色和背景色。.section：设置了相对定位、宽度、显示方式和文本居中。.full-height：设置了最小高度为视口高度（100vh）。.over-hide：设置了隐藏溢出的内容。
轮播图样式：.checkbox：设置了单选按钮的位置和基本样式。.checkbox:checked+label：设置了选中状态下的样式，包括阴影和动画效果。@keyframes border-transform：定义了一个关键帧动画，用于边框的变形效果。
幻灯片列表样式：ul和ul li：设置了绝对定位、宽度、高度、背景图片、边框、圆角和阴影等。ul li span：设置了混合模式和文本样式。
响应式设计：@media (max-width: 767px)和@media (max-width: 575px)：定义了不同屏幕尺寸下的样式调整，包括轮播图的内边距和幻灯片的高度。

		自动登录	找回密码
密码			立即注册