（bM1）
（bM）
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 div{ 10 100px; 11 height:100px; 12 margin:auto; 13 position:relative; 14 } 15 div span{ 16 5px; 17 height:5px; 18 background-color:aqua; 19 animation:bM 1s infinite linear both; 20 display:inline-block; 21 position:absolute; 22 /*border-radius:50%;*//*变为圆形*/ 23 bottom:0; 24 } 25 @keyframes bM{ 26 0% {opacity: 0.3; -webkit-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);} 27 50% {opacity: 1; -webkit-transform: translateY(-10px); background:#f1c40f; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);} 28 100% {opacity: 0.3; -webkit-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);} 29 } 30 @keyframes bM1{ 31 0% {height:5px;-webkit-transform:translateY(0px);background:#9b59b6;} 32 25% {height:30px;-webkit-transform:translateY(15px);background:#3498db;} 33 50% {height:5px;-webkit-transform:translateY(0px);background:#9b59b6;} 34 100% {height:5px;-webkit-transform:translateY(0px);background:#9b59b6;} 35 } 36 div span:nth-of-type(2){ 37 left:11px; 38 animation-delay:.2s;/*推迟显示*/ 39 -webkit-animation-delay:.2s; 40 -o-animation-delay:.2s; 41 -moz-animation-delay:2s; 42 } 43 div span:nth-of-type(3){ 44 left:22px; 45 animation-delay:.4s; 46 -webkit-animation-delay:.4s; 47 -o-animation-delay:.4s; 48 -moz-animation-delay:4s; 49 } 50 div span:nth-of-type(4){ 51 left:33px; 52 animation-delay:.6s; 53 -webkit-animation-delay:.6s; 54 -o-animation-delay:.6s; 55 -moz-animation-delay:.6s; 56 } 57 div span:nth-of-type(5){ 58 left:44px; 59 animation-delay:.8s; 60 -webkit-animation-delay:.8s; 61 -o-animation-delay:.8s; 62 -moz-animation-delay:.8s; 63 } 64 </style> 65 </head> 66 <body> 67 <div> 68 <span></span> 69 <span></span> 70 <span></span> 71 <span></span> 72 <span></span> 73 </div> 74 </body> 75 </html>
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 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 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 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>