当前位置：网站首页>Mouse over effect 9

Mouse over effect 9

2022-07-01 02:38:00 【Ziwei front end】

<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

原网站

版权声明
本文为[Ziwei front end]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/182/202207010230388632.html