当前位置：网站首页>Mouse over effect IV

Mouse over effect IV

2022-07-01 02:38:00 【Ziwei front end】

Code display

<div class="inverted-1">1. Hover me </div>
<div class="inverted-2">2. Hover me </div>
<div class="inverted-3">3. Hover me </div>
<div class="inverted-4">4. Hover me </div>
<div class="inverted-5">5. Hover me </div>
<div class="inverted-6">6. Hover me </div>
<div class="inverted-7">7. Hover me </div>
<div class="inverted-8">8. Hover me </div>

<style>
.inverted-1 {
  background:
    linear-gradient(black 50%, #fff 0) 0 var(--_d, 0) /100% 200% no-repeat,
    linear-gradient(#0000 50%, #000 0) 0 var(--_d, 0) /100% 200% no-repeat;
  -webkit-background-clip: text,padding-box;
          background-clip: text,padding-box;
  transitio

原网站

版权声明
本文为[Ziwei front end]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/182/202207010230388937.html