纯css3实现图片切换

 
  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>

 

posted on 2016-02-16 18:29  zhangjingyun  阅读(5406)  评论(0)  编辑  收藏  举报