css实现文字连续光影效果

最新推荐文章于 2024-06-05 14:45:06 发布

萝卜头不吃萝卜头

最新推荐文章于 2024-06-05 14:45:06 发布

阅读量659

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/SqlloveSyn/article/details/128448629

版权

效果如下：

整个效果就是单个字的发光和熄灭，HTML内这样写：

<div class="text-area">
			<span>文</span>
			<span>字</span>
		    <span>连</span>
		    <span>续</span>
		    <span>光</span>
		    <span>影</span>
		</div>

我们的文字都使用span标签

针对这个标签设置一个颜色

span {
		font-size: 40px;
	    color:#faebdf;
	}

然后再写一个动画

@keyframes shadowing{
			    to{
			        color: #ff0266;
			        text-shadow:1px 0 1px #ff0266;
			    }
			}

这个阴影的话可以根据自己的需要来进行更改里面的值

有了动画后我们运用到span元素里

span {
		font-size: 40px;
	    color:#faebdf;
	    animation:shadowing 1s ease-in-out infinite alternate;
	}

下面要做的就是让span元素延迟

span:nth-child(n + 1){
			    animation-delay:0.2s
			}
			span:nth-child(n + 2){
			    animation-delay:0.4s
			}
			span:nth-child(n + 3){
			    animation-delay:0.6s
			}
			span:nth-child(n + 4){
			    animation-delay:0.8s
			}
			span:nth-child(n + 5){
			    animation-delay:1s
			}
			span:nth-child(n + 6){
			    animation-delay:1.2s
			}

注意延迟的时间是不一样的，到这里就全部完成了，整体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@keyframes shadowing{
			    to{
			        color: #ff0266;
			        text-shadow:1px 0 1px #ff0266;
			    }
			}
			span {
				font-size: 40px;
			    color:#faebdf;
			    animation:shadowing 1s ease-in-out infinite alternate;
			}
			span:nth-child(n + 1){
			    animation-delay:0.2s
			}
			span:nth-child(n + 2){
			    animation-delay:0.4s
			}
			span:nth-child(n + 3){
			    animation-delay:0.6s
			}
			span:nth-child(n + 4){
			    animation-delay:0.8s
			}
			span:nth-child(n + 5){
			    animation-delay:1s
			}
			span:nth-child(n + 6){
			    animation-delay:1.2s
			}
		</style>
	</head>
	<body>
		<div class="text-area">
			<span>文</span>
			<span>字</span>
		    <span>连</span>
		    <span>续</span>
		    <span>光</span>
		    <span>影</span>
		</div>
	</body>
</html>

到这里整个效果就制作完成了，感谢您阅读此文章。