CSS3实现页面的平滑过渡
这是文件的css，全部文件的话请到Github下载：点击这里
1 @charset "UTF-8"; 2 @font-face {font-family: 'iconfont'; 3 src: url('font/iconfont.eot'); /* IE9*/ 4 src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 url('font/iconfont.woff') format('woff'), /* chrome、firefox */ 6 url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ 7 url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ 8 font-weight: normal; /*设置字体宽度和字体样式*/ 9 font-style:normal; 10 } 11 body{ 12 font-family:Georia,serif; 13 background:#ddd; 14 font-weight:400; 15 font-size:15px; 16 color:#333; 17 overflow:hidden; 18 -webkit-font-smoothing: antialiased; 19 font-smoothing: antialiased; 20 } 21 a{ 22 text-decoration:none; 23 color:#555;; 24 } 25 .clr{ /*清除浮动*/ 26 width:0; 27 height:0; 28 overflow:hidden; 29 clear:both; 30 padding:0; 31 margin:0; 32 } 33 .st-container{ 34 width:100%; 35 height:100%; 36 position:absolute; 37 left:0; 38 top:0; 39 font-family: "Josefin Slab","Myriad Pro",Arial,sans-serif; 40 } 41 .st-container > input, 42 .st-container > a{ 43 width:20%; 44 height:34px; 45 line-height: 34px; 46 position:fixed; 47 bottom:0; 48 49 } 50 .st-container > input{ 51 opacity:0; 52 z-index:1000; 53 cursor:pointer; 54 } 55 .st-container > a { 56 z-index:10; 57 font-weight:700; 58 font-size:16px; 59 background:#b032da; 60 text-align:center; 61 color:#fff; 62 text-shadow:1px 1px 1px rgba(151,24,64,0.2); 63 } 64 #st-control-1,#st-control-1+a{ 65 left:0%; 66 } 67 #st-control-2,#st-control-2+a{ 68 left:20%; 69 } 70 #st-control-3,#st-control-3+a{ 71 left:40%; 72 } 73 #st-control-4,#st-control-4+a{ 74 left:60%; 75 } 76 #st-control-5,#st-control-5+a{ 77 left:80%; 78 } 79 .st-container input:checked+a, 80 .st-container input:checked:hover+a{ 81 background:#792c92;/*使当前选择的input后面的a显示深紫色，并且当鼠标移过的时候不会改变颜色*/ 82 } 83 .st-container input:checked+a:after{/*在当前选择的input后面的a下添加小三角形*/ 84 content:""; 85 width:0; 86 height:0; 87 overflow: hidden; 88 border:20px solid transparent; 89 border-bottom-color:#792c92; 90 position:absolute; 91 bottom:100%; 92 left:50%;/*居中*/ 93 margin-left:-20px; 94 } 95 .st-container input:hover + a{ 96 background:#cc69ed;/*底部达到hover变成淡紫红色的效果*/ 97 } 98 99 .st-scroll, 100 .st-panel{ 101 width:100%; 102 height:100%; 103 position: relative; 104 } 105 .st-scroll{ 106 left:0; 107 top:0; 108 -webkit-transform: translate3d(0,0,0); 109 -ms-transform: translate3d(0,0,0); 110 -o-transform: translate3d(0,0,0); 111 transform: translate3d(0,0,0); 112 -webkit-backface-visibility:hidden; 113 -webkit-transition: all 0.6s ease-in-out; 114 -o-transition: all 0.6s ease-in-out; 115 transition: all 0.6s ease-in-out; 116 } 117 .st-panel{ 118 background:#fff; 119 overflow: hidden; 120 } 121 #st-control-1:checked ~ .st-scroll{ 122 -webkit-transform: translateY(0%); 123 -ms-transform: translateY(0%); 124 -o-transform: translateY(0%); 125 transform: translateY(0%);/*火狐已经实现transform这个属性，所以没有前缀了*/ 126 } 127 #st-control-2:checked ~ .st-scroll{ 128 -webkit-transform: translateY(-100%); 129 -ms-transform: translateY(-100%); 130 -o-transform: translateY(-100%); 131 transform: translateY(-100%); 132 } 133 #st-control-3:checked ~ .st-scroll{ 134 -webkit-transform: translateY(-200%); 135 -ms-transform: translateY(-200%); 136 -o-transform: translateY(-200%); 137 transform: translateY(-200%); 138 } 139 #st-control-4:checked ~ .st-scroll{ 140 -webkit-transform: translateY(-300%); 141 -ms-transform: translateY(-300%); 142 -o-transform: translateY(-300%); 143 transform: translateY(-300%); 144 } 145 #st-control-5:checked ~ .st-scroll{ 146 -webkit-transform: translateY(-400%); 147 -ms-transform: translateY(-400%); 148 -o-transform: translateY(-400%); 149 transform: translateY(-400%); 150 } 151 .st-desc{ 152 width:200px; 153 height:200px; 154 background:#8c3da6; 155 position: absolute; 156 left:50%; 157 top:0; 158 margin-left:-100px; 159 -webkit-transform: translateY(-50%) rotate(45deg); 160 -ms-transform: translateY(-50%) rotate(45deg); 161 -o-transform: translateY(-50%) rotate(45deg); 162 transform: translateY(-50%) rotate(45deg); 163 } 164 [data-icon]:after{ 165 content:attr(data-icon); /*内容为data-icon属性的值*/ 166 width:200px; 167 height:200px; 168 color:#fff; 169 font-size:90px;/*字体图标的大小*/ 170 text-align: center; 171 line-height: 200px; 172 position: absolute; 173 left:50%; 174 top:50%; 175 margin:-100px 0 0 -100px; 176 -webkit-transform: rotate(-45deg) translateY(25%); 177 -ms-transform: rotate(-45deg) translateY(25%); 178 -o-transform: rotate(-45deg) translateY(25%); 179 transform: rotate(-45deg) translateY(25%); 180 181 font-family:"iconfont" !important; /*覆盖原来设置的字体*/ 182 font-size:50px; /*字体大小*/ 183 font-style:normal; 184 -webkit-font-smoothing: antialiased; /*字体平滑*/ 185 -webkit-text-stroke-width: 0.2px; 186 -moz-osx-font-smoothing: grayscale; 187 text-shadow:3px 3px 1px rgba(151,24,64,0.2); 188 } 189 .st-panel h2{ 190 color:#b032da; 191 font-size:54px; 192 line-height: 50px; 193 text-align: center; 194 font-weight: 900; 195 width:80%; /*宽度设置为100%,left0%也可以居中*/ 196 position: absolute; 197 left:10%; 198 top:50%; 199 margin-top:-70px; 200 text-shadow: 1px 1px 1px rgba(151,24,64,0.2); 201 -webkit-backface-visibility:hidden; /*?什么用*/ 202 } 203 #st-control-1:checked ~ .st-scroll #st-panel-1 h2, 204 #st-control-2:checked ~ .st-scroll #st-panel-2 h2, 205 #st-control-3:checked ~ .st-scroll #st-panel-3 h2, 206 #st-control-4:checked ~ .st-scroll #st-panel-4 h2, 207 #st-control-5:checked ~ .st-scroll #st-panel-5 h2{/*bakcwards表示动画默认开始执行，但是0.2S设置了延迟播放时间*/ 208 -webkit-animation:moveDown 0.6s ease-in-out 0.2s backwards; 209 -moz-animation:moveDown 0.6s ease-in-out 0.2s backwards; 210 -ms-animation:moveDown 0.6s ease-in-out 0.2s backwards; 211 -o-animation:moveDown 0.6s ease-in-out 0.2s backwards; 212 animation:moveDown 0.6s ease-in-out 0.2s backwards; 213 } 214 @-webkit-keyframes moveDown{ /*关键帧*/ 215 0%{ 216 -webkit-transform:translateY(-40px); 217 transform: translateY(-40px); 218 opacity:0; 219 } 220 100%{ 221 -webkit-transform:translateY(0px); 222 transform:translateY(0px); 223 opacity:1; 224 } 225 } 226 @-moz-keyframes moveDown{ /*关键帧*/ 227 0%{ 228 -moz-transform:translateY(-40px); 229 transform: translateY(-40px); 230 opacity:0; 231 } 232 100%{ 233 -moz-transform:translateY(0px); 234 transform:translateY(0px); 235 opacity:1; 236 } 237 } 238 @-ms-keyframes moveDown{ /*关键帧*/ 239 0%{ 240 -ms-transform:translateY(-40px); 241 transform:translateY(-40px); 242 opacity:0; 243 } 244 100%{ 245 -ms-transform:translateY(0px); 246 transform:translateY(0px); 247 opacity:1; 248 } 249 } 250 @-o-keyframes moveDown{ /*关键帧*/ 251 0%{ 252 -o-transform:translateY(-40px); 253 transform:translateY(-40px); 254 opacity:0; 255 } 256 100%{ 257 -o-transform:translateY(0px); 258 transform:translateY(0px); 259 opacity:1; 260 } 261 } 262 @keyframes moveDown{ /*关键帧*/ 263 0%{ 264 transform:translateY(-40px); 265 opacity:0; 266 } 267 100%{ 268 transform:translateY(0px); 269 opacity:1; 270 } 271 } 272 .st-panel p{ 273 position: absolute; 274 width:50%; 275 left:25%; 276 top:50%; 277 font-size:16px; 278 line-height: 22px; 279 padding:0; 280 text-align: center; 281 backface-visibility:hidden; 282 color:#8b8b8b; 283 margin-top:10px; 284 } 285 #st-control-1:checked ~ .st-scroll #st-panel-1 p, 286 #st-control-2:checked ~ .st-scroll #st-panel-2 p, 287 #st-control-3:checked ~ .st-scroll #st-panel-3 p, 288 #st-control-4:checked ~ .st-scroll #st-panel-4 p, 289 #st-control-5:checked ~ .st-scroll #st-panel-5 p{/*bakcwards表示动画默认开始执行，但是0.2S设置了延迟播放时间*/ 290 -webkit-animation:moveUp 0.6s ease-in-out 0.2s backwards; 291 -moz-animation:moveUp 0.6s ease-in-out 0.2s backwards; 292 -ms-animation:moveUp 0.6s ease-in-out 0.2s backwards; 293 -o-animation:moveUp 0.6s ease-in-out 0.2s backwards; 294 animation:moveUp 0.6s ease-in-out 0.2s backwards; 295 } 296 @-webkit-keyframes moveUp{ 297 0%{ 298 -webkit-transform:translateY(40px); 299 transform:translateY(40px); 300 opacity:0; 301 } 302 100%{ 303 -webkit-transform:translateY(0px); 304 transform:translateY(0px); 305 opacity:1; 306 } 307 } 308 @-moz-keyframes moveUp{ 309 0%{ 310 -moz-transform:translateY(40px); 311 transform:translateY(40px); 312 opacity:0; 313 } 314 100%{ 315 -moz-transform:translateY(0px); 316 transform:translateY(0px); 317 opacity:1; 318 } 319 } 320 @-ms-keyframes moveUp{ 321 0%{ 322 -ms-transform:translateY(40px); 323 transform:translateY(40px); 324 opacity:0; 325 } 326 100%{ 327 -ms-transform:translateY(0px); 328 transform:translateY(0px); 329 opacity:1; 330 } 331 } 332 @-o-keyframes moveUp{ 333 0%{ 334 -o-transform:translateY(40px); 335 transform:translateY(40px); 336 opacity:0; 337 } 338 100%{ 339 -o-transform:translateY(0px); 340 transform:translateY(0px); 341 opacity:1; 342 } 343 } 344 @keyframes moveUp{ 345 0%{ 346 transform:translateY(40px); 347 opacity:0; 348 } 349 100%{ 350 transform:translateY(0px); 351 opacity:1; 352 } 353 } 354 .st-color{ 355 background:#CC69ED; 356 } 357 .st-color .st-desc{ 358 background:#fff; 359 } 360 .st-color [data-icon]:after{ 361 color:#CC69ED; 362 } 363 .st-color h2{ 364 color:#fff; 365 text-shadow:1px 1px 1px rgba(0,0,0,0.1); 366 } 367 .st-color p{ 368 color:rgba(255,255,255,0.8); 369 } 370 /*移动设备自适应*/ 371 @media screen and(max-width:520px){ 372 .st-panel h2{ 373 font-size:42px; 374 } 375 .st-panel p{ 376 width:90%; 377 left:10%; 378 margin-top:0; 379 } 380 .st-container > a{ 381 font-size:13px; 382 } 383 } 384 @media screen and(max-width:360px){ 385 .st-panel h2{ 386 font-size:42px; 387 } 388 .st-container > a{ 389 font-size:10px; 390 } 391 .st-desc{ 392 width:120px; 393 height:120px; 394 margin-left:-60px; 395 } 396 [data-icon]:after{ 397 font-size:60px; 398 -webkit-transform: rotate(-45deg) translateY(25%); 399 -ms-transform: rotate(-45deg) translateY(25%); 400 -o-transform: rotate(-45deg) translateY(25%); 401 transform: rotate(-45deg) translateY(25%); 402 } 403 404 }
