当前位置：网站首页>鼠标悬停效果五

鼠标悬停效果五

2022-07-01 02:31:00 【紫微前端】

<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:
    radial-gradient(circle closest-side,#fff 97%,#000 ) ,
    radial-gradient(circle closest-side,#000 97%,#0000 );
  -webkit-background-clip: text,padding-box;
          background-clip: text,padding-box;
  background-size: 230% 100%;
  background-position

原网站

版权声明
本文为[紫微前端]所创，转载请带上原文链接，感谢
https://liuhao.blog.csdn.net/article/details/125537214