БлогСфера

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

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

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

CSS .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, чтоб добавить к тексту эффект обводки. А потом используем свойство обтравочного контура, чтоб сделать эффект волны.

WAVES

CSS .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%); }

}

Как настроить высоту строки в CSS

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

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

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

CSS .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 .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.

Источник