Card by Spacious74
#e8e8e8
1.card { 2 width: 500px; 3 height: 120px; 4 background: #353535; 5 transform-style: preserve-3d; 6 transform: perspective(30rem) rotateX(30deg); 7 position: relative; 8 border-top-left-radius: 10px; 9 border-top-right-radius: 10px; 10} 11.card::before { 12 content: ""; 13 position: absolute; 14 top: 50%; 15 transform: translateY(-50%); 16 left: 0; 17 width: 100%; 18 height: 10px; 19 background: linear-gradient( 20 90deg, 21 #fff 0%, 22 #fff 70%, 23 #353535 70%, 24 #353535 100% 25 ); 26 background-size: 120px; 27 animation: animateRoad 0.5s linear infinite; 28} 29@keyframes animateRoad { 30 0% { 31 background-position: 0px; 32 } 33 100% { 34 background-position: -120px; 35 } 36} 37 38.card::after { 39 content: ""; 40 width: 100%; 41 height: 20px; 42 position: absolute; 43 bottom: -20px; 44 background-color: #272727; 45 transform-origin: top; 46 transform: perspective(30rem) rotateX(-30deg); 47 box-shadow: 0 10px 20px -2px #272727; 48 border-bottom-left-radius: 6px; 49 border-bottom-right-radius: 6px; 50} 51.shadow { 52 color: #fff; 53 padding: 10px; 54 letter-spacing: 1px; 55} 56
122 views
122 views
MIT License