Эффект светящейся анимации текста на CSS
 | |
| Красивые эффекты светящейся анимации для текста, которые исполнены при помощи HTML и CSS, где присутствует несколько сменяющих оттенков цвета. Здесь используется только HTML и CSS, что можно создать легкую и быструю анимацию, что безусловно на темном сайте будет смотреться великолепно. Возникает вопрос, а где такой эффект можно поставить на блоге или на сайте. То здесь решать вам, также нужно заметить, что много зависит от основного дизайна на портале. Как пример, вы можете прописать этот текстовый эффект в свой заголовок или под те значения, что актуальны на сайте. Где можно придайте этот оригинальный эффект тому тексту, который вы хотите выделить, или он должен быть замечен при входе или открытие страницы. Так как все выполнено на чистой стилистике, то вы сами выставляете те заданные значение, это сделать больше цветового эффекта или наоборот уменьшить. Эффекты освещения и свечения всегда создают правильную атмосферу для вашего веб-сайта или приложения. Не придавая элементам необычности, вы легко сможете привлечь внимание пользователя к нужным местам. Например, на веб-сайте студии йоги вы получаете светлые успокаивающие цвета и мягко светящиеся элементы, чтобы дать пользователю ощущение расслабленности.  HTML Код <h1 class="animatsiya-teksta">ZORNET.RU</h1> CSS Код .animatsiya-teksta { text-transform: uppercase; color: #f5efef; font-size: 6em; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0; text-shadow: 0px -1px 2px #fbf5f5, 0px -3px 6px rgb(228 118 12), 0px -6px 12px rgb(247 140 90), 0px -10px 20px rgb(230 117 7), 0px -15px 30px rgb(249 71 71), 0px -21px 42px rgb(247 127 12); animation: effect 0.01s ease infinite, colorChange 10s linear infinite; } @keyframes effect { 50% { text-shadow: 0px -4px 8px #fdf9f9, 0px -12px 24px rgb(232 121 13), 0px -24px 48px rgb(253 135 78), 0px -40px 80px rgb(228 118 11), 0px -60px 120px rgb(247 64 64), 0px -84px 168px rgb(247 138 34); } } @keyframes colorChange { to{filter:hue-rotate(360deg)} } Теперь у вас появилась возможность создавать великолепную анимацию цветов, которые идут под текстовой эффект с помощью базового CSS. Этот эффект мигания будет полезен, когда пользователь возобновит свою работу после перерыва. Еще одно преимущество этого дизайна в том, что он сделан исключительно с использованием скрипта CSS3, а значит можете добавить свою собственную цветовую схему и настроить эффекты анимации в соответствии с вашими требованиями к дизайну. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |