Пример:
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<svg class="face" viewBox="0 0 320 380"> <g fill="none" stroke-linecap="round" stroke-linejoin="round"> <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 class="face-pupil" points="55,120 55,155" stroke-dasharray="35 35" /> </g> <g transform="translate(230, 0)"> <polyline class="face-eye-lid" points="37,0 0,120 75,120" /> <polyline class="face-pupil" points="55,120 55,155" stroke-dasharray="35 35" /> </g> </g> <rect class="face-nose" rx="4" ry="4" x="132.5" y="112.5" width="55" height="155" /> <g stroke-dasharray="102 102" transform="translate(65, 334)"> <path class="face-mouth-left" d="M 0 30 C 0 30 40 0 95 0" stroke-dashoffset="-102" /> <path class="face-mouth-right" d="M 95 0 C 150 0 190 30 190 30" stroke-dashoffset="102" /> </g> </g> </svg> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
.face { display: block; width: 280px; margin: 20px auto; stroke: #337AB7; stroke-width: 24px; } .face-eyes, .face-eye-lid, .face-mouth-left, .face-mouth-right, .face-nose, .face-pupil { animation: eyes 1s 0.3s cubic-bezier(0.65, 0, 0.35, 1) forwards; } .face-eye-lid, .face-pupil { animation-duration: 4s; animation-delay: 1.3s; animation-iteration-count: infinite; } .face-eye-lid { animation-name: eye-lid; } .face-mouth-left, .face-mouth-right { animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } .face-mouth-left { animation-name: mouth-left; } .face-mouth-right { animation-name: mouth-right; } .face-nose { animation-name: nose; } .face-pupil { animation-name: pupil; } @keyframes eye-lid { from, 40%, 45%, to { transform: translateY(0); } 42.5% { transform: translateY(17.5px); } } @keyframes eyes { from { transform: translateY(112.5px); } to { transform: translateY(15px); } } @keyframes pupil { from, 37.5%, 40%, 45%, 87.5%, to { stroke-dashoffset: 0; transform: translate(0, 0); } 12.5%, 25%, 62.5%, 75% { stroke-dashoffset: 0; 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); } } |
Найдено на codepen.io у пользователя Jon Kantner
Добавить комментарий: