Задать вопрос
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 комментариев
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
Верстальщик HTML
MST
от 450 $
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать обработчик данных из форм обратной связи для сайта
27 дек. 2024, в 10:34
1000 руб./за проект
Правки по сайту WordPress + WooCommerce
27 дек. 2024, в 09:38
6000 руб./за проект
2D-анимация в формате SVG для размещения на сайт
27 дек. 2024, в 09:01
2000 руб./за проект
Ещё заказы