Задать вопрос
Dimensi
@Dimensi
Совсем недавно начал познавать верстку.
css

Перекрашивание текста как с помощью маски фотошопа?

Есть сайт acme-world.com, чей он не знаю, но в самом есть кнопка Discover the experience. Так, у меня от нее шок просто, они каким-то образом повторили маску как в фотошопе. Как такое сделать? Я минут 30 сидел, но блин структура какая-та ппц сложная. Заранее спасибо.
  • Вопрос задан
  • 173 просмотра
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
@hoarywolf
Вот набросал за пару минут

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>                                                  
                                                        
<div style="position:relative">                         
        <div style="background-color:#ffc815;color:#000;float:left;width:200px;height:40px;">
                <div style="padding: 10px 20px">Discover the experience</div></div>
        <div id="mask" style="position:absolute;top:0;left:0;width:0px;height:40px;overflow:hidden">
                <div style="background-color:#000;color:#ffc815;float:left;width:200px;height:40px;">
                        <div style="padding: 10px 20px;">Discover the experience</div></div>
        </div>
        <div id="button" style=position:absolute;top:0;left:0;width:200px;height:40px;"></div>
</div>
<script>
$('#button').mouseenter(function(){
        $('#mask').animate({width:200});
}).mouseout(function(){
        $('#mask').animate({width:0});
});;
</script>
</body>
</html>
Ответ написан
6 комментариев
6 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
React разработчик
Uptrade
от 150 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать Telegram mini app
15 апр. 2024, в 22:14
30000 руб./за проект
Необходимо сверстать 1 страницу многостраничника
02 мая 2024, в 22:24
500 руб./за проект
Консультация по рассылкам в ВК
02 мая 2024, в 21:59
15000 руб./за проект
Ещё заказы