Card by omar-alghaish
#212121
1.card { 2 width: 200px; 3 height: 270px; 4 background: linear-gradient(45deg,#00cc0a 25%, #00cc0a 25%, #444 25%, #444 50%, #00cc0a 50%, #00cc0a 75%, #444 75%, #444 100%); 5 animation: animate_6810 15s linear infinite; 6 transition: .3s; 7 background-size: 60px 60px; 8 position: relative; 9 overflow: visible; 10 border-radius: 20px; 11} 12 13.card-info { 14 position: absolute; 15 width: 96%; 16 height: 96%; 17 left: 2%; 18 top: 2%; 19 background-color: rgb(24, 22, 22); 20 border-radius: 20px; 21 transition: .3s; 22 display: flex; 23 align-items: center; 24 justify-content: center; 25} 26 27.card-info:hover { 28 width: 100%; 29 height: 100%; 30 background-color: rgba(0, 0, 0, 0.822); 31 backdrop-filter: blur(12px); 32 left: 20px; 33 top: 20px; 34} 35 36.card-info p { 37 color: white; 38 font-weight: bold; 39 font-size: 30px; 40} 41 42@keyframes animate_6810 { 43 0% { 44 background-position: 0px; 45 } 46 47 100% { 48 background-position: 1000px; 49 } 50}
1.6K views
1.6K views
MIT License