鼠标悬停效果八

 

<div class="d-1">1. Hover me </div>
<div class="d-2">2. Hover me </div>
<div class="d-3">3. Hover me </div>
<div class="d-4">4. Hover me </div>
<style>
.d-1 {
   --d:14px;
   
   padding: 8px 8px 8px calc(8px + var(--d));
   background: linear-gradient(rgba(255,255,255,0.4) 0 0) left/var(--d) 100% no-repeat;
   clip-path: polygon(var(--d) 3px,var(--d) 0,100% 0,100% 100%,var(--d) 100%,var(--d) calc(100% - 3px));
   transform: perspective(1000px) rotateY(0deg);
   transition: 0.4s,color 0.4s 0.4s,background-color 0.4s 0.4s;
 }
 .d-1:hover {
   background-color: #000;
   color: #fff;
   clip-path: polygon(0px 3px,var(--d) 0,100% 0,100% 100%,var(--d) 100%,0  calc(100% - 3px));
   transform: perspective(1000px) rotateY(40deg)