1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>纯CSS实现图片切换</title>
6 <style>
7 *{margin:0; padding:0;}
8 li{ list-style:none;}
9 /*首先是对无序列表进行样式设置*/
10 .slideshow ,.slideshow:after{
11 position:fixed;
12 width:100%;
13 height:100%;
14 top:0px;
15 left:0px;;
16 z-index:0;
17 }
18 .slideshow:after{
19 content:‘‘;
20 background:transparent url(images/pattern.png) repeat top left;
21 }
22 /*将span的width和height占满整个视图，并将span里面的文字变为不可见，直接用transprant*/
23 /*设置opacity:0;之后我们通过在动画中去改变这个值*/
24 .slideshow li span{
25 width:100%; height:100%;
26 position:absolute;
27 top:0px; left:0px;
28 color:transparent;
29 background-size:cover;
30 background-position:50% 50%;
31 background-repeat:no-repeat;
32 opacity:0;
33 z-index:0;
34 -webkit-backface-visibility: hidden;
35 -webkit-animation: imageAnimation 18s linear infinite 0s;
36 -moz-animation: imageAnimation 18s linear infinite 0s;
37 -o-animation: imageAnimation 18s linear infinite 0s;
38 -ms-animation: imageAnimation 18s linear infinite 0s;
39 animation: imageAnimation 18s linear infinite 0s;
40 }
41
42 .slideshow li div {
43 z-index: 1000;
44 position: absolute;
45 bottom: 30px;
46 left: 0px;
47 width: 100%;
48 text-align: center;
49 opacity: 0;
50 color: #74BDEA;
51 -webkit-animation: titleAnimation 18s linear infinite 0s;
52 -moz-animation: titleAnimation 18s linear infinite 0s;
53 -o-animation: titleAnimation 18s linear infinite 0s;
54 -ms-animation: titleAnimation 18s linear infinite 0s;
55 animation: titleAnimation 18s linear infinite 0s;
56 }
57 .slideshow li div h3 {
58 font-family: ‘BebasNeueRegular‘, ‘Arial Narrow‘, Arial, sans-serif;
59 font-size: 240px;
60 padding: 0;
61 line-height: 200px;
62 }
63 /*接下来将定义所有span的背景图片和动画的延迟，所以每一个滑动的图片和title出现在上一个出现之后的6秒*/
64 .slideshow li:nth-child(1) span {
65 background-image: url(http://img.51bzzj.com/upload/1024x768/1201/11145412462.jpg);
66 }
67 .slideshow li:nth-child(2) span {
68 background-image: url(http://pic15.nipic.com/20110702/7557282_141243310105_2.jpg);
69 -webkit-animation-delay: 6s;
70 -moz-animation-delay: 6s;
71 -o-animation-delay: 6s;
72 -ms-animation-delay: 6s;
73 animation-delay: 6s;
74 }
75 .slideshow li:nth-child(3) span {
76 background-image: url(http://cc1.cache.cdqss.com/attachments/month_1011/10111116357db00e1d9d39eea3.jpg);
77 -webkit-animation-delay: 12s;
78 -moz-animation-delay: 12s;
79 -o-animation-delay: 12s;
80 -ms-animation-delay: 12s;
81 animation-delay: 12s;
82 }
83 .slideshow li:nth-child(2) div {
84 -webkit-animation-delay: 6s;
85 -moz-animation-delay: 6s;
86 -o-animation-delay: 6s;
87 -ms-animation-delay: 6s;
88 animation-delay: 6s;
89 }
90 .slideshow li:nth-child(3) div {
91 -webkit-animation-delay: 12s;
92 -moz-animation-delay: 12s;
93 -o-animation-delay: 12s;
94 -ms-animation-delay: 12s;
95 animation-delay: 12s;
96 }
97 /*设置图片动画关键帧*/
98 @-webkit-keyframes imageAnimation {
99 0% { opacity: 0;
100 -webkit-animation-timing-function: ease-in; }
101 8% { opacity: 1;
102 -webkit-animation-timing-function: ease-out; }
103 17% { opacity: 1 }
104 50% { opacity: 0 }
105 100% { opacity: 0 }
106 }
107 @-moz-keyframes imageAnimation {
108 0% { opacity: 0;
109 -webkit-animation-timing-function: ease-in; }
110 8% { opacity: 1;
111 -webkit-animation-timing-function: ease-out; }
112 17% { opacity: 1 }
113 50% { opacity: 0 }
114 100% { opacity: 0 }
115 }
116 @-o-keyframes imageAnimation {
117 0% { opacity: 0;
118 -webkit-animation-timing-function: ease-in; }
119 8% { opacity: 1;
120 -webkit-animation-timing-function: ease-out; }
121 17% { opacity: 1 }
122 50% { opacity: 0 }
123 100% { opacity: 0 }
124 }
125 @-ms-keyframes imageAnimation {
126 0% { opacity: 0;
127 -webkit-animation-timing-function: ease-in; }
128 8% { opacity: 1;
129 -webkit-animation-timing-function: ease-out; }
130 17% { opacity: 1 }
131 50% { opacity: 0 }
132 100% { opacity: 0 }
133 }
134 @keyframes imageAnimation {
135 0% { opacity: 0;
136 -webkit-animation-timing-function: ease-in; }
137 8% { opacity: 1;
138 -webkit-animation-timing-function: ease-out; }
139 17% { opacity: 1 }
140 50% { opacity: 0 }
141 100% { opacity: 0 }
142 }
143 /*设置文字动画关键帧*/
144 @-webkit-keyframes titleAnimation {
145 0% { opacity: 0 }
146 8% { opacity: 1 }
147 17% { opacity: 1 }
148 35% { opacity: 0 }
149 100% { opacity: 0 }
150 }
151 @-moz-keyframes titleAnimation {
152 0% { opacity: 0 }
153 8% { opacity: 1 }
154 17% { opacity: 1 }
155 35% { opacity: 0 }
156 100% { opacity: 0 }
157 }
158 @-o-keyframes titleAnimation {
159 0% { opacity: 0 }
160 8% { opacity: 1 }
161 17% { opacity: 1 }
162 35% { opacity: 0 }
163 100% { opacity: 0 }
164 }
165 @-ms-keyframes titleAnimation {
166 0% { opacity: 0 }
167 8% { opacity: 1 }
168 17% { opacity: 1 }
169 35% { opacity: 0 }
170 100% { opacity: 0 }
171 }
172 @keyframes titleAnimation {
173 0% { opacity: 0 }
174 8% { opacity: 1 }
175 17% { opacity: 1 }
176 35% { opacity: 0 }
177 100% { opacity: 0 }
178 }
179 /*有些浏览器不支持animation的，我们将会简单的展示最后一张图片*/
180 .no-cssanimation .slideshow li span{opacity:1;}
181 /*设置不同分辨率时title的字体大小*/
182 @media screen and (max-width: 1140px) {
183 .cb-slideshow li div h3 { font-size: 140px }
184 }
185 @media screen and (max-width: 600px) {
186 .cb-slideshow li div h3 { font-size: 80px }
187 }
188 </style>
189 </head>
190 <body>
191 <ul class="slideshow">
192 <li>
193 <span>imiage 1</span>
194 <div>
195 <h3>the first image</h3>
196 </div>
197 </li>
198 <li>
199 <span>image 2</span>
200 <div>
201 <h3>this is the second</h3>
202 </div>
203 </li>
204 <li>
205 <span>image 3</span>
206 <div>
207 <h3>the third</h3>
208 </div>
209 </li>
210 </ul>
211 </body>
212 </html>
时间： 2024-08-24 07:45:49