CSS聚光灯文字(无图片版)

Welcome to my admin site!

 

 

 

  <h1 data-spotlight="Welcome to my admin site!">Welcome to my admin site!</h1>

<style>
  h1{
    font-size: 70px;
    color: white;
    padding: 0;
    margin: 0;
    position: absolute;
    letter-spacing: -0.3rem;
  }
  h1::after {
    content: attr(data-spotlight);
    color: lightskyblue;
    position: absolute;
    top:0;
    left:0;
    clip-path: ellipse(100px 100px at 0% 50%);
    animation: spotlight 5s infinite;
  }
  @keyframes spotlight{
    0% {
      clip-path: ellipse(100px 100px at 0% 50%)
    }
    50% {
      clip-path: ellipse(100px 100px at 100% 50%)
    }
    100% {
      clip-path: ellipse(100px 100px at 0% 50%)
    }
  }
</style>

 

上一篇:cv2.ellipse()


下一篇:Direct2D (8) : 透明色