<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>

.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: right;
  background-repeat: no-repeat;
  transition: 1s linear;
}
.inverted-1:hover {  
  background-position:left;
}
 
.inverted-2 {
  background:
    conic-gradient(from -60deg, #fff 120deg,#0000 0),
    conic-gradient(from 120deg, #fff 120deg,#000  0), 
    conic-gradient(from -60deg, #000 120deg,#0000 0),
    conic-gradient(from 120deg, #000 120deg,#0000 0);
  -webkit-background-clip: text,text,padding-box,padding-box;
  background-clip: text,text,padding-box,padding-box;
  background-size: 100% 200%;
  background-position: bottom,top;
  background-repeat: no-repeat;
  transition:0.5s;
}
.inverted-2:hover {  
  background-position: top, bottom;
}
   
.inverted-3 {
  background:
    radial-gradient(circle 30px at 50% 75%, #fff 95%, #000),
    radial-gradient(circle 30px at 50% 75%, #000 95%, #0000),
    #000;
  -webkit-background-clip: text,padding-box,text;
          background-clip: text,padding-box,text;
  background-size: 100% 200%;
  background-position: top;
  background-repeat: repeat-x;
  transition: 0.3s,background-position 0.3s 0.3s;
}
.inverted-3:hover {  
  background-size: 15% 200%;
  background-position: bottom;
  transition: 0.3s,background-size 0.3s 0.3s;
 }

.inverted-4 {
  background:
    conic-gradient(from -45deg at 50% calc(5*100%/6),#fff 90deg, #000  0) calc(0*100%/3) var(--_d, 100%),
    conic-gradient(from -45deg at 50% calc(5*100%/6),#000 90deg, #ffff 0) calc(0*100%/3) var(--_d, 100%),
    conic-gradient(from -45deg at 50% calc(4*100%/6),#fff 90deg, #000  0) calc(1*100%/3) var(--_d, 100%),
    conic-gradient(from -45deg at 50% calc(4*100%/6),#000 90deg, #ffff 0) calc(1*100%/3) var(--_d, 100%),
    conic-gradient(from -45deg at 50% calc(3*100%/6),#fff 90deg, #000  0) calc(2*100%/3) var(--_d, 100%),
    conic-gradient(from -45deg at 50% calc(3*100%/6),#000 90deg, #ffff 0) calc(2*100%/3) var(--_d, 100%),
    conic-gradient(from -45deg at 50% calc(2*100%/6),#fff 90deg, #000  0) calc(3*100%/3) var(--_d, 100%),
    conic-gradient(from -45deg at 50% calc(2*100%/6),#000 90deg, #ffff 0) calc(3*100%/3) var(--_d, 100%);
  -webkit-background-clip: text, padding-box;
          background-clip: text, padding-box;
  background-size: calc(100%/4) 600%;
  background-repeat: no-repeat;
  transition: 1s linear;
}
.inverted-4:hover {
  --_d: 0%;
}
 
.inverted-5 {
  background:
    conic-gradient(from -135deg, #fff 0 90deg, #000 0),
    conic-gradient(from -135deg, #000 0 90deg, #ffff 0);
  -webkit-background-clip: text,padding-box;
  background-clip: text,padding-box;
  background-size: 200% 100%;
  background-position: right;
  transition: 0.5s;
}
.inverted-5:hover {  
  background-position: center;
 }
  
.inverted-6 {
  background:
    conic-gradient(            #fff 0 90deg, #fff0 0) bottom left,
    conic-gradient(            #000 0 90deg, #fff0 0) bottom left,
    conic-gradient(from  90deg,#fff 0 90deg, #fff0 0) top left,
    conic-gradient(from  90deg,#000 0 90deg, #fff0 0) top left,
    conic-gradient(from 180deg,#fff 0 90deg, #fff0 0) top right,
    conic-gradient(from 180deg,#000 0 90deg, #fff0 0) top right,
    conic-gradient(from -90deg,#fff 0 90deg, #fff0 0) bottom right,
    conic-gradient(from -90deg,#000 0 90deg, #fff0 0) bottom right,
    #000;
  -webkit-background-clip:text,padding-box;
          background-clip:text,padding-box;
  background-size: 202% 202%;
  transition: 0.5s;
}
.inverted-6:hover {  
  background-position: center;
 }
  
.inverted-7 {    
  padding:8px;
  color:#0000;
  background:
    radial-gradient(50% 100% at bottom, #fff 97%, #000),
    radial-gradient(50% 100% at bottom, #000 97%, #0000),
    #000;
  -webkit-background-clip: text,padding-box,text;
          background-clip: text,padding-box,text;
  background-size: 0% 0%;
  background-position: bottom;
  background-repeat: no-repeat;
  transition: 0.5s;
}
.inverted-7:hover {  
  background-size: 110% 60%;
 }
   
.inverted-8 {
  background:
    repeating-linear-gradient(-45deg, #fff 0 15px, #000  0 30px),
    repeating-linear-gradient(-45deg, #000 0 15px, #0000 0 30px),
    #000;
  -webkit-background-clip: text,padding-box,text;
          background-clip: text,padding-box,text;
  background-size: 500px 500px;
  background-position: left 0 top -500px;
  background-repeat: no-repeat;
  transition: 0.5s linear;
}
.inverted-8:hover {  
  background-position:left -100px top -400px;
 }

/**/
[class] {    
  padding:8px;
  color:#0000;
  display:inline-block;
  font-weight: bold;
  vertical-align: middle;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
}

body {
  text-align:center;
}