CSS效果-武穆逸仙

<html>
	<head>
		<style>
			*{
			margin:0;
			padding:0;
			box-sizing:border-box;
			}
			body{
			height:100vh;
			background-color:#1d1c1c;
			display:flex;
			}
			.yyf-tx-content{
			margin:auto;
			color:#fff;
			font-size:60px;
			font-weight:bolder;
			position:relative;
			white-space:nowrap;
			overflow:hidden;
			}
			.yyf-tx-content::before{
			content:"为天地立心 为生民立命 为往圣继绝学 为万世开太平";
			color:06ee99;
			position:absolute;
			left:0;
			top:0;
			width:5px;
			white-space:nowrap;
			overflow:hidden;
			border-right:5px solid #06ee99;
			animation:yyf-animate 6s linear infinite;
			filter:drop-shadow(0 0 50px #06ee99);
			}
			
			@keyframes yyf-animate{
			0%{
			width:0;
			}
			100%{
			width:100%;
			}
			}
		</style>
	</head>
	<body>
		<div class="yyf-tx-content">为天地立心 为生民立命 为往圣继绝学 为万世开太平</div>
	</body>
</html>

博主的文章没有高度、深度和广度，只是凑字数。利用读书、参考、引用、抄袭、复制和粘贴等多种方式打造成自己的纯镀 24k 文章！如若有侵权，请联系博主删除。

☆ END ☆

武穆逸仙

喜欢就点个赞吧

CSS效果

扫描/识别二维码阅读全文