Меняющийся цвет текста
Предлагаю простой и очень красивый CSS эффект для Bootstrap с помощью которого можно менять цвет текста. Сгодится для выделения логотипа или привлечению пользователя к определённому разделу или рекламе. В эффекте меняющего цвет текста используется изменение положения цветного изображения свойством background-position и animation.
CSS код:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<style>
/* demo background */
body{
background: #DAE2F8; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #D6A4A4, #DAE2F8); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #D6A4A4, #DAE2F8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
/* style effect */
.changing-text {
background:#e9e3dd;
background-image: url('dаta:image/jpeg;base64,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');
background-repeat: no-repeat;
background-size: 200% 200%;
background-position: 100% 100%;
-webkit-animation: changing 3s linear infinite;
-ms-animation: changing 3s linear infinite;
animation: changing 3s linear infinite;
-webkit-background-clip: text;
color:transparent;
position:relative;
}
changing-text:nth-of-type(2){
text-shadow:none;
z-index:2;
position:absolute;
top:-139px;
left:-1px;
}
@-webkit-keyframes changing {
0% { background-position: 0 0; }
25% { background-position: 100% 0; }
50% { background-position: 100% 100%; }
75% { background-position: 0 100%; }
100% { background-position: 0 0; }
}
@-ms-keyframes changing {
0% { background-position: 0 0; }
25% { background-position: 100% 0; }
50% { background-position: 100% 100%; }
75% { background-position: 0 100%; }
100% { background-position: 0 0; }
}
@keyframes changing {
0% { background-position: 0 0; }
25% { background-position: 100% 0; }
50% { background-position: 100% 100%; }
75% { background-position: 0 100%; }
100% { background-position: 0 0; }
}
</style>
HTML код:
<div class="container"><div class="row"><div class="col-xs-12">
<h1 class="text-center changing-text">FOR-WEB.RU </h1>
</div></div></div>
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
Bootstrap bootstrap CSS CSS3 DLE dle fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Wordpress Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг меню модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Как задать ширину 100 пикселей в CSS