Card by AnasKhraim20
#e8e8e8
1.card { 2 position: relative; 3 width: 200px; 4 height: 250px; 5 border-radius: 14px; 6 z-index: 1111; 7 overflow: hidden; 8 display: flex; 9 flex-direction: column; 10 align-items: center; 11 justify-content: center; 12 box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff; 13} 14 15.bg { 16 position: absolute; 17 top: 5px; 18 left: 5px; 19 width: 190px; 20 height: 240px; 21 z-index: 2; 22 background: rgba(255, 255, 255, 0.95); 23 backdrop-filter: blur(24px); 24 border-radius: 10px; 25 overflow: hidden; 26 outline: 2px solid white; 27} 28 29.blob { 30 position: absolute; 31 z-index: 1; 32 top: 50%; 33 left: 50%; 34 width: 150px; 35 height: 150px; 36 border-radius: 50%; 37 background-color: #ff0000; 38 opacity: 1; 39 filter: blur(12px); 40 animation: blob-bounce 0s infinite ease; 41} 42 43@keyframes blob-bounce { 44 0% { 45 transform: translate(-100%, -100%) translate3d(0, 0, 0); 46 } 47 48 25% { 49 transform: translate(-100%, -100%) translate3d(100%, 0, 0); 50 } 51 52 50% { 53 transform: translate(-100%, -100%) translate3d(100%, 100%, 0); 54 } 55 56 75% { 57 transform: translate(-100%, -100%) translate3d(0, 100%, 0); 58 } 59 60 100% { 61 transform: translate(-100%, -100%) translate3d(0, 0, 0); 62 } 63} 64
470 views
Variation of acard
MIT License