پیشنمایش زنده
کد HTML
<div class="main">
<div class="card">
<div class="i1">
<span class="corner-text">A</span>
<svg viewBox="0 0 122.88 107.39">
<defs></defs>
<title>red-heart</title>
<path
d="M60.83,17.18c8-8.35,13.62-15.57,26-17C110-2.46,131.27,21.26,119.57,44.61c-3.33,6.65-10.11,14.56-17.61,22.32-8.23,8.52-17.34,16.87-23.72,23.2l-17.4,17.26L46.46,93.55C29.16,76.89,1,55.92,0,29.94-.63,11.74,13.73.08,30.25.29c14.76.2,21,7.54,30.58,16.89Z"
class="heart-icon"
></path>
</svg>
</div>
<div class="center-shape">
<svg viewBox="0 0 122.88 107.39">
<defs></defs>
<title>red-heart</title>
<path
d="M60.83,17.18c8-8.35,13.62-15.57,26-17C110-2.46,131.27,21.26,119.57,44.61c-3.33,6.65-10.11,14.56-17.61,22.32-8.23,8.52-17.34,16.87-23.72,23.2l-17.4,17.26L46.46,93.55C29.16,76.89,1,55.92,0,29.94-.63,11.74,13.73.08,30.25.29c14.76.2,21,7.54,30.58,16.89Z"
class="heart-icon"
></path>
</svg>
</div>
<div class="i2">
<span class="corner-text">A</span>
<svg viewBox="0 0 122.88 107.39">
<defs></defs>
<title>red-heart</title>
<path
d="M60.83,17.18c8-8.35,13.62-15.57,26-17C110-2.46,131.27,21.26,119.57,44.61c-3.33,6.65-10.11,14.56-17.61,22.32-8.23,8.52-17.34,16.87-23.72,23.2l-17.4,17.26L46.46,93.55C29.16,76.89,1,55.92,0,29.94-.63,11.74,13.73.08,30.25.29c14.76.2,21,7.54,30.58,16.89Z"
class="heart-icon"
></path>
</svg>
</div>
</div>
<div class="bg-card-1"></div>
<div class="bg-card-2"></div>
</div>
کد CSS
.main {
position: relative;
}
/* card styles */
.card {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-auto-flow: row;
grid-template-areas:
"i1 . ."
". center ."
". . i2";
width: 12em;
height: 18em;
border-radius: 4px;
background: #ffd700;
transition: 0.5s;
z-index: 20;
}
.bg-card-1 {
background-color: #daa520;
position: absolute;
top: 0;
width: 12em;
height: 18em;
border-radius: 4px;
transition: 0.5s;
z-index: 8;
}
.bg-card-2 {
background-color: #b8860b;
position: absolute;
top: 0;
width: 12em;
height: 18em;
border-radius: 4px;
transition: 0.5s;
z-index: 4;
}
/* glider animation */
.card:before {
content: "";
position: absolute;
height: 130%;
width: 0.6em;
background-color: aliceblue;
opacity: 0.3;
animation: glider 1.8s infinite linear;
animation-delay: 0.05s;
}
.card:after {
content: "";
position: absolute;
height: 130%;
width: 0.4em;
background-color: aliceblue;
opacity: 0.2;
animation: glider 1.8s infinite linear;
}
@keyframes glider {
0% {
transform: rotate(45deg) translate(-140px, -140px);
}
100% {
transform: rotate(45deg) translate(220px, -40px);
}
}
/* icon styles */
.i1,
.i2 svg {
width: 1.5em;
fill: #ff3131;
}
.i1 {
grid-area: i1;
justify-self: flex-start;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin: 0.2em 0.4em;
}
.i2 {
grid-area: i2;
justify-self: flex-end;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin: 0.2em 0.4em;
transform: rotate(180deg);
}
.corner-text {
color: #ff3131;
font-weight: bold;
font-size: 1.2em;
}
.center-shape {
grid-area: center;
display: flex;
justify-content: center;
align-items: center;
}
.center-shape svg {
width: 4em;
fill: #ff3131;
}
/* hover effects */
.card:hover {
box-shadow: #ffd700 0px 7px 29px 0px;
cursor: pointer;
}
.card:hover:after,
.card:hover:before {
visibility: hidden;
}
.card:hover svg,
.card:hover span {
animation: color-change 1s ease-in-out;
animation-fill-mode: forwards;
}
@keyframes color-change {
from {
fill: #ff3131;
color: #ff3131;
}
to {
fill: #e34234;
color: #e34234;
}
}
/* hover fan out effects */
.card:active {
transform: rotate(10deg);
transform-origin: bottom left;
box-shadow: none;
}
.card:active + .bg-card-1 {
transform: rotate(5deg);
transform-origin: bottom left;
}