鼠标悬停效果九

 

<h3 class="hover one">Hover Me</h3>
<h3 class="hover two">Hover Me</h3>
<h3 class="hover three">Hover Me</h3>
<h3 class="hover four">Hover Me</h3>
<h3 class="hover five">Hover Me</h3>
<style>
.hover {
  --c: #1095c1; /* the color */
  --s: .15em;
  
  line-height:1.1em;
  padding-bottom: calc(2.1*var(--s));
  background: 
    conic-gradient(from 135deg at top,var(--c) 90deg,#0000 0) 
      left 0 bottom var(--s)/calc(2*var(--s)) var(--s) repeat-x,
    conic-gradient(from -45deg at bottom,var(--c) 90deg,#0000 0) 
      left var(--s) bottom 0/calc(2*var(--s)) var(--s) repeat-x;
}
.hover:hover {
  color: var(--c);
}

.one {
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gr