Card by escannord
#212121
1.container { 2 width: 280px; 3 height: 380px; 4 background-color: #151716; 5 border-radius: 20px; 6 display: flex; 7 flex-direction: column; 8 align-items: center; 9 justify-content: flex-start; 10 filter: hue-rotate(10deg); 11 color: #2fbb39; 12 gap: 20px; 13} 14 15.data { 16 margin-top: 25px; 17 border: 2px solid; 18 padding: 15px; 19 border-radius: 5px; 20 background: #000000; 21} 22 23.data::after { 24 background: #000000; 25 content: "WIND - 54,3"; 26 position: absolute; 27 bottom: 5%; 28 right: 5%; 29 border: 2px solid; 30 padding: 3px; 31 border-radius: 5px; 32 font-size: 0.7em; 33} 34 35.data::before { 36 content: "DEPT - 600"; 37 position: absolute; 38 bottom: 5%; 39 left: 5%; 40 border: 2px solid; 41 padding: 3px; 42 border-radius: 5px; 43 font-size: 0.7em; 44 background: #000000; 45} 46 47.card { 48 width: 200px; 49 height: 200px; 50 background: #000000; 51 border-radius: 50%; 52 position: relative; 53 display: flex; 54 align-items: center; 55 justify-content: center; 56 border: 2px solid #18d322; 57 overflow: hidden; 58} 59 60.card::after { 61 content: ""; 62 position: absolute; 63 width: 2px; 64 height: 200px; 65 left: 50%; 66 top: 50%; 67 background-color: #18d322; 68 animation: rotate 3s linear infinite; 69 z-index: 6; 70 transform-origin: 0 0; 71} 72 73.card::before { 74 content: ""; 75 position: absolute; 76 width: 0px; 77 height: 200px; 78 left: 50%; 79 top: 50%; 80 transform: rotate(-4deg); 81 background-color: #18d322; 82 animation: rotate 3s linear infinite; 83 box-shadow: 0 0 10px 10px #2fbb39, 0 0 70px 10px #2fbb39; 84 z-index: 6; 85 transform-origin: 0 0; 86} 87 88.circle { 89 width: 100px; 90 height: 100px; 91 border: 2px solid #18d322; 92 border-radius: 50%; 93} 94 95.circle::before { 96 content: ""; 97 position: absolute; 98 width: 50px; 99 height: 50px; 100 left: 50%; 101 top: 50%; 102 transform: translate(-50%, -50%); 103 border: 2px solid #18d322; 104 border-radius: 50%; 105} 106 107.circle::after { 108 content: ""; 109 position: absolute; 110 width: 150px; 111 height: 150px; 112 left: 50%; 113 top: 50%; 114 transform: translate(-50%, -50%); 115 border: 2px solid #18d322; 116 border-radius: 50%; 117} 118 119.dot { 120 width: 4px; 121 height: 4px; 122 top: 30%; 123 background-color: #18d322; 124 border-radius: 50%; 125 position: absolute; 126 animation: doted 1.5s ease infinite; 127} 128 129.dot2 { 130 width: 4px; 131 height: 4px; 132 top: 80%; 133 right: 30%; 134 background-color: #18d322; 135 border-radius: 50%; 136 position: absolute; 137 animation: doted 1.5s 1.2s ease infinite; 138} 139 140@keyframes rotate { 141 0% { 142 transform: rotate(0deg); 143 } 144 145 100% { 146 transform: rotate(360deg); 147 } 148} 149 150@keyframes doted { 151 0% { 152 transform: scale(0.95); 153 box-shadow: 0 0 10px 5px rgba(24, 211, 33, 0.3), 154 0 0 10px 10px rgba(24, 211, 33, 0.3); 155 } 156 157 60% { 158 transform: scale(0.95); 159 box-shadow: 0 0 10px 5px rgba(24, 211, 33, 0.3), 160 0 0 10px 10px rgba(24, 211, 33, 0.3); 161 } 162 163 100% { 164 transform: scale(1); 165 box-shadow: 0 0 0 0 rgba(24, 211, 33, 0.7), 0 0 0 0 rgba(24, 211, 33, 0.5), 166 0 0 0 0 rgba(24, 211, 33, 0.3); 167 opacity: 0; 168 } 169} 170
398 views
Variation of acard
MIT License