mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
95 lines
3.2 KiB
HTML
95 lines
3.2 KiB
HTML
<div class="icon-conatiner">
|
|
|
|
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 19 21" height="21px" width="19px">
|
|
<title>Group</title>
|
|
<g fill-rule="evenodd" fill="none" stroke-width="1" stroke="none" id="Page-1">
|
|
<g transform="translate(-142.000000, -122.000000)" id="Artboard">
|
|
<g transform="translate(142.000000, 122.000000)" id="Group">
|
|
<path fill="#C4FFE4" id="Rectangle-Copy" d="M3.4,4 L11.5,4 L11.5,4 L16,8.25 L16,17.6 C16,19.4777681 14.4777681,21 12.6,21 L3.4,21 C1.52223185,21 6.74049485e-16,19.4777681 0,17.6 L0,7.4 C2.14128934e-16,5.52223185 1.52223185,4 3.4,4 Z"></path>
|
|
<path fill="#85EBBC" id="Rectangle" d="M6.4,0 L12,0 L12,0 L19,6.5 L19,14.6 C19,16.4777681 17.4777681,18 15.6,18 L6.4,18 C4.52223185,18 3,16.4777681 3,14.6 L3,3.4 C3,1.52223185 4.52223185,7.89029623e-16 6.4,0 Z"></path>
|
|
<path fill="#64B18D" id="Path-2" d="M12,0 L12,5.5 C12,6.05228475 12.4477153,6.5 13,6.5 L19,6.5 L19,6.5 L12,0 Z"></path>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 19 21" height="21px" width="19px">
|
|
<title>Group</title>
|
|
<g fill-rule="evenodd" fill="none" stroke-width="1" stroke="none" id="Page-1">
|
|
<g transform="translate(-142.000000, -122.000000)" id="Artboard">
|
|
<g transform="translate(142.000000, 122.000000)" id="Group">
|
|
<path fill="#C4FFE4" id="Rectangle-Copy" d="M3.4,4 L11.5,4 L11.5,4 L16,8.25 L16,17.6 C16,19.4777681 14.4777681,21 12.6,21 L3.4,21 C1.52223185,21 6.74049485e-16,19.4777681 0,17.6 L0,7.4 C2.14128934e-16,5.52223185 1.52223185,4 3.4,4 Z"></path>
|
|
<path fill="#85EBBC" id="Rectangle" d="M6.4,0 L12,0 L12,0 L19,6.5 L19,14.6 C19,16.4777681 17.4777681,18 15.6,18 L6.4,18 C4.52223185,18 3,16.4777681 3,14.6 L3,3.4 C3,1.52223185 4.52223185,7.89029623e-16 6.4,0 Z"></path>
|
|
<path fill="#64B18D" id="Path-2" d="M12,0 L12,5.5 C12,6.05228475 12.4477153,6.5 13,6.5 L19,6.5 L19,6.5 L12,0 Z"></path>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="text">long press me</div>
|
|
<style>
|
|
/* From Uiverse.io by Codecite - Tags: icon, button, copy */
|
|
.icon-conatiner {
|
|
position: relative;
|
|
width: 150px;
|
|
height: 150px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #fff;
|
|
border-radius: 15px;
|
|
box-shadow: 20px 20px 15px 0 #ababab4d;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.icon-conatiner svg {
|
|
width: 50px;
|
|
height: auto;
|
|
}
|
|
|
|
.icon-conatiner svg:last-child {
|
|
position: absolute;
|
|
}
|
|
|
|
.icon-conatiner:active {
|
|
animation: press 0.2s 1 linear;
|
|
}
|
|
|
|
.icon-conatiner:active svg:last-child {
|
|
animation: bounce 0.2s 1 linear;
|
|
}
|
|
|
|
.text {
|
|
color: #666;
|
|
font-family: sans-serif;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-top: 20px;
|
|
user-select: none;
|
|
}
|
|
|
|
@keyframes press {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(0.92);
|
|
}
|
|
|
|
to {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes bounce {
|
|
50% {
|
|
transform: rotate(5deg) translate(20px, -50px);
|
|
}
|
|
|
|
to {
|
|
transform: scale(0.9) rotate(10deg) translate(50px, -80px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
</style>
|