Card by Lakshay-art
This card was created for One <div> challenge
#212121
1.one-div { 2 height: 200px; 3 width: 200px; 4 background-image: radial-gradient(circle, black 25%,rgb(69, 11, 11) 45%, red 46%, black , red); 5 background-position: center; 6 background-repeat: no-repeat; 7 position: relative; 8 border-radius: 50%; 9} 10 11.one-div::before { 12 content: ''; 13 height: 60px; 14 width: 420px; 15 bottom: -20px; 16 left: -100px; 17 position: absolute; 18 z-index: -10; 19 transition: all 1s linear; 20 transform-origin: 50% 0%; 21 isolation: isolate; 22 background-image: linear-gradient(180deg,rgb(255, 179, 0) 20%,rgb(244, 205, 205),rgb(255, 179, 0) 30%,rgb(5, 56, 99) 90%); 23 border-radius: 30px 30px 70% 70%; 24} 25 26.one-div::after { 27 content: ''; 28 position: absolute; 29 height: 280px; 30 width: 30px; 31 border-radius: 50%; 32 top: -30px; 33 left: 85px; 34 background-image: linear-gradient(0deg,rgb(255, 179, 0), #777 25px,#eee, #777 calc(100% - 25px) , rgb(255, 179, 0)); 35 animation: propeller 1.5s infinite linear; 36 z-index: 1; 37} 38 39.one-div:hover::after { 40 animation: propeller .35s infinite linear; 41} 42 43.one-div:hover::before { 44 /* animation: propeller 1.5s infinite linear; */ 45 transform: rotate(20deg); 46 left: -110px; 47} 48 49@keyframes propeller { 50 to { 51 transform: rotateZ(360deg); 52 } 53} 54 55@keyframes rev-propeller { 56 to { 57 transform: rotateZ(-360deg); 58 } 59}
782 views
782 views
MIT License