运用CSS3实现加载时的动画效果1
1、首先设置一个div
<div>Loading</div>
2、随后在style中给div设置样式：
1 div{ 2 margin:100px auto; 3 font-size: 25px; 4 text-indent: -9999em; 5 width:1em; 6 height:1em; 7 position:relative; 8 border-radius:50%; 9 /*background:red; 用于定位*/ 10 content:""; 11 animation:mymove 1.1s infinite ease; 12 -webkit-animation:mymove 1.1s infinite ease; /* Safari and Chrome */ 13 14 }
3、设置自定义动画效果样式
1 @keyframes mymove 2 { 3 0%, 4 100%{box-shadow:0em -2.5em 0em 0em rgba(119,14,112,1), 5 1.8em -1.8em 0em 0em rgba(0,255,128,1), 6 2.5em 0em 0em 0em rgba(0,255,128,1), 7 1.8em 1.8em 0em 0em rgba(0,255,128,1), 8 0em 2.5em 0em 0em rgba(0,255,128,1), 9 -1.8em 1.8em 0em 0em rgba(0,255,128,1), 10 -2.5em 0em 0em 0em rgba(0,255,128,1), 11 -1.8em -1.8em 0em 0em rgba(0,255,128,1) 12 } 13 14 12.5%{box-shadow:0em -2.5em 0em 0em rgba(0,255,128,1), 15 1.8em -1.8em 0em 0em rgba(119,14,112,1), 16 2.5em 0em 0em 0em rgba(0,255,128,1), 17 1.8em 1.8em 0em 0em rgba(0,255,128,1), 18 0em 2.5em 0em 0em rgba(0,255,128,1), 19 -1.8em 1.8em 0em 0em rgba(0,255,128,1), 20 -2.5em 0em 0em 0em rgba(0,255,128,1), 21 -1.8em -1.8em 0em 0em rgba(0,255,128,1)} 22 23 25%{box-shadow:0em -2.5em 0em 0em rgba(0,255,128,1), 24 1.8em -1.8em 0em 0em rgba(0,255,128,1), 25 2.5em 0em 0em 0em rgba(119,14,112,1), 26 1.8em 1.8em 0em 0em rgba(0,255,128,1), 27 0em 2.5em 0em 0em rgba(0,255,128,1), 28 -1.8em 1.8em 0em 0em rgba(0,255,128,1), 29 -2.5em 0em 0em 0em rgba(0,255,128,1), 30 -1.8em -1.8em 0em 0em rgba(0,255,128,1)} 31 32 37.5%{box-shadow:0em -2.5em 0em 0em rgba(0,255,128,1), 33 1.8em -1.8em 0em 0em rgba(0,255,128,1), 34 2.5em 0em 0em 0em rgba(0,255,128,1), 35 1.8em 1.8em 0em 0em rgba(119,14,112,1), 36 0em 2.5em 0em 0em rgba(0,255,128,1), 37 -1.8em 1.8em 0em 0em rgba(0,255,128,1), 38 -2.5em 0em 0em 0em rgba(0,255,128,1), 39 -1.8em -1.8em 0em 0em rgba(0,255,128,1)} 40 41 50% {box-shadow:0em -2.5em 0em 0em rgba(0,255,128,1), 42 1.8em -1.8em 0em 0em rgba(0,255,128,1), 43 2.5em 0em 0em 0em rgba(0,255,128,1), 44 1.8em 1.8em 0em 0em rgba(0,255,128,1), 45 0em 2.5em 0em 0em rgba(119,14,112,1), 46 -1.8em 1.8em 0em 0em rgba(0,255,128,1), 47 -2.5em 0em 0em 0em rgba(0,255,128,1), 48 -1.8em -1.8em 0em 0em rgba(0,255,128,1)} 49 50 62.5%{box-shadow:0em -2.5em 0em 0em rgba(0,255,128,1), 51 1.8em -1.8em 0em 0em rgba(0,255,128,1), 52 2.5em 0em 0em 0em rgba(0,255,128,1), 53 1.8em 1.8em 0em 0em rgba(0,255,128,1), 54 0em 2.5em 0em 0em rgba(0,255,128,1), 55 -1.8em 1.8em 0em 0em rgba(119,14,112,1), 56 -2.5em 0em 0em 0em rgba(0,255,128,1), 57 -1.8em -1.8em 0em 0em rgba(0,255,128,1)} 58 59 75% {box-shadow:0em -2.5em 0em 0em rgba(0,255,128,1), 60 1.8em -1.8em 0em 0em rgba(0,255,128,1), 61 2.5em 0em 0em 0em rgba(0,255,128,1), 62 1.8em 1.8em 0em 0em rgba(0,255,128,1), 63 0em 2.5em 0em 0em rgba(0,255,128,1), 64 -1.8em 1.8em 0em 0em rgba(0,255,128,1), 65 -2.5em 0em 0em 0em rgba(119,14,112,1), 66 -1.8em -1.8em 0em 0em rgba(0,255,128,1)} 67 68 87.5%{box-shadow:0em -2.5em 0em 0em rgba(0,255,128,1), 69 1.8em -1.8em 0em 0em rgba(0,255,128,1), 70 2.5em 0em 0em 0em rgba(0,255,128,1), 71 1.8em 1.8em 0em 0em rgba(0,255,128,1), 72 0em 2.5em 0em 0em rgba(0,255,128,1), 73 -1.8em 1.8em 0em 0em rgba(0,255,128,1), 74 -2.5em 0em 0em 0em rgba(0,255,128,1), 75 -1.8em -1.8em 0em 0em rgba(119,14,112,1)} 76 77 }
4、兼容浏览器设置
1 @-webkit-keyframes mymove 2 { 3 0%, 4 100%{box-shadow:0em -2.5em 0em 0em rgba(119,14,112,1), 5 1.8em -1.8em 0em 0em rgba(0,255,128,1), 6 2.5em 0em 0em 0em rgba(0,255,128,1), 7 1.8em 1.8em 0em 0em rgba(0,255,128,1), 8 0em 2.5em 0em 0em rgba(0,255,128,1), 9 -1.8em 1.8em 0em 0em rgba(0,255,128,1), 10 -2.5em 0em 0em 0em rgba(0,255,128,1), 11 -1.8em -1.8em 0em 0em rgba(0,255,128,1) 12 } 13 14 12.5%{box-shadow:0em -2.5em 0em 0em rgba(0,255,128,1), 15 1.8em -1.8em 0em 0em rgba(119,14,112,1), 16 2.5em 0em 0em 0em rgba(0,255,128,1), 17 1.8em 1.8em 0em 0em rgba(0,255,128,1), 18 0em 2.5em 0em 0em rgba(0,255,128,1), 19 -1.8em 1.8em 0em 0em rgba(0,255,128,1), 20 -2.5em 0em 0em 0em rgba(0,255,128,1), 21 -1.8em -1.8em 0em 0em rgba(0,255,128,1)} 22 23 25%{box-shadow:0em -2.5em 0em 0em rgba(0,255,128,1), 24 1.8em -1.8em 0em 0em rgba(0,255,128,1), 25 2.5em 0em 0em 0em rgba(119,14,112,1), 26 1.8em 1.8em 0em 0em rgba(0,255,128,1), 27 0em 2.5em 0em 0em rgba(0,255,128,1), 28 -1.8em 1.8em 0em 0em rgba(0,255,128,1), 29 -2.5em 0em 0em 0em rgba(0,255,128,1), 30 -1.8em -1.8em 0em 0em rgba(0,255,128,1)} 31 32 37.5%{box-shadow:0em -2.5em 0em 0em rgba(0,255,128,1), 33 1.8em -1.8em 0em 0em rgba(0,255,128,1), 34 2.5em 0em 0em 0em rgba(0,255,128,1), 35 1.8em 1.8em 0em 0em rgba(119,14,112,1), 36 0em 2.5em 0em 0em rgba(0,255,128,1), 37 -1.8em 1.8em 0em 0em rgba(0,255,128,1), 38 -2.5em 0em 0em 0em rgba(0,255,128,1), 39 -1.8em -1.8em 0em 0em rgba(0,255,128,1)} 40 41 50% {box-shadow:0em -2.5em 0em 0em rgba(0,255,128,1), 42 1.8em -1.8em 0em 0em rgba(0,255,128,1), 43 2.5em 0em 0em 0em rgba(0,255,128,1), 44 1.8em 1.8em 0em 0em rgba(0,255,128,1), 45 0em 2.5em 0em 0em rgba(119,14,112,1), 46 -1.8em 1.8em 0em 0em rgba(0,255,128,1), 47 -2.5em 0em 0em 0em rgba(0,255,128,1), 48 -1.8em -1.8em 0em 0em rgba(0,255,128,1)} 49 50 62.5%{box-shadow:0em -2.5em 0em 0em rgba(0,255,128,1), 51 1.8em -1.8em 0em 0em rgba(0,255,128,1), 52 2.5em 0em 0em 0em rgba(0,255,128,1), 53 1.8em 1.8em 0em 0em rgba(0,255,128,1), 54 0em 2.5em 0em 0em rgba(0,255,128,1), 55 -1.8em 1.8em 0em 0em rgba(119,14,112,1), 56 -2.5em 0em 0em 0em rgba(0,255,128,1), 57 -1.8em -1.8em 0em 0em rgba(0,255,128,1)} 58 59 75% {box-shadow:0em -2.5em 0em 0em rgba(0,255,128,1), 60 1.8em -1.8em 0em 0em rgba(0,255,128,1), 61 2.5em 0em 0em 0em rgba(0,255,128,1), 62 1.8em 1.8em 0em 0em rgba(0,255,128,1), 63 0em 2.5em 0em 0em rgba(0,255,128,1), 64 -1.8em 1.8em 0em 0em rgba(0,255,128,1), 65 -2.5em 0em 0em 0em rgba(119,14,112,1), 66 -1.8em -1.8em 0em 0em rgba(0,255,128,1)} 67 68 87.5%{box-shadow:0em -2.5em 0em 0em rgba(0,255,128,1), 69 1.8em -1.8em 0em 0em rgba(0,255,128,1), 70 2.5em 0em 0em 0em rgba(0,255,128,1), 71 1.8em 1.8em 0em 0em rgba(0,255,128,1), 72 0em 2.5em 0em 0em rgba(0,255,128,1), 73 -1.8em 1.8em 0em 0em rgba(0,255,128,1), 74 -2.5em 0em 0em 0em rgba(0,255,128,1), 75 -1.8em -1.8em 0em 0em rgba(119,14,112,1)} 76 77 }
浙公网安备 33010602011771号