Card by MRez321
This card was created for One <div> challenge
#212121
1.one-div { 2 background-color: #322e2e; 3 width: 20rem; 4 height: 15rem; 5 position: relative; 6 border: solid 1.2rem #dacfcf; 7 border-radius: 50% 50% 44% 44% / 55% 55% 40% 40%; 8} 9 10.one-div::before, 11.one-div::after { 12 content: ''; 13 width: 6rem; 14 height: 6rem; 15 position: absolute; 16 top: 35%; 17 background-image: repeating-linear-gradient(0deg, #474bff, #474bff 3.5px, transparent 3.5px, transparent); 18 background-size: .4rem .4rem; 19 background-color: #31abd1; 20 border: solid 2px #00adcc; 21 filter: drop-shadow(0 1px 6px #04d9ff); 22} 23 24.one-div::before { 25 left: 1.4rem; 26 border-radius: 25% 75% 25% 75% / 25% 75% 25% 75%; 27} 28 29.one-div::after { 30 right: 1.4rem; 31 border-radius: 75% 25% 75% 25% / 75% 25% 75% 25%; 32} 33 34.one-div:hover { 35 animation: float 2s infinite; 36} 37 38.one-div:hover::before, 39.one-div:hover::after { 40 animation: blink 2.5s infinite; 41} 42 43@keyframes float { 44 0% { 45 bottom: 0; 46 } 47 48 50% { 49 bottom: -.4rem; 50 } 51 52 100% { 53 bottom: 0; 54 } 55} 56 57@keyframes blink { 58 90% { 59 transform: none; 60 animation-timing-function: ease-in; 61 } 62 63 93% { 64 transform: translateY(15px) scaleY(0) 65 } 66 67 100% { 68 animation-timing-function: ease-out; 69 } 70}
587 views
587 views
MIT License