Приветствую, читателей и гостей блога. Предлагаю вашему вниманию 3 варианта оформления текста или заголовка. А именно, анимированный текст на чистом CSS. Думаю, что кому - нибудь и придётся по душе при оформлении сообщений или страниц.
Чтобы просмотреть каждый из вариантов, скопируйте нужный код и установите его в этом редакторе.
Вариант 1. Самый простой способ . Переливающийся текст. Можно настроить интервал мигания и задать нужный цвет.
Код
Вариант 2. Прыгающие буковки. Используя свойство CSS3 @keyframe создадим своеобразный 3D-эффект.
Код
Вариант 3. При наведении курсора текст начинает "дёргаться".
Код
Анимация применяется где угодно. С помощью её можно двигать любые элементы страницы - текст, картинку, произвольные фигуры, что придет на ум. Если решите применить у себя в блоге, просто в редакторе сообщения или страницы, перейдите в режим HTML и в нужном месте установите код.
Посмотрите ещё некоторые эффекты для текста
Текстовые эффекты на CSS
Мигающий текст
Всем добра и до встречи.

Чтобы просмотреть каждый из вариантов, скопируйте нужный код и установите его в этом редакторе.
Вариант 1. Самый простой способ . Переливающийся текст. Можно настроить интервал мигания и задать нужный цвет.
Код
<div class="tsanext-animation">шпаргалки блогерши</div>
<style>
.tsanext-animation {
font-size: 79px;
font-family: 'sonos-logoregular';
text-align: center;
background: -webkit-linear-gradient(left, #503a86, #de494f, #ea8d5b, #ca497a, #6148a0);
background: linear-gradient(left, #33235B, #D62229, #E97639, #792042, #33235B);
background-size: 3200px 200px;
margin-top: 20vh;
color: transparent;
-webkit-background-clip: text;
-webkit-animation: animate-logo;
-webkit-animation-delay: 0;
-webkit-animation-duration: 7s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-fill-mode: forwards;
transition: font-size 500ms ease-in-out;
}
}
@media only screen and (min-width: 40.063em) {
.tsanext-animation {
margin-top: 30vh;
font-size: 80px;
}
}
@media only screen and (min-width: 64.063em) {
.tsanext-animation {
margin-top: 25vh;
font-size: 79px;
}
}
@media only screen and (min-width: 90.063em) {
.tsanext-animation {
margin-top: 20vh;
font-size: 80px;
}
}
@media only screen and (min-width: 120.063em) {
.tsanext-animation {
margin-top: 15vh;
font-size: 79px;
}
}
@-webkit-keyframes animate-logo {
0% {
background-position: 0 3200px;
}
100% {
background-position: 3200px 0;
}
}</style>
<style>
.tsanext-animation {
font-size: 79px;
font-family: 'sonos-logoregular';
text-align: center;
background: -webkit-linear-gradient(left, #503a86, #de494f, #ea8d5b, #ca497a, #6148a0);
background: linear-gradient(left, #33235B, #D62229, #E97639, #792042, #33235B);
background-size: 3200px 200px;
margin-top: 20vh;
color: transparent;
-webkit-background-clip: text;
-webkit-animation: animate-logo;
-webkit-animation-delay: 0;
-webkit-animation-duration: 7s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-fill-mode: forwards;
transition: font-size 500ms ease-in-out;
}
}
@media only screen and (min-width: 40.063em) {
.tsanext-animation {
margin-top: 30vh;
font-size: 80px;
}
}
@media only screen and (min-width: 64.063em) {
.tsanext-animation {
margin-top: 25vh;
font-size: 79px;
}
}
@media only screen and (min-width: 90.063em) {
.tsanext-animation {
margin-top: 20vh;
font-size: 80px;
}
}
@media only screen and (min-width: 120.063em) {
.tsanext-animation {
margin-top: 15vh;
font-size: 79px;
}
}
@-webkit-keyframes animate-logo {
0% {
background-position: 0 3200px;
}
100% {
background-position: 3200px 0;
}
}</style>
Вариант 2. Прыгающие буковки. Используя свойство CSS3 @keyframe создадим своеобразный 3D-эффект.
Код
<div class='is-animate'>
<div class="l">П</div>
<div class="l">Р</div>
<div class="l">И</div>
<div class="l">В</div>
<div class="l">Е</div>
<div class="l">Т</div>
<div class="l">И</div>
<div class="l">К</div>
</div>
<style>
.is-animate {
background: #F08080;
box-sizing: border-box;
font-size: 66px;
display: -webkit-inline-box;
padding: 14px;
border-radius: 7px;
}
.is-animate > div {
animation-name: style;
display: -webkit-inline-box;
color: #fff;
padding: 9px;
background:#F08080;
font-family: 'Indie Flower', cursive;
box-shadow: 2px 2px 9px 2px;
}
.l{
animation: letterspacing 1s infinite alternate cubic-bezier(.2, 0, 0, 1);
}
.is-animate > div {
animation-duration: 1s;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
.is-animate > div:nth-child(1) { animation-delay: 0.0s }
.is-animate > div:nth-child(2) { animation-delay: 0.1s }
.is-animate > div:nth-child(3) { animation-delay: 0.2s }
.is-animate > div:nth-child(4) { animation-delay: 0.3s }
.is-animate > div:nth-child(5) { animation-delay: 0.4s }
.is-animate > div:nth-child(6) { animation-delay: 0.5s }
.is-animate > div:nth-child(7) { animation-delay: 0.6s }
@keyframes style {
from {
transform: scale3d(1, 1, 1);
}
30% {
box-shadow: 0px 0px 0px 0px;
transform: scale3d(1.25, 0.75, 1);
}
40% {
transform: scale3d(0.75, 1.25, 1);
}
50% {
transform: scale3d(1.15, 0.85, 1);
}
65% {
transform: scale3d(.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, .95, 1);
}
to {
transform: scale3d(1, 1, 1);
}
}
@keyframes letterspacing {
0% {
filter: blur(0.1rem);
}
100% {
filter: blur(0.5rem);
}
to {
letter-spacing: none;
filter: blur(0rem);
}
}
</style>
<div class="l">П</div>
<div class="l">Р</div>
<div class="l">И</div>
<div class="l">В</div>
<div class="l">Е</div>
<div class="l">Т</div>
<div class="l">И</div>
<div class="l">К</div>
</div>
<style>
.is-animate {
background: #F08080;
box-sizing: border-box;
font-size: 66px;
display: -webkit-inline-box;
padding: 14px;
border-radius: 7px;
}
.is-animate > div {
animation-name: style;
display: -webkit-inline-box;
color: #fff;
padding: 9px;
background:#F08080;
font-family: 'Indie Flower', cursive;
box-shadow: 2px 2px 9px 2px;
}
.l{
animation: letterspacing 1s infinite alternate cubic-bezier(.2, 0, 0, 1);
}
.is-animate > div {
animation-duration: 1s;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
.is-animate > div:nth-child(1) { animation-delay: 0.0s }
.is-animate > div:nth-child(2) { animation-delay: 0.1s }
.is-animate > div:nth-child(3) { animation-delay: 0.2s }
.is-animate > div:nth-child(4) { animation-delay: 0.3s }
.is-animate > div:nth-child(5) { animation-delay: 0.4s }
.is-animate > div:nth-child(6) { animation-delay: 0.5s }
.is-animate > div:nth-child(7) { animation-delay: 0.6s }
@keyframes style {
from {
transform: scale3d(1, 1, 1);
}
30% {
box-shadow: 0px 0px 0px 0px;
transform: scale3d(1.25, 0.75, 1);
}
40% {
transform: scale3d(0.75, 1.25, 1);
}
50% {
transform: scale3d(1.15, 0.85, 1);
}
65% {
transform: scale3d(.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, .95, 1);
}
to {
transform: scale3d(1, 1, 1);
}
}
@keyframes letterspacing {
0% {
filter: blur(0.1rem);
}
100% {
filter: blur(0.5rem);
}
to {
letter-spacing: none;
filter: blur(0rem);
}
}
</style>
Вариант 3. При наведении курсора текст начинает "дёргаться".
Код
<p class="text animated rubberBand">НАВЕДИ НА МЕНЯ</p>
<style>
.text {
text-align: center;
margin-top: 20px;
color: #F47C0A;
font-size: 2.0em;
font-family: sans-serif;
text-transform: uppercase;
}
.animated:hover {
animation-duration: 2.5s;
animation-fill-mode: both;
animation-iteration-count: infinite;
cursor:pointer;
}
@keyframes rubberBand {
0% {transform: scale(1);}
30% {transform: scaleX(1.15) scaleY(0.75);}
40% {transform: scaleX(0.75) scaleY(1.25);}
60% {transform: scaleX(1.15) scaleY(0.85);}
100% {transform: scale(1);}
}
p.rubberBand {
animation-name: rubberBand;
}
</style>
<style>
.text {
text-align: center;
margin-top: 20px;
color: #F47C0A;
font-size: 2.0em;
font-family: sans-serif;
text-transform: uppercase;
}
.animated:hover {
animation-duration: 2.5s;
animation-fill-mode: both;
animation-iteration-count: infinite;
cursor:pointer;
}
@keyframes rubberBand {
0% {transform: scale(1);}
30% {transform: scaleX(1.15) scaleY(0.75);}
40% {transform: scaleX(0.75) scaleY(1.25);}
60% {transform: scaleX(1.15) scaleY(0.85);}
100% {transform: scale(1);}
}
p.rubberBand {
animation-name: rubberBand;
}
</style>
Анимация применяется где угодно. С помощью её можно двигать любые элементы страницы - текст, картинку, произвольные фигуры, что придет на ум. Если решите применить у себя в блоге, просто в редакторе сообщения или страницы, перейдите в режим HTML и в нужном месте установите код.
Посмотрите ещё некоторые эффекты для текста
Текстовые эффекты на CSS
Мигающий текст
Всем добра и до встречи.
хотите оформить подписку на новые шпаргалки
Спасибо за полезности --- https://tintebp.blogspot.com/2020/07/blog-post.html )
ОтветитьУдалитьK8, как лихо Вы уже установили. Здорово!
ОтветитьУдалитьНи фига себе К8 отличился1 А вообще, очень забавная и симпатичная анимация (у меня в голове вертится реанимация0. Но меня в компьютерном плане уже не реанимируешь. Завидую К8!
ОтветитьУдалитьСемён, да уж и не заморачивайтесь. K8 молодец. сразу новое экспериментирует.
УдалитьКак интересно! Но уже ничего не охота устанавливать!
ОтветитьУдалитьИрина, привет. А зря. Коды эти не скрипты джава и всякие библиотеки. Одна картинка может тяжелее быть. Иногда и в меру можно и даже нужно чем - то выделять страницы и сообщения. Просто сухой текст по другому воспринимается. визуальная информация обрабатывается быстрее, чем сам текст. http://www.shpargalochki.ru/2017/04/pro-oformlenie-statej-v-bloge.html
ОтветитьУдалитьПриветик, Вика! Очень мне понравился первый код, только очень крупный текст получается... Я пробовала уменьшить, тогда получается без анимации... (((
ОтветитьУдалитьВика, подскажи, пожалуйста, в каких местах надо менять, а в каких не надо... Спасибо!!! )))
Елена в коде меняйте на меньшее .tsanext-animation {
Удалитьfont-size: 79px;
и в двух местах font-size: 80px;. размер величины на анимацию не влияет.
Вика, приветик. Очень даже мило, для разнообразия замечательно. Прыгающие на любителя, а первый и третий прямо-таки для тех (себя имею ввиду), кому надо поспокойнее. Спасибочки!!!
ОтветитьУдалитьЛюба, привет. Да прыгающие на любителя. Можно на одной страничке где сделать. Последний тоже смешной получился.
УдалитьДа я и не заморачиваюсь, Вика! Мне хватает того, в чем я, действительно, что-то понимаю. В дальнейших новеллах будет про японцев. Для них название моего блога - нонсенс. У каждого есть одна жена, одно хобби и одна профессия. Но уж в этом-то он разбирается, как Бог! Если он специалист по забиванию гвоздей 20 мм., то 21 мм. он даже в руки не возьмёт. И не потому, что не сумеет, а потому что у них, косоглазых, это уже другая профессия.
ОтветитьУдалитьСемён, это на самом деле, каждому своё. И здорово, что все мы абсолютно разные. И знания , и увлечения, и характеры. Жить на планете с полностью идентичными людьми было бы скучно, рутинно и совершенно неинтересно.
УдалитьАх, как верно Вы это определили, Вика! Мне жутко приятно с Вами общаться, а ведь мы могли рассориться и разбежаться из-за какого-то кретина-хакера, которого мои системные спецы так и не сумели вычислить. Впрочем, как их, сволочей, вычислишь, если оне Пентагон взламывают. Впрочем, я понимаю идею взломать Пентагон, а мы-то за что? На нас ведь гринов не срубишь!
ОтветитьУдалитьСемён, если из - за таких ссорится... Я вас умоляю... в жизни и без того есть на что нервы мотать
ОтветитьУдалитьСпасибо, Вика! Попробую.
ОтветитьУдалитьЕлена, попробовать всегда можно. А понравится или нет потом решите.
УдалитьВика, спасибо большое! Уменьшить удалось, но, почему-то очень большой отступ... Может где-то еще надо изменить? Вот, посмотри, пожалуйста ( я потом исправлю, если не получится, пока так оставила, что бы ты посмотрела)
ОтветитьУдалитьhttps://mirosslava55.blogspot.com/2020/07/kollazh-po-uroku-kira.html
Елена со значением margin-top: 20%; /* Отступ сверху */поиграйтесь.
УдалитьСпасибо большое, Вика, наша выручалочка!!! :-))) Теперь всё ок! ❤❤❤
ОтветитьУдалитьЕлена, всё получится.
УдалитьВика,приветик.А как во втором варианте можно 2 слова сделать? В смысле словосочетание,пробел как вставить?
ОтветитьУдалитьНужно менять и рассчитывать свойство transform: scale и child. Можно такой же код только с другим классом. Здесь задан класс is-animate прописать другой везде и в стилях и дивах
ОтветитьУдалитьпоняла,спасибо
ОтветитьУдалитьКак всегда на высшем уровне! Вика, Привет! Я тоже попробую, но позже немного, скопировала себе переливающийся...про дерганный -это тоже не ком мне- я сама такая к концу года(уч), а вот переливающийся - релакс для меня!!! Спасибо!Из вашей переписке учту нюансы и сделаю...
ОтветитьУдалитьИрина, разберёшься потихоньку. Не всё сразу. Заканчивай дела текущее. Хотя их век не переделать.
ОтветитьУдалить