В данном посте приведены различные эффекты с текстом.
Мигающий текст
<span class="blink_me">Мигающий текст</span>
скрипт
function blinker() {
$('.blink_me').fadeOut(500);
$('.blink_me').fadeIn(500);
}
setInterval(blinker, 1000);
Повторяющийся эффект animate
Делаем любой эффект animate повторяющимся на объекте (тексте)
jQuery(document).ready(function(){
setTimeout(function run() {
jQuery('.page-id-18 #header-contact .phone').addClass('animated tada');
setTimeout(function () {
jQuery('.page-id-18 #header-contact .phone').removeClass('animated tada');
}, 1000);
setTimeout(run, 4000); // Интервал повторения
}, 2000); // Первый интервал срабатывания
});
Буквица на чистейшем CSS
Если предположить что основной текст заключен в тэг с id #post-content, то буквицу у первого абзаца можно сделать с помощью двух псевдоэлементов:
#post-content p:first-child:first-letter {
color: #0990dd;
font-size: 6rem;
float: left;
font-weight: 600;
margin: -40px 15px -45px 0;
}
Не тестировал, правда, в разных браузерах..
Градиент на тексте
.coming-soon {
font-size: 10rem;
color: #a421c1;
background: linear-gradient(45deg, #8216b1 33%, #c25181 66%, #cd1483);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Coming soon!
Также можно сделать вместо градиента изображение:
.coming-soon-img {
font-size: 10rem;
color: #a421c1;
background-image: url('/wp-content/uploads/2017/06/fire-smoke.jpg');
background-size: cover;
background-position: bottom;
font-weight: 600;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Coming soon!
Сияющий текст
.text-shine {
color: #ff7700;
font-weight: 600;
display: inline-block;
font-size: 2rem;
-webkit-mask-image: linear-gradient(-75deg, rgba(245,166,97,.6) 30%, #f5a661 50%, rgba(245,166,97,.6) 70%) !important;
-webkit-mask-size: 200%;
animation: shine 2s linear infinite;
}
@keyframes shine {
from { -webkit-mask-position: 150%; }
to { -webkit-mask-position: -50%; }
}
TEXT SHINE
