Card by javadpg
#212121
1.card1 { 2 background-color: black; 3 width: 250px; 4 height: 300px; 5 position: relative; 6 display: flex; 7 align-items: center; 8 justify-content: center; 9 border-radius: 6px; 10 box-shadow: 2px 2px 19px; 11} 12 13.card1::before { 14 content: ""; 15 position: absolute; 16 z-index: -19; 17 width: 262px; 18 height: 312px; 19 margin: auto; 20 background: rgb(4,0,255); 21 background: linear-gradient(135deg, rgba(4,0,255,1) 0%, rgba(136,0,255,1) 35%, rgba(209,0,255,1) 100%); 22 border-radius: 6px; 23} 24 25.card1::after { 26 content: ""; 27 position: absolute; 28 z-index: -19; 29 width: 262px; 30 height: 312px; 31 margin: auto; 32 background: rgb(4,0,255); 33 background: linear-gradient(135deg, rgba(4,0,255,1) 0%, rgba(136,0,255,1) 35%, rgba(209,0,255,1) 100%); 34 border-radius: 6px; 35 filter: blur(20px); 36 transition: 2s; 37} 38 39.card1:hover::after { 40 animation: cardafter 2.5s infinite forwards; 41} 42 43@keyframes cardafter { 44 0% { 45 opacity: 1; 46 } 47 48 50% { 49 opacity: 0; 50 } 51 52 100% { 53 opacity: 1; 54 } 55} 56
675 views
675 views
MIT License