Card by Javierrocadev
#212121
1.container { 2 width: 280px; 3 height: 280px; 4 background-color: #151716; 5 border-radius: 20px; 6 display: flex; 7 align-items: center; 8 justify-content: center; 9 filter: hue-rotate(10deg); 10} 11 12.card { 13 width: 200px; 14 height: 200px; 15 background: #000000; 16 border-radius: 50%; 17 position: relative; 18 display: flex; 19 align-items: center; 20 justify-content: center; 21 border: 2px solid #18D322; 22 overflow: hidden; 23} 24 25.card::after { 26 content: ""; 27 position: absolute; 28 width: 2px; 29 height: 200px; 30 left: 49%; 31 background-color: #18D322; 32 animation: rotate 3s linear infinite; 33 z-index: 6; 34} 35 36.card::before { 37 content: ""; 38 position: absolute; 39 width: 0px; 40 height: 200px; 41 left: 49%; 42 transform: rotate(-4deg); 43 background-color: #18D322; 44 animation: rotate 3s linear infinite; 45 box-shadow: 0 0 10px 10px #2fbb39; 46 z-index: 6; 47} 48 49.circle { 50 width: 100px; 51 height: 100px; 52 border: 2px solid #18D322; 53 border-radius: 50%; 54} 55 56.circle::before { 57 content: ""; 58 position: absolute; 59 width: 50px; 60 height: 50px; 61 left: 50%; 62 top: 50%; 63 transform: translate(-50%,-50%); 64 border: 2px solid #18D322; 65 border-radius: 50%; 66} 67 68.circle::after { 69 content: ""; 70 position: absolute; 71 width: 150px; 72 height: 150px; 73 left: 50%; 74 top: 50%; 75 transform: translate(-50%,-50%); 76 border: 2px solid #18D322; 77 border-radius: 50%; 78} 79 80.dot { 81 width: 4px; 82 height: 4px; 83 top: 30%; 84 background-color: #18D322; 85 border-radius: 50%; 86 position: absolute; 87 animation: doted 1.5s ease infinite; 88} 89 90.dot2 { 91 width: 4px; 92 height: 4px; 93 top: 80%; 94 right: 30%; 95 background-color: #18D322; 96 border-radius: 50%; 97 position: absolute; 98 animation: doted 1.5s 1.2s ease infinite; 99} 100 101@keyframes rotate { 102 0% { 103 transform: rotate(0deg); 104 } 105 106 100% { 107 transform: rotate(360deg); 108 } 109} 110 111@keyframes doted { 112 0% { 113 transform: scale(0.95); 114 box-shadow: 0 0 10px 5px rgba(24, 211, 33, 0.3),0 0 10px 10px rgba(24, 211, 33, 0.3); 115 } 116 117 60% { 118 transform: scale(0.95); 119 box-shadow: 0 0 10px 5px rgba(24, 211, 33, 0.3),0 0 10px 10px rgba(24, 211, 33, 0.3); 120 } 121 122 100% { 123 transform: scale(1); 124 box-shadow: 0 0 0 0 rgba(24, 211, 33, 0.7),0 0 0 0 rgba(24, 211, 33, 0.5),0 0 0 0 rgba(24, 211, 33, 0.3); 125 opacity: 0; 126 } 127}
440 views
Variation of acard
MIT License