标签：infinite charset 20px 设置 image com 选择 doctype href
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <meta charset="utf-8" /> 7 <link rel="stylesheet" href="style/style.css"> 8 <style> 9 .loader.is-active { 10 background-color: rgba(0,0,0,0.85); 11 width: 100%; 12 height: 100%; 13 left: 0; 14 top: 0; 15 } 16 .loader-ball[shadow]:before { /*css的属性选择器，设置inset向内的阴影*/ 17 box-shadow: -5px -5px 10px 0 rgba(0,0,0,0.5) inset; 18 } 19 .loader-ball:before { 20 content: ‘‘; 21 position: absolute; 22 width: 50px; 23 height: 50px; 24 top: 50%; 25 left: 50%; 26 margin: -25px 0 0 -25px; 27 background:linear-gradient(#f70606,rgb(187, 152, 60));/*设置一个从上到下的渐变*/ 28 border-radius: 50%; 29 z-index: 1; 30 animation: kick 1s infinite alternate ease-in both; /*infinite无限次播放，alternate基数正播偶数反播，*/ 31 } 32 .loader-ball:after { 33 content: ‘‘; 34 position: absolute; 35 background-color: rgba(0,0,0,0.3); 36 border-radius: 50%; 37 width: 45px; 38 height: 20px; 39 top: calc(50% + 10px);/*calc用于计算*/ 40 left: 50%; 41 margin: 0 0 0 -22.5px; 42 z-index: 0; 43 animation: shadow 1s infinite alternate ease-out both; 44 } 45 @keyframes shadow { 46 0% { 47 background-color: transparent; 48 transform: scale(0); 49 } 50 51 40% { 52 background-color: transparent; 53 transform: scale(0); 54 } 55 56 95% { 57 background-color: rgba(0,0,0,0.75); 58 transform: scale(1); 59 } 60 61 100% { 62 background-color: rgba(0,0,0,0.75); 63 transform: scale(1); 64 } 65 } 66 67 @keyframes kick { 68 0% { 69 transform: translateY(-80px) scaleX(0.95); 70 } 71 72 90% { 73 border-radius: 50%; 74 } 75 76 100% { 77 transform: translateY(0) scaleX(1); 78 border-radius: 50% 50% 40% 40%; 79 } 80 } 81 </style> 82 </head> 83 <body> 84 <div id="loader" class="loader loader-ball is-active" shadow></div> 85 </body> 86 </html>
标签：infinite charset 20px 设置 image com 选择 doctype href
原文地址：http://www.cnblogs.com/sunnie-cc/p/6053708.html
