| Kosten | Понедельник, 02 Декабря 2019, 23:33 | Сообщение 1 |
| Красивая анимация, которая заключается, где идет плавающие на поверхности воды ключевое слово. Этот оригинальная анимация демонстрирует, как чистый CSS использовать для создания анимированного эффекта плавающего текста.
Где на современном дизайне или сайте можно задействовать, главное, чтоб соответствовало тематике. Так как видим значение, которое на половину воде, а на половину появляется из воды. И как можно такую конструкцию пристроить, то здесь безусловно нужно красиво все оформить.
HTML
Код <h1 aria-label="zornet.ru"></h1>
CSS
Код h1 {
position: relative;
font-family: 'Roboto', Arial, sans-serif;
font-size: calc(10px + 10vw);
font-weight: 700;
color: #f5f5f5;
letter-spacing: 0.02em;
text-transform: uppercase;
perspective: 500px;
}
h1::before,
h1::after {
content: attr(aria-label);
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
text-shadow: 0.01em 0.01em 0.01em rgba(0, 0, 0, 0.3);
}
h1::before {
animation: floatAbove 3.5s ease-in-out infinite;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
}
h1::after {
opacity: 0.65;
filter: blur(0.02em);
transform: translate(-50%, -50%) rotateX(21deg);
animation: floatBelow 3.5s ease-in-out infinite;
-webkit-clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}
@keyframes floatAbove {
50% {
transform: translate(-50%, -60%);
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 0% 60%);
clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 0% 60%);
}
}
@keyframes floatBelow {
50% {
transform: translate(-50%, -60%) rotateX(10deg);
-webkit-clip-path: polygon(0% 60%, 100% 60%, 100% 100%, 0% 100%);
clip-path: polygon(0% 60%, 100% 60%, 100% 100%, 0% 100%);
}
}
Демонстрация
| | Страна: (RU) |
| |
