34 примера CSS анимации текста и изображения
Веб-анимация прошла долгий путь и, в наши дни, с возможностью анимации элементов с использованием CSS3, проще, чем когда-либо, оживить пользовательский интерфейс с некоторыми переходами CSS, CSS-преобразованиями и анимациями CSS.
Анимация может влиять на эмоции пользователя, информировать его и направлять его внимание.
Ошибки в мобильном дизайне, которые не нравятся поисковикамСодержание
- 1 Handwritting Text Animation
- 2 Terminal
- 3 Smoky
- 4 Peeled Text Transforms
- 5 CSS Paper Text
- 6 LOVE
- 7 Colorful
- 8 Rotating text
- 9 Auto Typing
- 10 Text Transform
- 11 Transmission: Glowing Text Animation
- 12 Emblem – Auto generate circular text
- 13 CSS Perspective Text Hover
- 14 Simple
- 15 Title
- 16 Image revealing from text on hover
- 17 Glitch text with image background
- 18 Animated highlighted text
- 19 Fly in, fly out
- 20 Floating Text
- 21 Text Animation with background
- 22 VelocityJS demo
- 23 Particles write text
- 24 Animated text fill
- 25 Neon Text Effect
- 26 motion graphic typeface
- 27 Animated Type Loader
- 28 Material Card with Animated Featured Image
- 29 Fully Responsive Layout With Nice Animation
- 30 Zoom + pan the image on hover & mouse move
- 31 Shattering Images
- 32 Building Images
- 33 Image Overlay Slider
- 34 Image hover effect
- 34.1 ЭТО ИНТЕРЕСНО!
Handwritting Text Animation
Terminal
Smoky
Peeled Text Transforms
CSS Paper Text
LOVE
Colorful
Rotating text
Auto Typing
Text Transform
Transmission: Glowing Text Animation
Emblem – Auto generate circular text
CSS Perspective Text Hover
Simple
Title
Image revealing from text on hover
Glitch text with image background
Animated highlighted text
Fly in, fly out
Floating Text
Text Animation with background
VelocityJS demo
Particles write text
Animated text fill
Neon Text Effect
motion graphic typeface
Animated Type Loader
Material Card with Animated Featured Image
Fully Responsive Layout With Nice Animation
Zoom + pan the image on hover & mouse move
Shattering Images
Building Images
Image Overlay Slider
Image hover effect
ЭТО ИНТЕРЕСНО!
Создание текстовых эффектов с использованием CSS3
В этом уроке мы покажем шесть удивительных текстовых эффектов CSS3: эффект трехмерности, созданный с помощью тени текста, эффекты с градиентами и масками изображений, эффекты с переходами и свойством background-clip и другие эффекты. Без сомнения все они могут пригодиться, так как с помощью CSS3 можно добиться по-настоящему впечатляющих результатов. Часть вышеописанных эффектов работает в большинстве браузеров, поддерживающих CSS3, но несколько примеров работает только на движке Webkit. Следовательно, что бы получить максимальное впечатления, посмотрите демонстрацию в браузерах, поддерживающих движок Webkit, таких как Chrome, Safari и Opera.
Демонстрация работы – Скачать исходный код
Для начала давайте добавим общие стили для всех дальнейших экспериментов:
#main div { font-size: 120px; font-weight:bold; position: relative; }
Здесь мы задали размер шрифта и его толщину. Теперь давайте начнем.
Эффект №1 — Трехмерный текст с помощью тени текста CSS3
Сложно представить все возможности, которые предоставляет традиционное свойство тени текста. В CSS3 свойство тени текста применяет тень к тексту. Можно задать горизонтальный размер тени, вертикальный размер тени, расстояние размытие и цвет тени:
text-shadow: h-shadow v-shadow blur color; /* пример: */ text-shadow: 2px 2px 5px #FF7777;
Чтобы добавить больше глубины тексту, нужно просто добавить несколько теней, например:
#eff1 { color: #00b506; text-shadow: 0px 0px 0 rgb(-28,153,-22), 1px 1px 0 rgb(-55,126,-49), 2px 2px 0 rgb(-83,98,-77), 3px 3px 0 rgb(-111,70,-105), 4px 4px 0 rgb(-139,42,-133), 5px 5px 0 rgb(-166,15,-160), 6px 6px 0 rgb(-194,-13,-188), 7px 7px 0 rgb(-222,-41,-216), 8px 8px 7px rgba(0,0,0,0.75), 8px 8px 1px rgba(0,0,0,0.5), 0px 0px 7px rgba(0,0,0,.2); }
Эффект №2 — градиент текста CSS3 c помощью -webkit-mask-image для движка Webkit
Этот эффект использует маски CSS3, свойство -webkit-mask-image. Пока что это свойство не поддерживается другими браузерами, но надеемся, оно будет поддерживаться в будущем:
#eff2 { color: #00b506; text-shadow: 1px 1px 1px #000000; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.3)), to(rgba(0,0,0,1))); }
Эффект №3 — радужный фон текста CSS3 с помощью -webkit-text-fill-color для движка Webkit
Чтобы добиться такого эффекта, используем свойство background-clip с нестандартным значением text, которое поддерживается только браузерами на движке Webkit:
#eff3 { background-image: -webkit-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff); background-image: -moz-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff); background-image: -ms-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff); background-image: -o-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff); background-image: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff); -webkit-text-fill-color: transparent; -webkit-background-clip: text; }
Эффект №4 — Сияющий текст с помощью переходов CSS3 и -webkit-background-clip для движка Webkit
В браузере на движке Webkit полоса света временами пробегает по тексту. Для достижения этого эффекта использовано то же свойство background-clip с нестандартным значением text:
#eff4 { background: #00b506 -webkit-gradient(linear, left top, right top, from(#00b506), to(#00b506), color-stop(0.5, #ffffff)) 0 0 no-repeat; color: rgba(255, 255, 255, 0.1); font-size: 120px; font-weight: bold; position: relative; -webkit-animation: shine 2s infinite; -webkit-background-clip: text; -webkit-background-size: 300px; } @-webkit-keyframes shine { 0% { background-position: top left; } 100% { background-position: top right; } }
Эффект №5 — обведенный текст CSS3 с помощью свойства text-stroke для движка Webkit
Можно легко добавить интересную плоскую обводку текста с помощью свойства -webkit-text-stroke:
#eff5 { color: #00b506; -webkit-text-stroke: 1px #000; }
Эффект №6 — трехмерный поворот текста с помощью свойства трансформации поворота вокруг оси Y CSS3
Можно повернуть текст с помощью переходов и трансформации поворота вокруг оси Y:
#eff6 { color: #00b506; } #eff6 p { color: #8A2BE2; cursor: pointer; display: inline-block; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; transition: .5s; } #eff6 p:hover { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -0-transform: rotateY(-180deg); transform: rotateY(-180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2) }
Демонстрация работы – Скачать исходный код
Заключение
В этом уроке мы рассмотрели способы создания различных текстовых эффектов с помощью свойств CSS3. Надеемся, Вам понравился этот урок и он Вам пригодится. Не все свойства, который были использованы для этого урока, работают во всех браузерах, но все они используются только для создания красивых эффектов, не влияющих на функциональность, так что их можно применять, например, с помощью правила @supports, только для поддерживающих эти свойства браузеров.
Автор урока Andrew Prikaznov
Перевод — Дежурка
Смотрите также:
Текстовые эффекты средствами CSS3
Типографика играет очень важную роль при создании сайта, и благодаря нововведениям в CSS уже сейчас можно создавать потрясающие текстовые эффекты. Они становятся всё более популярными с каждым днём. В этой статье мы будем рассматривать, как можно создать интересную типографику, используя только средства CSS. В уроке будет рассмотрена добавление градиента к тени, добавление эффекта рельефной тени к тексту с градиентом и добавление текстурной тени. Увы, эти эффекты будут работать только в браузерах Webkit.
Градиент
Это работает точно так же, как и создание градиентного фона с помощью CSS3, но мы будем накладывать фон на текст. Вот пример кода:
CSS:
h2#gradient { color: #FF0052; /* Fallback Color */ text-transform: uppercase; font-weight: bold; font-family: helvetica; text-align:center; font-size: 70px; letter-spacing: -4px; } @media screen and (-webkit-min-device-pixel-ratio:0) { h2#gradient { background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } }
HTML:
<h2>CSS3 Rocks!</h2>
Unfortunately, This technique only works on webkit browsers. The problem with Firefox is that there’s no properties that allow background-clip
to work with text, so when viewing on other browsers, it will fall back to a normal color. I also wrapped the effect with @media screen and (-webkit-min-device-pixel-ratio:0
) to prevent the background gradient showing up on unsupported browsers.
К сожалению, этот метод работает только в браузерах WebKit. Проблема с Firefox является то, что нет никаких свойств, которые позволяют <span><span> <code>background-clip
работать с текстом, так что при просмотре в других браузерах текст будет иметь нормальный цвет. Также браузеры не поддерживают эффект <span><span><code>@media screen и (-webkit-min-device-pixel-ratio:0
).
Эффект рельефной тени
К градиенту можно добавить некоторую глубину, применив эффект рельефной тени. Эффект рельефной тени — достаточно популярная техника, которая демонстрирует достаточно четкое разделение между самой буквой и тенью. Этот эффект может быть достигнут с помощью использования 2 значений oftext-shadow
. Цвет первой тени должен совпадать с цветом фона, чтобы создать расстояние между второй тенью и текстом. Вот пример кода:
CSS:
body { background: #441369; } h2#gradient { text-align:center; } h2#gradient span { position:relative; display: inline-block; color: #FF0052; /* Fallback Color */ text-transform: uppercase; font-weight: bold; font-family: helvetica; text-align:center; font-size: 70px; letter-spacing: -4px; text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1); /* Fallback Shadow */ } @media screen and (-webkit-min-device-pixel-ratio:0) { h2#gradient span{ background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow:none !important; } h2#gradient span:after { background: none; content: attr(data-text); left: 0; position: absolute; text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1); //relief shade effect top: 0; z-index: -1; } }
HTML:
<h2><span data-text="CSS3 Rocks!">CSS3 Rocks!</span></h2>
Эта часть является сложнее. Проблема возникла, с тем, что text-shadow
и градиент не совсем хорошо смотрелись вместе. Был добавлен селектор :after и значение z-index -1 , чтобы тень не перекрывала текст. Но такое решение не обеспечит нормальное отображение, если у нас будет выравнивание ext-align: center
. Эффект в :after будет отображаться неровно, и чтобы решить эту проблемы, нужно для текста прописать: position: relative
и display: inline-block.
Добавляем HTML атрибут data-text и надпись «CSS3 Rocks!» в теге span и в css прописываем acontent: attr(data-text)
в селекторе :after. после
селектора. Вот мы и получили эффект рельефной тени совместно с градиентом.
Эффект текстурной тени
Добавляем небольшие изменения к предыдущему коду:
CSS:
body { background: #441369; } h2#gradient { text-align:center; } h2#gradient span { position:relative; display: inline-block; color: #FF0052; /* Fallback Color */ text-transform: uppercase; font-weight: bold; font-family: helvetica; text-align:center; font-size: 70px; letter-spacing: -4px; text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1); /* Fallback Shadow */ } @media screen and (-webkit-min-device-pixel-ratio:0) { h2#gradient span{ background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow:none !important; } h2#gradient span:after { content: attr(data-text); left: 8px; position: absolute; background: url(http://i.imgur.com/RkDRMcJ.png); /* image source for your texture */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: -4px -4px 0px #441369, -1px 0px 0px rgba(255, 255, 255, 0.1); top: 8px; z-index: -1; width: 100%; } }
HTML:
<h2><span data-text="CSS3 Rocks!">CSS3 Rocks!</span></h2>
С помощью нескольких изменений text-shadow и добавления изображения для текстуры мы смогли получить удивительную типографику для сайта, даже не открывая Photoshop.
Автор: Pete R.
Перевод — Дежурка
Красивая анимация текста на CSS3 — анимация текста css


Дорогие читатели, прежде чем мы начнем к уроку, спешу сообщить вам что это 200-й урок на сайте по теме сайтостроения. А сейчас перейдем непосредственно к уроку. В этом уроке мы рассмотрим как создать анимацию текста используя только технологию CSS3. Но, сразу скажу, что эта анимация не будет работать в стареньких браузерах, которые не поддерживают данную технологию. В полной новости в можете видеть 3 примера, на которых представлены разные виды анимации.
Каждый пример можно посмотреть ниже:
Демо 1Демо 2Демо 3Скачать
Создаем анимацию текста на CSS
HTML
Разметка HTML будет следующей:
1 2 3 4 5 6 7 | <ul> <li><h4>Текст 1</h4></li> <li><h4>Текст 2</h4></li> <li><h4>Текст 3</h4></li> <li><h4>Текст 4</h4></li> <li><h4>Текст 5</h4></li> </ul> |
Обычный неупорядоченный список, которых элементы списка будут поочередно появляться и исчезать.
CSS
У каждого примера есть свои стили, у которых есть некоторые отличия, т.к. анимация у всех разная.
Начнем со стилей к 1-му демо:
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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 | .text-animation, .text-animation:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .text-animation li{ z-index: 1000; position: absolute; bottom: 295px; left: 0px; width: 100%; text-align: center; opacity: 0; -webkit-animation: textAnimation 20s linear infinite 0s; -moz-animation: textAnimation 20s linear infinite 0s; -o-animation: textAnimation 20s linear infinite 0s; -ms-animation: textAnimation 20s linear infinite 0s; animation: textAnimation 20s linear infinite 0s; } .text-animation li h4 { font-family: 'Open Sans Condensed', sans-serif; text-transform:uppercase; font-size: 240px; padding: 0; line-height: 200px; color:#390; } .text-animation li:nth-child(2){ -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -o-animation-delay: 4s; -ms-animation-delay: 4s; animation-delay: 4s; } .text-animation li:nth-child(3){ -webkit-animation-delay: 8s; -moz-animation-delay: 8s; -o-animation-delay: 8s; -ms-animation-delay: 8s; animation-delay: 8s; } .text-animation li:nth-child(4) { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .text-animation li:nth-child(5) { -webkit-animation-delay: 16s; -moz-animation-delay: 16s; -o-animation-delay: 16s; -ms-animation-delay: 16s; animation-delay: 16s; } .text-animation li:nth-child(6) { -webkit-animation-delay: 20s; -moz-animation-delay: 20s; -o-animation-delay: 20s; -ms-animation-delay: 20s; animation-delay: 20s; } /* Анимация текста */ @-webkit-keyframes textAnimation { 0% { opacity: 0; -webkit-transform: translateY(200px); } 10% { opacity: 1; -webkit-transform: translateY(0px); } 20% { opacity: 1; -webkit-transform: scale(1); } 23% { opacity: 0 } 27% { opacity: 0; -webkit-transform: scale(10); } 100% { opacity: 0 } } @-moz-keyframes textAnimation { 0% { opacity: 0; -moz-transform: translateY(200px); } 10% { opacity: 1; -moz-transform: translateY(0px); } 20% { opacity: 1; -moz-transform: scale(1); } 23% { opacity: 0 } 27% { opacity: 0; -moz-transform: scale(10); } 100% { opacity: 0 } } @-o-keyframes textAnimation { 0% { opacity: 0; -o-transform: translateY(200px); } 10% { opacity: 1; -o-transform: translateY(0px); } 20% { opacity: 1; -o-transform: scale(1); } 23% { opacity: 0 } 27% { opacity: 0; -o-transform: scale(10); } 100% { opacity: 0 } } @-ms-keyframes textAnimation { 0% { opacity: 0; -ms-transform: translateY(200px); } 10% { opacity: 1; -ms-transform: translateY(0px); } 20% { opacity: 1; -ms-transform: scale(1); } 23% { opacity: 0 } 27% { opacity: 0; -webkit-transform: scale(10); } 100% { opacity: 0 } } @keyframes textAnimation { 0% { opacity: 0; transform: translateY(200px); } 10% { opacity: 1; transform: translateY(0px); } 20% { opacity: 1; transform: scale(1); } 23% { opacity: 0 } 27% { opacity: 0; transform: scale(10); } 100% { opacity: 0 } } |
Для второго демо используется следующий CSS код:
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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 | .text-animation, .text-animation:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .text-animation li{ z-index: 1000; position: absolute; bottom: 300px; left: 0px; width: 100%; text-align: center; opacity: 0; -webkit-animation: textAnimation 20s linear infinite 0s; -moz-animation: textAnimation 20s linear infinite 0s; -o-animation: textAnimation 20s linear infinite 0s; -ms-animation: textAnimation 20s linear infinite 0s; animation: textAnimation 20s linear infinite 0s; } .text-animation li h4 { font-family: 'Open Sans Condensed', sans-serif; text-transform:uppercase; font-size: 240px; padding: 0 30px; line-height: 120px; color:#F00; } .text-animation li:nth-child(2){ -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -o-animation-delay: 4s; -ms-animation-delay: 4s; animation-delay: 4s; } .text-animation li:nth-child(3){ -webkit-animation-delay: 8s; -moz-animation-delay: 8s; -o-animation-delay: 8s; -ms-animation-delay: 8s; animation-delay: 8s; } .text-animation li:nth-child(4){ -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .text-animation li:nth-child(5){ -webkit-animation-delay: 16s; -moz-animation-delay: 16s; -o-animation-delay: 16s; -ms-animation-delay: 16s; animation-delay: 16s; } .text-animation li:nth-child(6){ -webkit-animation-delay: 20s; -moz-animation-delay: 20s; -o-animation-delay: 20s; -ms-animation-delay: 20s; animation-delay: 20s; } @-webkit-keyframes textAnimation { 0% { opacity: 0; -webkit-transform: translateY(-200%); } 10% { opacity: 1; -webkit-transform: translateY(0%); } 20% { opacity: 1; -webkit-transform: translateY(0%); } 23% { opacity: 0; -webkit-transform: translateY(100%); } 26% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes textAnimation { 0% { opacity: 0; -moz-transform: translateY(-200%); } 10% { opacity: 1; -moz-transform: translateY(0%); } 20% { opacity: 1; -moz-transform: translateY(0%); } 23% { opacity: 0; -moz-transform: translateY(100%); } 26% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes textAnimation { 0% { opacity: 0; -o-transform: translateY(-200%); } 10% { opacity: 1; -o-transform: translateY(0%); } 20% { opacity: 1; -o-transform: translateY(0%); } 23% { opacity: 0; -o-transform: translateY(100%); } 26% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes textAnimation { 0% { opacity: 0; -ms-transform: translateY(-200%); } 10% { opacity: 1; -ms-transform: translateY(0%); } 20% { opacity: 1; -ms-transform: translateY(0%); } 23% { opacity: 0; -ms-transform: translateY(100%); } 26% { opacity: 0 } 100% { opacity: 0 } } @keyframes textAnimation { 0% { opacity: 0; transform: translateY(-200%); } 10% { opacity: 1; transform: translateY(0%); } 20% { opacity: 1; transform: translateY(0%); } 23% { opacity: 0; transform: translateY(100%); } 26% { opacity: 0 } 100% { opacity: 0 } } |
И, наконец, стили для 3-го демо:
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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 | .text-animation, .text-animation:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .text-animation li{ z-index: 1000; position: absolute; bottom: 300px; left: 0px; width: 100%; text-align: right; opacity: 0; -webkit-animation: textAnimation 20s linear infinite 0s; -moz-animation: textAnimation 20s linear infinite 0s; -o-animation: textAnimation 20s linear infinite 0s; -ms-animation: textAnimation 20s linear infinite 0s; animation: textAnimation 20s linear infinite 0s; list-style-type:none; } .text-animation li h4 { font-family: 'Open Sans Condensed', sans-serif; text-transform:uppercase; font-size: 240px; padding: 0 400px; line-height: 120px; color:#F90; } .text-animation li:nth-child(2){ -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -o-animation-delay: 4s; -ms-animation-delay: 4s; animation-delay: 4s; } .text-animation li:nth-child(3){ -webkit-animation-delay: 8s; -moz-animation-delay: 8s; -o-animation-delay: 8s; -ms-animation-delay: 8s; animation-delay: 8s; } .text-animation li:nth-child(4){ -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .text-animation li:nth-child(5){ -webkit-animation-delay: 16s; -moz-animation-delay: 16s; -o-animation-delay: 16s; -ms-animation-delay: 16s; animation-delay: 16s; } .text-animation li:nth-child(6){ -webkit-animation-delay: 20s; -moz-animation-delay: 20s; -o-animation-delay: 20s; -ms-animation-delay: 20s; animation-delay: 20s; } @-webkit-keyframes textAnimation { 0% { opacity: 0; -webkit-transform: translateX(200px); } 8% { opacity: 1; -webkit-transform: translateX(0px); } 17% { opacity: 1; -webkit-transform: translateX(0px); } 19% { opacity: 0; -webkit-transform: translateX(-300px); } 25% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes textAnimation { 0% { opacity: 0; -moz-transform: translateX(200px); } 8% { opacity: 1; -moz-transform: translateX(0px); } 17% { opacity: 1; -moz-transform: translateX(0px); } 19% { opacity: 0; -moz-transform: translateX(-300px); } 25% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes textAnimation { 0% { opacity: 0; -o-transform: translateX(200px); } 8% { opacity: 1; -o-transform: translateX(0px); } 17% { opacity: 1; -o-transform: translateX(0px); } 19% { opacity: 0; -o-transform: translateX(-300px); } 25% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes textAnimation { 0% { opacity: 0; -ms-transform: translateX(200px); } 8% { opacity: 1; -ms-transform: translateX(0px); } 17% { opacity: 1; -ms-transform: translateX(0px); } 19% { opacity: 0; -ms-transform: translateX(-300px); } 25% { opacity: 0 } 100% { opacity: 0 } } @keyframes textAnimation { 0% { opacity: 0; transform: translateX(200px); } 8% { opacity: 1; transform: translateX(0px); } 17% { opacity: 1; transform: translateX(0px); } 19% { opacity: 0; transform: translateX(-300px); } 25% { opacity: 0 } 100% { opacity: 0 } } |
Вывод
Красивые эффекты на CSS3 с текстом, которые можно сделать без использования Javascript на сайте! Качайте, изучайте и применяйте у себя на сайте.
Также хочу сказать спасибо всем, кто постоянно читает мои статьи и изучает материалы, которые я здесь публикую 🙂 .
Успехов!
С Уважением, Юрий Немец
Источник: http://www.freshdesignweb.com/css3-text-animation-tutorial.html
Эффекты с текстом и ссылками
Текст из частиц
Текст формируемый из частиц, на которые мы можем воздействовать за счет наведения курсора.

Жидкий текст при наведении
При hover на текст его фон становится текучим, как жидкость.

Гибкий текст
Немного css магии font-variation-settings, -webkit-background-clip, -webkit-text-fill-color приправленной js и прикольный эффект над текстом.

Ротация текста - atrotating.js
Atrotating - плагин для изменения/вращения текста или HTML, одиночно или в группе, автоматически с сепаратором (вертикальной чертой "|"). Плагин поставляется с пятью встроенными эффектами перехода, но вы также можете подключить animate.css для использования более необычных css3 анимаций.

Readmore.js - плагин скрывающий большой текст
Плагин позволяющий скрывать часть текста, если он превышает заданную длину. Добавляется ссылка, как правило в виде кнопки "Подробнее" - по клику отображается скрытый текст.

ElipText - расположение текста по окружности
Плагин ElipText позволяющий раположить текст по заданному в настройках радиусу. Для работы требуется подключение ещё одной библиотеки lettering.js.

Градиентный текст
Вариант реализации CSS3 градиента на тексте. Нужный эффект достигается за счет такой подборки цвета заднего фона, что накладываемый на него градиент практически не виден, а текст приобретает градиент, за счет более светлого цвета используемого для самого текста.

Простая бегущая строка на jQuery
Простая реализация на jQuery бегущей текстовой строки. Мы лишь слегка оформили задний фон с помощью css3 градиента.

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

Анимация текста на jQuery
Плагин для анимации текста имющий пять различных режимов: roll, step, jump, puff, highlight, каждый с возможностью дополнительной настройки.

Выделение цветом ссылок при наведении
Чтобы не заострять внимание пользователя на ссылки в тексте мы не будем их выделять на общем фоне, но когда пользователь наведет курсор мыши на "родителя" - в нашем случае это параграф, то ссылки находящиеся внутри него будут подсвечены другим цветом.

Анимация элементов списка
Простой эффект поочередного увеличения и уменьшения размера шрифта у элементов списка.

CSS | Текстовые эффекты | Портал информатики для гиков
CSS, Веб-технологии
CSS — это механизм добавления стиля в различные веб-документы. Текстовые эффекты позволяют нам применять различные типы эффектов к тексту, используемому в документе HTML.
Ниже приведены некоторые свойства CSS, которые можно использовать для добавления эффектов к тексту:
- текст переполнения
- перенос слова
- слово-брейк
- режим письма
Давайте узнаем о каждом из них в деталях:
- Text-Overflow: свойство CSS Text overflow — это способ ограничения текста, который превышает ширину его родительского элемента. Это помогает указать способ представления части текста, который не виден пользователю.
Синтаксис:
element { text-overflow: clip | ellipsis; //CSS Property }
Значения :
- клип: это значение по умолчанию для этого свойства. Это значение ключевого слова будет усекать текст на границе области содержимого, поэтому усечение может происходить в середине символа.
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
div.geek {
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #000000;
font-size: 20px;
text-overflow: clip;
}
div.geek:hover {
overflow: visible;
}
</
style
>
</
head
>
<
body
style
=
"text-align: center"
>
<
h2
style
=
"color:green"
>
GeeksforGeeks
</
h2
>
<
h3
>
text-overflow: clip
</
h3
>
<
div
class
=
"geek"
>
A Computer Science portal for geeks.
</
div
>
</
body
>
</
html
>
Выход:
- многоточие: при этом отобразится многоточие ('…') для представления обрезанного текста. Многоточие отображается внутри области содержимого, уменьшая объем отображаемого текста. Если для отображения многоточия недостаточно места, оно обрезается.
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
div.geek {
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #000000;
font-size: 20px;
text-overflow: ellipsis;
}
div.geek:hover {
overflow: visible;
}
</
style
>
</
head
>
<
body
style
=
"text-align: center"
>
<
h2
style
=
"color:green"
>
GeeksforGeeks
</
h2
>
<
h3
>
text-overflow: ellipsis
</
h3
>
<
div
class
=
"geek"
>
A Computer Science portal for geeks.
</
div
>
</
body
>
</
html
>
Выход:
- клип: это значение по умолчанию для этого свойства. Это значение ключевого слова будет усекать текст на границе области содержимого, поэтому усечение может происходить в середине символа.
- Перенос слов. Свойство переноса слов в CSS определяет, разрешено ли браузеру разрывать строки в словах, если слово слишком длинное, чтобы поместиться в его родительский контейнер. Если слово слишком длинное, чтобы вписаться в область, оно расширяется за пределы:
Синтаксис:element { word-wrap: break-word; //CSS Property }
Пример:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>word wrap</
title
>
<
style
>
p {
width: 11em;
border: 1px solid #000000;
text-align: left;
font-size: 20px;
}
p.test {
word-wrap: break-word;
}
</
style
>
</
head
>
<
body
style
=
"text-align: center;"
>
<
h3
>Without word-wrap</
h3
>
<
p
>
This paragraph contains a very long word:
geeksforgeeksforgeeksforgeeksforgeeks
</
p
>
<
h3
>With word-wrap</
h3
>
<
p
class
=
"test"
>
This paragraph contains a very long word: geeks
forgeeksforgeeksforgeeksforgeeks
</
p
>
</
body
>
</
html
>
Выход:
- Разрыв слова: CSS-свойство разрыва слова устанавливает, будут ли разрывы строк появляться там, где текст в противном случае переполняет поле содержимого. Это определяет правила разрыва строки.
Синтаксис:element { word-break: keep-all | break-all; //CSS Property }
- break-all: используется для вставки переноса слов между любыми двумя символами, чтобы предотвратить переполнение слов.
Пример:<!DOCTYPE html>
<
html
>
<
head
>
<
title
>word-break: break-all</
title
>
<
style
>
p.geek {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
text-align: left;
font-size: 20px;
}
</
style
>
</
head
>
<
body
style
=
"text-align: center;"
>
<
h3
>word-break: break-all</
h3
>
<
p
class
=
"geek"
>
A computer science portal for geeks
</
p
>
</
body
>
</
html
>
Выход:
- keep-all: используется для разбиения слов в стиле по умолчанию.
Пример:<!DOCTYPE html>
<
html
>
<
head
>
<
title
>word-break: keep-all</
title
>
<
style
>
p.geek {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
text-align: left;
font-size: 20px;
}
</
style
>
</
head
>
<
body
style
=
"text-align: center;"
>
<
h3
>word-break: keep-all</
h3
>
<
p
class
=
"geek"
>
A computer science portal for geeks
</
p
>
</
body
>
</
html
>
Выход:
- break-all: используется для вставки переноса слов между любыми двумя символами, чтобы предотвратить переполнение слов.
- Режим письма: свойство режима письма CSS определяет, будут ли строки текста расположены горизонтально или вертикально.
Синтаксис:
element { writing-mode: horizontal-tb | vertical-rl; //CSS Property }
- horizontal-tb: Это значение по умолчанию свойства, т.е. текст читается слева направо и сверху вниз. Следующая горизонтальная линия расположена ниже предыдущей строки.
Пример:<!DOCTYPE html>
<
html
>
<
head
>
<
title
>writing-mode: horizontal-tb</
title
>
<
style
>
p.geek {
writing-mode: horizontal-tb;
font-size: 18px;
}
</
style
>
</
head
>
<
body
style
=
"text-align: center;"
>
<
h2
>writing-mode: horizontal-tb</
h2
>
<
p
class
=
"geek"
>
A computer science portal for geeks.
</
p
>
</
body
>
</
html
>
Выход:
- vertical-rl: в этом свойстве текст читается справа налево и сверху вниз. Следующая вертикальная линия расположена слева от предыдущей строки.
Пример:<!DOCTYPE html>
<
html
>
<
head
>
<
title
>writing-mode: vertical-rl</
title
>
<
style
>
span.test2 {
writing-mode: vertical-rl;
font-size: 18px;
}
</
style
>
</
head
>
<
body
style
=
"text-align: center;"
>
<
h2
>writing-mode: vertical-rl</
h2
>
<
p
class
=
"geek"
></
p
>
<
p
>
computer science <
span
class
=
"test2"
>portal </
span
>
for geeks.
</
p
>
</
body
>
</
html
>
Выход:
- horizontal-tb: Это значение по умолчанию свойства, т.е. текст читается слева направо и сверху вниз. Следующая горизонтальная линия расположена ниже предыдущей строки.
Рекомендуемые посты:
CSS | Текстовые эффекты
0.00 (0%) 0 votes