پیشنمایش زنده
کد HTML
<div class="card">
<svg height="100%" width="100%" class="border" xmlns="http://www.w3.org/2000/svg">
<line y2="0" x2="600" y1="0" x1="0" class="top"></line>
<line y2="-960" x2="0" y1="320" x1="0" class="left"></line>
<line y2="320" x2="-600" y1="320" x1="200" class="bottom"></line>
<line y2="960" x2="200" y1="0" x1="200" class="right"></line>
</svg>
<div class="logo">
<svg class="logo-svg" viewBox="0 0 29.667 31.69" xmlns="http://www.w3.org/2000/svg">
<path transform="translate(0 0)" d="M12.827,1.628A1.561,1.561,0,0,1,14.31,0h2.964a1.561,1.561,0,0,1,1.483,1.628v11.9a9.252,9.252,0,0,1-2.432,6.852q-2.432,2.409-6.963,2.409T2.4,20.452Q0,18.094,0,13.669V1.628A1.561,1.561,0,0,1,1.483,0h2.98A1.561,1.561,0,0,1,5.947,1.628V13.191a5.635,5.635,0,0,0,.85,3.451,3.153,3.153,0,0,0,2.632,1.094,3.032,3.032,0,0,0,2.582-1.076,5.836,5.836,0,0,0,.816-3.486Z"></path>
<path transform="translate(-45.91 0)" d="M75.207,20.857a1.561,1.561,0,0,1-1.483,1.628h-2.98a1.561,1.561,0,0,1-1.483-1.628V1.628A1.561,1.561,0,0,1,70.743,0h2.98a1.561,1.561,0,0,1,1.483,1.628Z"></path>
<path transform="translate(0 -51.963)" d="M0,80.018A1.561,1.561,0,0,1,1.483,78.39h26.7a1.561,1.561,0,0,1,1.483,1.628v2.006a1.561,1.561,0,0,1-1.483,1.628H1.483A1.561,1.561,0,0,1,0,82.025Z"></path>
</svg>
</div>
</div>
کد CSS
.card {
position: relative;
display: flex;
width: 200px;
height: 320px;
background: #C6C6D0;
color: #212121;
box-shadow: inset 0 0 0 4px #212121;
transition: .6s 0.4s;
cursor: pointer;
}
.border {
position: absolute;
inset: 0;
}
.border line {
stroke-width: 4px;
stroke: #C6C6D0;
fill: none;
transition: .6s ease-in-out;
}
.border line.top,
.border line.bottom {
stroke-dasharray: 200;
}
.border line.left,
.border line.right {
stroke-dasharray: 320;
}
.logo {
width: 50%;
margin: auto;
fill: #212121;
transition: .6s;
opacity: 0.9;
}
.card:hover {
background-color: transparent;
transition-delay: 0s;
}
.card:hover .border line {
transition-delay: 0.1s;
}
.card:hover .border line.top {
transform: translateX(-400px);
}
.card:hover .border line.bottom {
transform: translateX(400px);
}
.card:hover .border line.left {
transform: translateY(640px);
}
.card:hover .border line.right {
transform: translateY(-640px);
}
.card:hover .logo {
transition-delay: 0s;
transform: scale(1.1);
fill: #C6C6D0;
filter: drop-shadow( 0 0 30px #C6C6D080);
opacity: 0.9;
}