#212121
1.one-div { 2 position: relative; 3 width: 200px; 4 height: 200px; 5 background: repeating-radial-gradient(circle at 50%, rgba(10, 222, 61,.4), rgba(10, 222, 61,.4) 2px, #000 2px, #000 12px); 6 border-radius: 50%; 7 border: 1px dotted rgba(10, 222, 61,.4); 8 overflow: hidden; 9} 10 11.one-div::before { 12 position: absolute; 13 content: ""; 14 top: calc(100% - 25%); 15 left: 50%; 16 transform-origin: 5px 0; 17 transform: translate(-50%, -50%); 18 width: 10px; 19 height: 50%; 20 border-radius: 10px; 21 filter: blur(3px); 22 background-image: linear-gradient(to left, rgba(10, 222, 61, .3) 50% , rgb(10, 222, 61) 50%); 23 opacity: .7; 24 animation: radar-animation 2.5s infinite linear; 25} 26 27.one-div::after { 28 content: ""; 29 position: absolute; 30 bottom: 24%; 31 left: 50%; 32 transform: translate(-50%, -50%); 33 width: 6px; 34 height: 6px; 35 border-radius: 3px; 36 background-color: rgba(10, 222, 61,1); 37 animation: dot-animation 2.5s infinite ease-in-out; 38} 39 40@keyframes radar-animation { 41 0% { 42 transform: translate(-50%, -50%) rotate(0); 43 } 44 45 100% { 46 transform: translate(-50%, -50%) rotate(360deg); 47 } 48} 49 50@keyframes dot-animation { 51 50% { 52 opacity: 0; 53 transform: translate(-50%, -50%) scale(2); 54 } 55 56 100% { 57 opacity: 0; 58 transform: translate(-50%, -50%) scale(1); 59 } 60} 61
Comments
MIT License