От автора: давайте изучим четыре тонких текстовых эффекта CSS, которые могут добавить динамичности вашему сайту.
Итак, без лишних слов, давайте начнем.
1. Вибрация текста при наведении
Это тонкий эффект, с помощью которого мы можем задать вибрацию отдельных символов при наведении.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.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, чтобы добавить к тексту эффект обводки. А затем используем свойство обтравочного контура, чтобы создать эффект волны.
|
1 2 3 4 5 |
<section class="waves-demo"> <div class="waves" data-word="WAVES"> WAVES </div> </section> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.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. Светящийся текст
|
1 2 3 4 5 6 7 8 9 10 11 |
.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. Эффект отображения текста
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.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
Источник: //dev.to
Редакция: Команда webformyself.
