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- 1140px) { 183 .cb-slideshow li div h3 { font-size: 140px } 184 } 185 @media screen and (max- 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>