mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
92 lines
2.5 KiB
HTML
92 lines
2.5 KiB
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>
|
|
<style>
|
|
/* From Uiverse.io by xopc333 - Tags: animation, minimalist, card, creative, border, hover effect, css effect, card template */
|
|
.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;
|
|
}
|
|
</style>
|