html+css实现简单的文字上色效果

最新推荐文章于 2023-05-31 16:11:15 发布

程佳豪

最新推荐文章于 2023-05-31 16:11:15 发布

阅读量820

点赞数

本文链接：https://blog.csdn.net/weixin_44860440/article/details/106992786

版权

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字上色效果</title>
</head>
<style type="text/css">
body,p,dl,dd,ul,ol,li,div,h1,h2,h3,h4,h5,h6,form,input,table,tr,td,fieldset,figure{
	margin:0;
	padding:0;
}
.box{
	width:310px;
	height:100%;
	border:1px solid black;
	margin:80px auto;
	padding-left:10px;
	padding-top: 10px;
	padding-bottom:10px;
}
.box p{
	height:35px;
	font-size: 16px;
	line-height:35px;
	position: relative;
	opacity: 0;
	display: table;	
}
.box p span{
	color:#d32af7;
	border-bottom: 3px solid #d32af7;
	position: absolute;
	top:0;
	left:0px;
	width:0;
	white-space: nowrap;
	overflow: hidden;
}
.box p:nth-child(1){
	animation: cx 2s linear forwards;
}
.box p:nth-child(1) span{
	animation: ys 2s 2s linear forwards;
}
.box p:nth-child(2){
	animation: cx 2s 4s linear forwards;
}
.box p:nth-child(2) span{
	animation: ys 2s 6s linear forwards;
}
.box p:nth-child(3){
	animation: cx 2s 8s linear forwards;
}
.box p:nth-child(3) span{
	animation: ys 2s 10s linear forwards;
}
.box p:nth-child(4){
	animation: cx 2s 12s linear forwards;
}
.box p:nth-child(4) span{
	animation: ys 2s 14s linear forwards;
}
.box p:nth-child(5){
	animation: cx 2s 16s linear forwards;
}
.box p:nth-child(5) span{
	animation: ys 2s 18s linear forwards;
}
.box p:nth-child(6){
	animation: cx 2s 20s linear forwards;
}
.box p:nth-child(6) span{
	animation: ys 2s 22s linear forwards;
}
.box p:nth-child(7){
	animation: cx 2s 24s linear forwards;
}
.box p:nth-child(7) span{
	animation: ys 2s 26s linear forwards;
}
.box p:nth-child(8){
	animation: cx 2s 28s linear forwards;
}
.box p:nth-child(8) span{
	animation: ys 2s 30s linear forwards;
}
@keyframes cx{
	0%{
		opacity: 0;
		transform: translateY(-100%);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes ys{
	0%{
		width:0;
	}
	100%{
		width:100%;
	}

</style>
<body>
	<div class="box">
		<p>想要问问你敢不敢<span>想要问问你敢不敢</span></p>
		<p>像你说过那样的爱我<span>像你说过那样的爱我</span></p>
		<p>想要问问你敢不敢<span>想要问问你敢不敢</span></p>
		<p>像我这样为爱痴狂<span>像我这样为爱痴狂</span></p>
		<p>想要问问你敢不敢<span>想要问问你敢不敢</span></p>
		<p>像你说过那样的爱我<span>像你说过那样的爱我</span></p>
		<p>像我这样为爱痴狂<span>像我这样为爱痴狂</span></p>
		<p>到底你会怎么想<span>到底你会怎么想</span></p>
	</div>
</body>
</html>

程佳豪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html+css实现简单的文字上色效果

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>文字上色效果</title></head><style type="text/css">body,p,dl,dd,ul,ol,li,div,h1,h2,h3,h4,h5,h6,form,input,table,tr,td,fieldset,figure{ margin
复制链接

扫一扫