Card by PINKYSEE
This card was created for Open-Source CSS Odyssey
#212121
1.card { 2 position: relative; 3 box-shadow: 0 0 10px #ae00ff, 0 0 25px #001eff, 0 0 50px #ae00ff; 4 background: linear-gradient(320.62deg, #21CFDC 0%, rgba(183, 53, 162, 0.522696) 47.73%, rgba(44, 70, 206, 0) 100%); 5 border-radius: 50px; 6 width: 300px; 7 height: 300px; 8 padding: 25px; 9} 10 11.content { 12 display: flex; 13 width: 100%; 14 height: 150px; 15 overflow: hidden; 16} 17 18.item { 19 position: relative; 20 min-height: 100%; 21 min-width: 100%; 22 overflow: hidden; 23 animation: infinite 9s createanim; 24 animation-delay: 0s; 25} 26 27.item--create { 28 overflow: hidden; 29 position: relative; 30} 31 32.item--post { 33 overflow: hidden; 34 position: relative; 35} 36 37.item--inspire { 38 overflow: hidden; 39 position: relative; 40} 41 42.item--create svg { 43 width: 128px; 44 height: 128px; 45 position: absolute; 46 left: 25%; 47} 48 49.item--post span { 50 position: absolute; 51 top: 80%; 52 left: 38%; 53 font-size: 24px; 54} 55 56.item--post svg { 57 width: 128px; 58 height: 128px; 59 position: absolute; 60 left: 25%; 61} 62 63.item--create span { 64 position: absolute; 65 top: 80%; 66 left: 32%; 67 font-size: 24px; 68} 69 70.item--inspire svg { 71 width: 128px; 72 height: 128px; 73 position: absolute; 74 left: 25%; 75} 76 77.item--inspire span { 78 position: absolute; 79 top: 80%; 80 left: 30%; 81 font-size: 24px; 82} 83 84.heading { 85 display: flex; 86 flex-direction: column; 87 text-align: center; 88 font-size: 20px; 89} 90 91.heading span { 92 font-size: 24px; 93 font-weight: 900; 94 letter-spacing: 20px; 95} 96 97button { 98 border: 1px solid white; 99 color: white; 100 background-color: #001eff00; 101 height: 50px; 102 width: 250px; 103 font-size: 20px; 104 border-radius: 50px; 105 position: absolute; 106 bottom: 15px; 107 transition: all 0.3s; 108 left: 25px; 109} 110 111button:hover { 112 width: 260px; 113 left: 20px; 114 bottom: 20px; 115} 116 117.content:hover .item { 118 animation-play-state: paused; 119} 120 121@keyframes createanim { 122 0% { 123 left: 70%; 124 } 125 126 100% { 127 left: -280%; 128 } 129}
426 views
426 views
MIT License