#e8e8e8
1.box { 2 position: relative; 3 width: 220px; 4 height: 300px; 5 display: flex; 6 justify-content: center; 7 align-items: center; 8 transition: 0.5s; 9 z-index: 1; 10} 11 12.box::before { 13 content: ' '; 14 position: absolute; 15 top: 0; 16 left: 50px; 17 width: 50%; 18 height: 100%; 19 text-decoration: none; 20 background: #fff; 21 border-radius: 8px; 22 transform: skewX(15deg); 23 transition: 0.5s; 24} 25 26.box::after { 27 content: ''; 28 position: absolute; 29 top: 0; 30 left: 50; 31 width: 50%; 32 height: 100%; 33 background: #fff; 34 border-radius: 8px; 35 transform: skewX(15deg); 36 transition: 0.5s; 37 filter: blur(30px); 38} 39 40.box:hover:before, 41.box:hover:after { 42 transform: skewX(0deg) scaleX(1.3); 43} 44 45.box:before, 46.box:after { 47 background: linear-gradient(315deg, #ffbc00, #ff0058) 48} 49 50.box span { 51 display: block; 52 position: absolute; 53 top: 0; 54 left: 0; 55 right: 0; 56 bottom: 0; 57 z-index: 5; 58 pointer-events: none; 59} 60 61.box span::before { 62 content: ''; 63 position: absolute; 64 top: 0; 65 left: 0; 66 width: 0; 67 height: 0; 68 border-radius: 8px; 69 background: rgba(255, 255, 255, 0.1); 70 backdrop-filter: blur(10px); 71 opacity: 0; 72 transition: 0.1s; 73 animation: animate 2s ease-in-out infinite; 74 box-shadow: 0 5px 15px rgba(0,0,0,0.08) 75} 76 77.box span::before { 78 top: -40px; 79 left: 40px; 80 width: 50px; 81 height: 50px; 82 opacity: 1; 83} 84 85.box span::after { 86 content: ''; 87 position: absolute; 88 bottom: 0; 89 right: 0; 90 width: 100%; 91 height: 100%; 92 border-radius: 8px; 93 background: rgba(255, 255, 255, 0.1); 94 backdrop-filter: blur(10px); 95 opacity: 0; 96 transition: 0.5s; 97 box-shadow: 0 5px 15px rgba(0,0,0,0.08); 98 animation-delay: -1s; 99} 100 101.box span:after { 102 bottom: -40px; 103 right: 40px; 104 width: 50px; 105 height: 50px; 106 opacity: 1; 107} 108 109.box .content { 110 position: relative; 111 width: 190px; 112 height: 254px; 113 padding: 20px 40px; 114 background: rgba(255, 255, 255, 0.05); 115 backdrop-filter: blur(10px); 116 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 117 border-radius: 8px; 118 z-index: 1; 119 transform: 0.5s; 120 color: #fff; 121 display: flex; 122 justify-content: center; 123 align-items: center; 124} 125 126.box .content h2 { 127 font-size: 20px; 128 color: #fff; 129 margin-bottom: 10px; 130}
18K views
18K views
Comments
MIT License