This post is saved as a draft.
#212121
1.face { 2 position: relative; 3 width: 300px; 4 height: 350px; 5 background-color: #6C757D; 6 background: linear-gradient(180deg,#452824 184px,#f2bbad 34px); 7 /* transform: translateX(0px); */ 8 border-top-right-radius: 250px 350px; 9 border-top-left-radius: 250px 350px; 10 border-bottom-left-radius: 250px 250px; 11 border-bottom-right-radius: 250px 250px; 12 border: 5px solid black; 13} 14 15.hairs { 16 height: 180px; 17 background-color: #f2bbad; 18 position: absolute; 19 width: 290px; 20 border-top-right-radius: 250px 350px; 21 border-top-left-radius: 250px 350px; 22 top: 25px; 23} 24 25.snow { 26 transform: translateX(150px); 27 transform-origin: right; 28} 29 30.mountain-cap-1, .mountain-cap-2, .mountain-cap-3,.mountain-cap-4 { 31 position: absolute; 32 top: 20px; 33 border-left: 20px solid transparent; 34 border-right: 20px solid transparent; 35 border-top: 40px solid #452824; 36} 37 38.mountain-cap-1 { 39 left: -65px; 40} 41 42.mountain-cap-2 { 43 left: -35px; 44} 45 46.mountain-cap-3 { 47 left: -5px; 48} 49 50.mountain-cap-4 { 51 left: 25px; 52} 53 54.earL { 55 border-top-right-radius: 250px 350px; 56 border-top-left-radius: 250px 350px; 57 border-bottom-left-radius: 250px 250px; 58 border-bottom-right-radius: 250px 250px; 59 height: 70px; 60 width: 50px; 61 background-color: #f2bbad; 62 position: absolute; 63 left: -30px; 64 top: 150px; 65 z-index: -1; 66 border: 5px solid black; 67} 68 69.earR { 70 border-top-right-radius: 250px 350px; 71 border-top-left-radius: 250px 350px; 72 border-bottom-left-radius: 250px 250px; 73 border-bottom-right-radius: 250px 250px; 74 height: 70px; 75 width: 50px; 76 background-color: #f2bbad; 77 position: absolute; 78 right: -30px; 79 top: 150px; 80 z-index: -4; 81 border: 5px solid black; 82} 83 84.eyeR { 85 border-top-right-radius: 250px 350px; 86 border-top-left-radius: 250px 350px; 87 border-bottom-left-radius: 250px 250px; 88 border-bottom-right-radius: 250px 250px; 89 height: 10px; 90 width: 10px; 91 background-color: black; 92 position: absolute; 93 left: 128px; 94 top: 120px; 95 z-index: 2; 96 animation: blinkR 5s infinite linear; 97} 98 99.eyeL { 100 border-top-right-radius: 250px 350px; 101 border-top-left-radius: 250px 350px; 102 border-bottom-left-radius: 250px 250px; 103 border-bottom-right-radius: 250px 250px; 104 height: 10px; 105 width: 10px; 106 background-color: black; 107 position: absolute; 108 right: 128px; 109 top: 120px; 110 z-index: 2; 111 animation: blinkL 5s infinite linear; 112} 113 114.nose { 115 background: #fefefe; 116 width: 20px; 117 height: 20px; 118 border-radius: 50%; 119 color: #0F0; 120 position: absolute; 121 top: 220px; 122 left: 140px; 123 scale: 1 1; 124 transition: all ease-in-out .3s; 125 z-index: 100; 126} 127 128.nose:hover { 129 scale: 1 1.25; 130 top: 236px; 131} 132 133.nose:active { 134 animation: propeller .5s infinite linear; 135 transform-origin: 50% -55px; 136 scale: 1 1.25; 137 top: 220px; 138 animation-delay: .5s; 139} 140 141@keyframes propeller { 142 to { 143 transform: rotateZ(360deg); 144 } 145} 146 147@keyframes blinkL { 148 98% { 149 height: 10px; 150 width: 10px; 151 right: 128px; 152 top: 120px; 153 } 154 155 100% { 156 height: 3px; 157 width: 11px; 158 right: 126px; 159 top: 123px; 160 } 161} 162 163@keyframes blinkR { 164 98% { 165 height: 10px; 166 width: 10px; 167 left: 128px; 168 top: 120px; 169 } 170 171 100% { 172 height: 3px; 173 width: 11px; 174 left: 126px; 175 top: 123px; 176 } 177} 178 179.nose:before { 180 content: ""; 181 position: absolute; 182 top: -64px; 183 left: 50%; 184 border: 10px solid transparent; 185 border-bottom: 62px solid #fefefe; 186 transform: translateX(-50%); 187} 188 189.mouth { 190 position: absolute; 191 top: 300px; 192 left: 140px; 193 background: #a36655; 194 width: 25px; 195 height: 18px; 196 border: 5px solid black; 197 border-radius: 50%; 198 transition: all .3s linear; 199} 200 201.face:active .mouth { 202 top: 290px; 203 width: 60px; 204 height: 25px; 205 left: 123px; 206 border-radius: 7px 7px 130px 130px; 207} 208 209.face:active .smileL { 210 height: 30px; 211 width: 30px; 212} 213 214.face:active .smileR { 215 height: 30px; 216 width: 30px; 217} 218 219.bo { 220 z-index: 10; 221 zoom: 0.8; 222} 223 224.smileL { 225 position: absolute; 226 height: 0px; 227 width: 0px; 228 rotate: 310deg; 229 top: 180px; 230 left: 70px; 231 transition: all .1s linear; 232} 233 234.smileR { 235 position: absolute; 236 height: 0px; 237 width: 0px; 238 rotate: 310deg; 239 top: 180px; 240 right: 70px; 241 transition: all .1s linear; 242} 243 244
Variation of acard
Variation of acard