Анимация эффекта тени для логотипа
Вашему вниманию оригинальный эффект на знаки, где можно применить к логотипу на сайт. Где идет анимация на каждый прописанный знак. Любая малость ориентируется двумя либо тремя значениями длины. Что каждый может сам установить. Если говорим о логотипе, так как считаю, что такой элемент можно только в этой структуре применить, что на темном сайте смотреться будет великолепно. Также есть еще третье знамение, что перекреплено за размытие, но здесь нужно указать расстояние, где оно должно срабатывать. Также можете посмотреть демонстрацию, чтоб понять работу и визуально как смотрится. HTML Код <h1><span>Z</span><span>O</span><span>R</span><span>N</span><span>E</span><span>T</span><span>.</span><span>R</span><span>U</span></h1> CSS Код body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: black; font-family: 'Tinos', serif; font-size: 40px; text-align: center; color: transparent; overflow: hidden; } span { display: inline-block; text-shadow: 0 0 0 whitesmoke; animation: smoky 5s infinite; } span:nth-child(even) { animation-name: smoky-2; } @keyframes smoky { 60% {text-shadow: 0 0 40px whitesmoke;} to { transform: translate3d(300px, -80px, 0) rotate(-40deg) skewX(70deg) scale(1.5); text-shadow: 0 0 20px whitesmoke; opacity: 0; } } @keyframes smoky-2 { 60% {text-shadow: 0 0 40px whitesmoke;} to { transform: translate3d(350px, -80px, 0) rotate(-40deg) skewX(-70deg) scale(2); text-shadow: 0 0 20px whitesmoke; opacity: 0; } } span:nth-of-type(1) {animation-delay: .1s;} span:nth-of-type(2) {animation-delay: .2s;} span:nth-of-type(3) {animation-delay: .3s;} span:nth-of-type(4) {animation-delay: .4s;} span:nth-of-type(5) {animation-delay: .5s;} PS - здесь вы можете задать индивидуальный шрифт под свой ресурс. |
Поделиться в социальных сетях
Материал разместил
Комментарии: 0 | |