Всем привет Недавно друзья заказывали билет на фестиваль на этом сайте https://bmfest.com/ (не реклама) и показали мне.
Мне очень понравился эффект с заменой цвета текста на гифку и я хочу узнать как это реализовано,желательно с примером.
Заранее спасибо!
Секрет в особом выводе фона и заглушке прорех до момента наведения.
Тогда просто скрыть заглушку и показать что фон вырезан особым свойством (-webkit-background-clip
), хотя делали немного криворукие ребята:
body {
background: black;
}
.bg {
background-image: url(https://bmfest.com/wp-content/themes/bmfest/images/map.jpg);
background-size: cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: white;
animation: animatedBackground 30s linear infinite;
}
@keyframes animatedBackground {
0% {
background-position: 0 0;
}
50% {
background-position: -300px 0;
}
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li span {
font-size: 100pt;
font-weight: 700;
font-family: Impact;
}
.v {
position: absolute;
left: 8px;
cursor: pointer;
z-index: 999;
color: white;
-webkit-text-fill-color: white;
transition: all ease 0.2s;
}
.v:hover {
opacity: 0;
}
<div class='bg'>
<ul>
<li>
<span>Text</span>
<span class='v'>Text</span>
</li>
</ul>
</div>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Имеется блок с вопросом и ответамиПри нажатии на "Добавить вопрос", а затем в новом вопросе "Добавить ответ" - добавляет новый ответ только...
Это фрагмент таблицы с суммами для загрузки в БДПри загрузке (в параметрах хранимой процедуры БД) у каждого банка есть свой параметр, который...
Получаю данные из JSON файла более 3к строк и вывожу на страницу через jsrender, но столкнулся с проблемой, в конечных объектах, в начале у свойств,...
Есть блок по 5 картинками и описанием