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

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

效果演示

1. <!DOCTYPE html>
   
2. <html lang="en">
   
3. 
   
4. <head>
   
5.     <meta charset="UTF-8">
   
6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
   
7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
8.     <title>前端Hardy</title>
   
9.     <style>
   
10.         body {
    
11.             font-family: 'Poppins', sans-serif;
    
12.             font-weight: 300;
    
13.             font-size: 15px;
    
14.             line-height: 1.7;
    
15.             color: #343434;
    
16.             background-color: #212121;
    
17.             overflow-x: hidden;
    
18.         }
    
19. 
    
20.         .section {
    
21.             position: relative;
    
22.             width: 100%;
    
23.             display: block;
    
24.             text-align: center;
    
25.         }
    
26. 
    
27.         .full-height {
    
28.             min-height: 100vh;
    
29.         }
    
30. 
    
31.         .over-hide {
    
32.             overflow: hidden;
    
33.         }
    
34. 
    
35.         .padding-tb {
    
36.             padding: 100px 0;
    
37.         }
    
38. 
    
39.         [type="radio"]:checked,
    
40.         [type="radio"]:not(:checked) {
    
41.             position: absolute;
    
42.             left: -9999px;
    
43.         }
    
44. 
    
45.         .checkbox:checked+label,
    
46.         .checkbox:not(:checked)+label {
    
47.             position: relative;
    
48.             cursor: pointer;
    
49.             margin: 0 auto;
    
50.             text-align: center;
    
51.             margin-right: 6px;
    
52.             margin-left: 6px;
    
53.             display: inline-block;
    
54.             width: 50px;
    
55.             height: 50px;
    
56.             border: 3px solid #bdc3c7;
    
57.             background-size: cover;
    
58.             background-position: center;
    
59.             box-sizing: border-box;
    
60.             -webkit-transition: all 0.2s ease;
    
61.             transition: all 0.2s ease;
    
62.             background-image: url('https://assets.codepen.io/1462889/sl1.jpg');
    
63.             animation: border-transform 6s linear infinite alternate forwards;
    
64.             -webkit-animation-play-state: paused;
    
65.             -moz-animation-play-state: paused;
    
66.             animation-play-state: paused;
    
67.         }
    
68. 
    
69.         .checkbox.scnd+label {
    
70.             background-image: url('https://assets.codepen.io/1462889/sl2.jpg');
    
71.         }
    
72. 
    
73.         .checkbox.thrd+label {
    
74.             background-image: url('https://assets.codepen.io/1462889/sl3.jpg');
    
75.         }
    
76. 
    
77.         .checkbox.foth+label {
    
78.             background-image: url('https://assets.codepen.io/1462889/sl4.jpg');
    
79.         }
    
80. 
    
81.         .checkbox:checked+label {
    
82.             box-shadow: 0 8px 25px 0 rgba(16, 39, 112, .3);
    
83.             transform: scale(1.3);
    
84.             -webkit-animation-play-state: running;
    
85.             -moz-animation-play-state: running;
    
86.             animation-play-state: running;
    
87.         }
    
88. 
    
89.         @keyframes border-transform {
    
90. 
    
91.             0%,
    
92.             100% {
    
93.                 border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    
94.             }
    
95. 
    
96.             14% {
    
97.                 border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
    
98.             }
    
99. 
    
100.             28% {
     
101.                 border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
     
102.             }
     
103. 
     
104.             42% {
     
105.                 border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
     
106.             }
     
107. 
     
108.             56% {
     
109.                 border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
     
110.             }
     
111. 
     
112.             70% {
     
113.                 border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
     
114.             }
     
115. 
     
116.             84% {
     
117.                 border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
     
118.             }
     
119.         }
     
120. 
     
121.         .slider-height-padding {
     
122.             padding-top: 440px;
     
123.         }
     
124. 
     
125.         ul {
     
126.             position: absolute;
     
127.             top: 0;
     
128.             left: 0;
     
129.             display: block;
     
130.             width: 100%;
     
131.             z-index: 100;
     
132.             padding: 0;
     
133.             margin: 0;
     
134.             list-style: none;
     
135.         }
     
136. 
     
137.         ul li {
     
138.             position: absolute;
     
139.             top: 0;
     
140.             left: 0;
     
141.             width: 100%;
     
142.             display: block;
     
143.             z-index: 100;
     
144.             padding: 0;
     
145.             margin: 0;
     
146.             list-style: none;
     
147.             height: 400px;
     
148.             border: 5px solid #bdc3c7;
     
149.             background-size: cover;
     
150.             background-position: center;
     
151.             background-image: url('https://assets.codepen.io/1462889/sl1.jpg');
     
152.             border-radius: 50%;
     
153.             box-sizing: border-box;
     
154.             font-family: 'Poppins', sans-serif;
     
155.             font-weight: 900;
     
156.             font-size: 16px;
     
157.             letter-spacing: 2px;
     
158.             line-height: 2.7;
     
159.             color: #343434;
     
160.             writing-mode: vertical-rl;
     
161.             opacity: 0;
     
162.             pointer-events: none;
     
163.             box-shadow: 0 8px 25px 0 rgba(16, 39, 112, .1);
     
164.             -webkit-transition: all 0.5s ease;
     
165.             transition: all 0.5s ease;
     
166.         }
     
