十行css实现探照灯动效 悬疑效果拉满
Posted 前端呆头鹅
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了十行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实现探照灯动效 悬疑效果拉满的主要内容，如果未能解决你的问题，请参考以下文章