Четыре эффекта текста, которые оживят ваш сайт

Четыре эффекта текста, которые оживят ваш сайт Сайтостроение

Четыре эффекта текста, которые оживят ваш сайт

От создателя: давайте изучим четыре тонких текстовых эффекта CSS, которые могут добавить динамичности вашему веб-сайту.

Итак, без излишних слов, давайте начнем.

1. Вибрация текста при наведении

Это узкий эффект, при помощи которого мы можем задать вибрацию отдельных знаков при наведении.

CSS

12345678910111213141516171819.vibration span{    transition: all 500ms;    color: rgba(255, 255, 255, 0.8);    display: inline-block;    margin-right: 10px;    text-shadow: 1px 2px 3px #999;}.vibration span:hover{    filter: blur(3px);    animation: vibrate 50ms linear infinite forwards;}@keyframes vibrate{    0% {        transform: translateX(-1px) translateY(1px);    }    100% {        transform: translateX(1px) translateY(-2px);    }}

Мы достигаем этого эффекта, используя атрибут преобразования, чтоб перемещать знак по оси y и оси x и зацикливать анимацию при наведении курсора.

Мы также добавляем символу маленькое размытие, чтоб выделить эффект движения.

Тут необходимо подчеркнуть одну важную вещь: мы должны обеспечить, чтоб элемент span имел свойство display inline-block. Так как преобразования работают лишь с блочными элементами.

2. Волны снутри текста

В этом эффекте мы используем экспериментальную функцию chrome, чтоб добавить к тексту эффект обводки. А потом используем свойство обтравочного контура, чтоб сделать эффект волны.

12345<section class=”waves-demo”>        <div class=”waves” data-word=”WAVES”>            WAVES        </div></section>

CSS

READ
Как настроить высоту строки в CSS
123456789101112131415161718192021.waves {    color: transparent;    -webkit-text-stroke: 2px #fff;    position: relative;}.waves:after{    content: attr(data-word);    position: absolute;    top: 0;    left: 0;    color: #fff;    animation: waves 2s ease-in-out infinite forwards;}@keyframes waves{    0%, 100% {        clip-path: polygon(0 66%, 11% 59%, 18% 51%, 26% 46%, 35% 41%, 48% 44%, 55% 54%, 63% 63%, 76% 60%, 82% 50%, 92% 48%, 100% 53%, 100% 100%, 0% 100%);    }    50% {        clip-path: polygon(0 66%, 8% 74%, 17% 77%, 28% 70%, 35% 57%, 48% 44%, 56% 39%, 69% 41%, 75% 47%, 84% 60%, 92% 61%, 100% 53%, 100% 100%, 0% 100%);    }}

Тут мы используем —WebKit свойство text-stroke, чтоб добавить к тексту эффект обводки. Мы используем псевдо-элемент ::after для заливки белоснежным цветом. Потом мы анимируем свойство обтравочного контура псевдо-элемента, чтоб сформировать эффект волн.

Для упрощения сотворения эффектов обтравочного контура используйте этот инструмент Clippy. При помощи gif, приведенного ниже, вы сможете осознать, как я сделал волновой эффект.

3. Светящийся текст

CSS

1234567891011.glow span {    color: #fff;    transition: all 300ms;}.glow span:hover {    text-shadow: 0 0 10px #0698a5,                 0 0 30px #0698a5,                 0 0 80px #0698a5,                 0 0 120px #0698a5,                 0 0 200px #0698a5;}

Для этого эффекта мы используем стекированные text-shadow, чтоб сделать эффект свечения. Мы можем применять несколько значений для text-shadow, чтоб накладывать их друг на друга и создавать остальные потрясающие эффекты. Тут мы продолжили равномерно наращивать радиус размытия тени и дали ей ярко-синий цвет. Что разъясняет неоново-синее свечение.

4. Эффект отображения текста

CSS

12345678910111213141516171819202122232425262728293031323334353637383940.reveal {  color: #fff;  -webkit-transition: all 400ms;  transition: all 400ms;} .reveal span {  display: inline-block;  -webkit-transition: all 400ms;  transition: all 400ms;} .reveal span:after {  content: ‘can stop it’;  position: absolute;  font-size: 20px;  font-weight: 700;  bottom: -10px;  left: 50%;  width: 200px;  text-align: center;  opacity: 0;  transform: translateX(-50%) scale(0);  transition: all 400ms;} .reveal:hover {  color: rgba(255, 255, 255, 0.1);} .reveal:hover span {  transform: scale(2);  color: #fff;  margin: 0 45px;} .reveal:hover span:after {  opacity: 1;  transform: translateX(-50%) scale(1);}

Опять для этого эффекта мы используем псевдо-селектор ::after, чтоб добавить доп текст. Потом мы используем свойство transform для масштабирования знака при наведении и добавляем маленький отступ, чтоб усилить эффект смещения.

Создатель: Akhil Arjun

Редакция: Команда webformyself.

Источник

Оценить статью
Блог о самом интересном.
Добавить комментарий