372 views
1.frame { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 margin-top: -200px; 6 margin-left: -200px; 7} 8 9.center { 10 position: absolute; 11 width: 220px; 12 height: 220px; 13 top: 90px; 14 left: 90px; 15} 16 17.dot-1 { 18 position: absolute; 19 z-index: 3; 20 width: 30px; 21 height: 30px; 22 top: 95px; 23 left: 95px; 24 background: #fff; 25 border-radius: 50%; 26 -webkit-animation-fill-mode: both; 27 animation-fill-mode: both; 28 -webkit-animation: jump-jump-1 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate; 29 animation: jump-jump-1 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate; 30} 31 32.dot-2 { 33 position: absolute; 34 z-index: 2; 35 width: 60px; 36 height: 60px; 37 top: 80px; 38 left: 80px; 39 background: #fff; 40 border-radius: 50%; 41 -webkit-animation-fill-mode: both; 42 animation-fill-mode: both; 43 -webkit-animation: jump-jump-2 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate; 44 animation: jump-jump-2 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate; 45} 46 47.dot-3 { 48 position: absolute; 49 z-index: 1; 50 width: 90px; 51 height: 90px; 52 top: 65px; 53 left: 65px; 54 background: #fff; 55 border-radius: 50%; 56 -webkit-animation-fill-mode: both; 57 animation-fill-mode: both; 58 -webkit-animation: jump-jump-3 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate; 59 animation: jump-jump-3 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate; 60} 61 62@keyframes jump-jump-1 { 63 0%, 70% { 64 box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2); 65 -webkit-transform: scale(0); 66 transform: scale(0); 67 } 68 69 100% { 70 box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3); 71 -webkit-transform: scale(1); 72 transform: scale(1); 73 } 74} 75 76@keyframes jump-jump-2 { 77 0%, 40% { 78 box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2); 79 -webkit-transform: scale(0); 80 transform: scale(0); 81 } 82 83 100% { 84 box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3); 85 -webkit-transform: scale(1); 86 transform: scale(1); 87 } 88} 89 90@keyframes jump-jump-3 { 91 0%, 10% { 92 box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2); 93 -webkit-transform: scale(0); 94 transform: scale(0); 95 } 96 97 100% { 98 box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3); 99 -webkit-transform: scale(1); 100 transform: scale(1); 101 } 102} 103
JkHuger
JkHuger
MIT License