Card by Shoh2008
#212121
1.container { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5 height: 350px; 6 background: #444; 7 border-radius: 10px; 8} 9 10.card { 11 position: relative; 12 background: #333; 13 width: 250px; 14 height: 350px; 15 border-radius: 10px; 16 padding: 2rem; 17 color: #aaa; 18 box-shadow: 0 .25rem .25rem rgba(0,0,0,0.2), 19 0 0 1rem rgba(0,0,0,0.2); 20 overflow: hidden; 21} 22 23.card__image-container { 24 margin: -2rem -2rem 1rem -2rem; 25} 26 27.card__line { 28 opacity: 0; 29 animation: LineFadeIn .8s .8s forwards ease-in; 30} 31 32.card__image { 33 opacity: 0; 34 animation: ImageFadeIn .8s 1.4s forwards; 35} 36 37.card__title { 38 color: white; 39 margin-top: 35px; 40 margin-bottom: 10px; 41 font-weight: 800; 42 letter-spacing: 0.01em; 43} 44 45.card__content { 46 margin-top: -1rem; 47 opacity: 0; 48 animation: ContentFadeIn .8s 1.6s forwards; 49} 50 51.card__svg { 52 position: absolute; 53 left: 0; 54 top: 115px; 55} 56 57@keyframes LineFadeIn { 58 0% { 59 opacity: 0; 60 d: path("M 0 300 Q 0 300 0 300 Q 0 300 0 300 C 0 300 0 300 0 300 Q 0 300 0 300 "); 61 stroke: #fff; 62 } 63 64 50% { 65 opacity: 1; 66 d: path("M 0 300 Q 50 300 100 300 Q 250 300 350 300 C 350 300 500 300 650 300 Q 750 300 800 300"); 67 stroke: #888BFF; 68 } 69 70 100% { 71 opacity: 1; 72 d: path("M -2 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 802 400"); 73 stroke: #545581; 74 } 75} 76 77@keyframes ContentFadeIn { 78 0% { 79 transform: translateY(-1rem); 80 opacity: 0; 81 } 82 83 100% { 84 transform: translateY(0); 85 opacity: 1; 86 } 87} 88 89@keyframes ImageFadeIn { 90 0% { 91 transform: translate(-.5rem, -.5rem) scale(1.05); 92 opacity: 0; 93 filter: blur(2px); 94 } 95 96 50% { 97 opacity: 1; 98 filter: blur(2px); 99 } 100 101 100% { 102 transform: translateY(0) scale(1.0); 103 opacity: 1; 104 filter: blur(0); 105 } 106}
2.1K views
2.1K views
MIT License