В данном посте приведены различные эффекты с текстом.
Мигающий текст
<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