167. 
     
168.         ul li span {
     
169.             mix-blend-mode: difference;
     
170.         }
     
171. 
     
172.         ul li:nth-child(2) {
     
173.             background-image: url('https://assets.codepen.io/1462889/sl2.jpg');
     
174.         }
     
175. 
     
176.         ul li:nth-child(3) {
     
177.             background-image: url('https://assets.codepen.io/1462889/sl3.jpg');
     
178.         }
     
179. 
     
180.         ul li:nth-child(4) {
     
181.             background-image: url('https://assets.codepen.io/1462889/sl4.jpg');
     
182.         }
     
183. 
     
184. 
     
185.         .checkbox.frst:checked~ul li:nth-child(1) {
     
186.             opacity: 1;
     
187.             pointer-events: auto;
     
188.             border-radius: 16px;
     
189.         }
     
190. 
     
191.         .checkbox.scnd:checked~ul li:nth-child(2) {
     
192.             opacity: 1;
     
193.             pointer-events: auto;
     
194.             border-radius: 16px;
     
195.         }
     
196. 
     
197.         .checkbox.thrd:checked~ul li:nth-child(3) {
     
198.             opacity: 1;
     
199.             pointer-events: auto;
     
200.             border-radius: 16px;
     
201.         }
     
202. 
     
203.         .checkbox.foth:checked~ul li:nth-child(4) {
     
204.             opacity: 1;
     
205.             pointer-events: auto;
     
206.             border-radius: 16px;
     
207.         }
     
208. 
     
209.         .logo {
     
210.             position: absolute;
     
211.             top: 30px;
     
212.             right: 30px;
     
213.             display: block;
     
214.             z-index: 100;
     
215.             transition: all 250ms linear;
     
216.         }
     
217. 
     
218.         .logo img {
     
219.             height: 26px;
     
220.             width: auto;
     
221.             display: block;
     
222.         }
     
223. 
     
224. 
     
225. 
     
226.         @media (max-width: 767px) {
     
227.             .slider-height-padding {
     
228.                 padding-top: 340px;
     
229.             }
     
230. 
     
231.             ul li {
     
232.                 height: 300px;
     
233.                 font-size: 13px;
     
234.                 letter-spacing: 1px;
     
235.             }
     
236.         }
     
237. 
     
238.         @media (max-width: 575px) {
     
239.             .slider-height-padding {
     
240.                 padding-top: 240px;
     
241.             }
     
242. 
     
243.             ul li {
     
244.                 height: 200px;
     
245.             }
     
246.         }
     
247.     </style>
     
248. </head>
     
249. 
     
250. <body>
     
251.     <div class="section full-height over-hide px-4 px-sm-0">
     
252.         <div class="container">
     
253.             <div class="row full-height justify-content-center">
     
254.                 <div class="col-lg-10 col-xl-8 align-self-center padding-tb">
     
255.                     <div class="section mx-auto text-center slider-height-padding">
     
256.                         <input class="checkbox frst" type="radio" id="slide-1" name="slider" checked />
     
257.                         <label for="slide-1"></label>
     
258.                         <input class="checkbox scnd" type="radio" name="slider" id="slider-2" />
     
259.                         <label for="slider-2"></label>
     
260.                         <input class="checkbox thrd" type="radio" name="slider" id="slider-3" />
     
261.                         <label for="slider-3"></label>
     
262.                         <input class="checkbox foth" type="radio" name="slider" id="slider-4" />
     
263.                         <label for="slider-4"></label>
     
264.                         <ul>
     
265.                             <li>
     
266.                                 <span>MALE GOOFY FACE</span>
     
267.                             </li>
     
268.                             <li>
     
269.                                 <span>TOY PIG</span>
     
270.                             </li>
     
271.                             <li>
     
272.                                 <span>SHY PORTRAIT</span>
     
273.                             </li>
     
274.                             <li>
     
275.                                 <span>SKATEBOARD FACE</span>
     
276.                             </li>
     
277.                         </ul>
     
278.                     </div>
     
279.                 </div>
     
280.             </div>
     
281.         </div>
     
282.     </div>
     
283. </body>
     
284. </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)：定义了不同屏幕尺寸下的样式调整，包括轮播图的内边距和幻灯片的高度。