十行css实现探照灯动效悬疑效果拉满闲话不多说，上图(效果是动态的，由于点赞关注收藏的人太少没钱开会员，大家脑补吧)：

闲话不多说，上图(效果是动态的，由于点赞关注收藏的人太少没钱开会员，大家脑补吧)：
在这里插入图片描述

首先写出html，html中引入了一个样式表。

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <link rel="stylesheet" href="./index.css" />
	...
  </head>
  <body>
    <div class="bar">
      <div class="text">
        A fronte praecipitium a tergo lupi.Bis dat qui cito Altissima quaeque flumina minimo sono labi. Amor est vitae essentia. Ars est celare artem. De minimis non curat praetor
        Cogito ergo sum.  De minimis non curat praetor Altissima quaeque flumina minimo sono labi.  
        A fronte praecipitium a tergo lupi.Bis dat qui cito Altissima quaeque flumina minimo sono labi.
        A fronte praecipitium a tergo lupi.Bis dat qui cito Altissima quaeque flumina minimo sono labi.
      </div>
    </div>
  </body>
</html>

然后我们在样式表中书写需要的样式。
主要的部分是黑色背景布和内部的字体。

.bar {
  background: black;
  font-size: 30px;
  width: 600px;
  height: 300px;
  padding: 20px;
}

.text {
  background-image: url("circle.png");
  font-family: fantasy;
  font-weight: bold;
  background-position: -200px -200px;
  background-size: 150px 150px;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

现在图片的效果已经出来了，我们使用动画给一点动态的效果。

.text {
  ...
  animation: searchlight 8s linear infinite;
}

@keyframes searchlight {
  0% {
    background-position: 30px 30px;
  }

  40% {
    background-position: 180px 150px ;
  }

  50% {
    background-position: 300px 100px;
  }

  53% {
    background-position: 300px 30px;
  }

  56% {
    background-position: 250px 80px;
  }

  70% {
    background-position: 200px 100px;
  }
  100% {
    background-position: 30px 30px;
  }
}

有不懂得地方欢迎私信我。

十行css实现探照灯动效 悬疑效果拉满

十行css实现探照灯动效悬疑效果拉满