鼠标悬停效果七

 

<h3 class="hover">Hover Me</h3>

<style>
body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
  align-items: center;
}


h3 {
  font-family: system-ui, sans-serif;
  font-size: 4rem;
  margin:0;
  cursor: pointer;
  padding: 0 .1em;
}



.hover {
  border: 8px solid;
  border-image: repeating-linear-gradient(135deg,#F8CA00 0 10px,#E97F02 0 20px,#BD1550 0 30px) 8;
  -webkit-mask: 
    conic-gradient(from 180deg at top 8px right 8px, #0000 90deg,#000 0)
     var(--_i,200%) 0  /200% var(--_i,8px) border-box no-repeat,
    conic-gradient(at bottom 8px left  8px,  #0000 90deg,#000 0)
     0   var(--_i,200%)/var(--_i,8px) 200% border-box no-repeat,
    linear-gradient(#000 0 0) padding-box no-repeat;
  transition: .3s, -webkit-mask-position .3s .3s;
}
.hover:hover {
  --_i: 100%;
  color: #CC333F;
  transition: .3s, -webkit-mask-size .3s .3s;
}



</style>