پیشنمایش زنده
کد HTML
<main class="my-custom-face-container">
<svg class="face" viewBox="0 0 320 380">
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="25"
>
<g class="face__eyes" transform="translate(0,112.5)">
<g transform="translate(15,0)">
<polyline class="face__eye-lid" points="37,0 0,120 75,120"></polyline>
<polyline
class="face__pupil"
points="55,120 55,155"
stroke-dasharray="35 35"
></polyline>
</g>
<g transform="translate(230,0)">
<polyline class="face__eye-lid" points="37,0 0,120 75,120"></polyline>
<polyline
class="face__pupil"
points="55,120 55,155"
stroke-dasharray="35 35"
></polyline>
</g>
</g>
<rect
class="face__nose"
x="132.5"
y="112.5"
width="55"
height="155"
rx="4"
ry="4"
></rect>
<g transform="translate(65,334)" stroke-dasharray="102 102">
<path class="face__mouth-left" d="M 0 30 C 0 30 40 0 95 0"></path>
<path class="face__mouth-right" d="M 95 0 C 150 0 190 30 190 30"></path>
</g>
</g>
</svg>
</main>
کد CSS
.my-custom-face-container {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
background: #ffffff00;
color: #1a1a1a;
}
.my-custom-face-container .face {
width: 200px;
}
.my-custom-face-container .face__eyes,
.my-custom-face-container .face__eye-lid,
.my-custom-face-container .face__mouth-left,
.my-custom-face-container .face__mouth-right,
.my-custom-face-container .face__nose,
.my-custom-face-container .face__pupil {
animation: eyes 1s 0.3s forwards;
}
.my-custom-face-container .face__eye-lid,
.my-custom-face-container .face__pupil {
animation-duration: 4s;
animation-delay: 1.3s;
animation-iteration-count: infinite;
}
.my-custom-face-container .face__eye-lid {
animation-name: eye-lid;
}
.my-custom-face-container .face__mouth-left {
animation-name: mouth-left;
}
.my-custom-face-container .face__mouth-right {
animation-name: mouth-right;
}
.my-custom-face-container .face__nose {
animation-name: nose;
}
.my-custom-face-container .face__pupil {
animation-name: pupil;
}
@keyframes eye-lid {
0%,
40%,
45%,
100% {
transform: translateY(0);
}
42.5% {
transform: translateY(17.5px);
}
}
@keyframes eyes {
from {
transform: translateY(112.5px);
}
to {
transform: translateY(15px);
}
}
@keyframes pupil {
0%,
37.5%,
40%,
45%,
87.5%,
100% {
stroke-dashoffset: 0;
transform: translate(0, 0);
}
12.5%,
25%,
62.5%,
75% {
transform: translate(-35px, 0);
}
42.5% {
stroke-dashoffset: 35;
transform: translate(0, 17.5px);
}
}
@keyframes mouth-left {
from,
50% {
stroke-dashoffset: -102;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes mouth-right {
from,
50% {
stroke-dashoffset: 102;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes nose {
from {
transform: translate(0, 0);
}
to {
transform: translate(0, 22.5px);
}
}