پیشنمایش زنده
کد HTML
<div class="icon-conatiner">
<svg
width="19px"
height="21px"
viewBox="0 0 19 21"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>Group</title>
<g
id="Page-1"
stroke="none"
stroke-width="1"
fill="none"
fill-rule="evenodd"
>
<g id="Artboard" transform="translate(-142.000000, -122.000000)">
<g id="Group" transform="translate(142.000000, 122.000000)">
<path
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"
id="Rectangle-Copy"
fill="#C4FFE4"
></path>
<path
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"
id="Rectangle"
fill="#85EBBC"
></path>
<path
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"
id="Path-2"
fill="#64B18D"
></path>
</g>
</g>
</g>
</svg>
<svg
width="19px"
height="21px"
viewBox="0 0 19 21"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>Group</title>
<g
id="Page-1"
stroke="none"
stroke-width="1"
fill="none"
fill-rule="evenodd"
>
<g id="Artboard" transform="translate(-142.000000, -122.000000)">
<g id="Group" transform="translate(142.000000, 122.000000)">
<path
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"
id="Rectangle-Copy"
fill="#C4FFE4"
></path>
<path
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"
id="Rectangle"
fill="#85EBBC"
></path>
<path
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"
id="Path-2"
fill="#64B18D"
></path>
</g>
</g>
</g>
</svg>
</div>
کد CSS
.icon-conatiner {
width: 150px;
height: 150px;
display: flex;
flex-direction: column;
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;
}
}