Card by santhoshsj-dev
This card was created for One <div> challenge
#212121
1.one-div { 2 width: 300px; 3 height: 200px; 4 display: grid; 5 position: relative; 6 margin: auto 0 0; 7 background: radial-gradient(circle 44px at top,#0000 94%,#5dc1e4) 0 40px, radial-gradient(circle 44px at top,#0000 94%,#008cd9) 0 0; 8 background-size: 80px 100%; 9 background-repeat: repeat-x; 10 animation: a 1s infinite linear; 11 border-radius: 20px; 12 transition: height 1s; 13 cursor: pointer; 14} 15 16.one-div:hover { 17 height: 350px; 18} 19 20.one-div:before { 21 content: ""; 22 width: 100%; 23 z-index: 1; 24 background: radial-gradient(circle 44px at top,#0000 94%,#b0e5f3) 0 70px; 25 background-size: 80px 100%; 26 background-repeat: repeat-x; 27 animation: b 1s infinite linear; 28 border-radius: 20px; 29} 30 31.one-div:after { 32 content: ""; 33 position: absolute; 34 width: 70px; 35 height: 150px; 36 background: linear-gradient(#f0caa3 0 0) bottom/16% 67%, linear-gradient(#33b54d 0 0) 50% 50%/54% 12%, radial-gradient(farthest-side at bottom left,#33b54d 98%,#0000) 100% 48%/25% 12%, radial-gradient(farthest-side at bottom right,#33b54d 98%,#0000) 0 48%/25% 12%, radial-gradient(farthest-side at top left,#0000 98%,#33b54d) 16% 30%/31% 20%, radial-gradient(farthest-side at top right,#0000 98%,#33b54d) 87% 30%/31% 20%, linear-gradient(#a87d53 0 0) top/20% 8%,linear-gradient(#33b54d 0 0)50% 7%/37% 8%, linear-gradient(#33b54d 0 0) bottom/100% 50%, linear-gradient(#33b54d 0 0) center/20% 100%; 37 background-repeat: no-repeat; 38 border-radius: 0 0 20px 20px; 39 left: calc(50% - 35px); 40 top: 0px; 41 transform: rotate(45deg); 42 animation: c 1s infinite linear; 43} 44 45@keyframes a { 46 50% { 47 background-position: -40px 15px,45px 10px 48 } 49 50 100% { 51 background-position: -80px 40px,80px 0px 52 } 53} 54 55@keyframes b { 56 50% { 57 background-position: 40px 45px 58 } 59 60 100% { 61 background-position: 80px 70px 62 } 63} 64 65@keyframes c { 66 0%,100% { 67 transform: translate(0,0) rotate(40deg) 68 } 69 70 33% { 71 transform: translate(10px,-20px) rotate(50deg) 72 } 73 74 66% { 75 transform: translate(5px,-10px) rotate(30deg) 76 } 77} 78
1.4K views
1.4K views
MIT License