CSS动画特效之字节跳动

最新推荐文章于 2023-03-01 14:36:00 发布

回收旧老婆

最新推荐文章于 2023-03-01 14:36:00 发布

阅读量526

点赞数 1

分类专栏：前端

原文链接：https://blog.csdn.net/weixin_44285674/article/details/101173311

版权

前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

在这里插入图片描述


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			body{
				background-color: lightcoral;
				
			}
			div{
				text-align: center;
				margin: 200px auto;
			}
			span{
				position: relative;
				text-align: center;
				color: white;
				font-size: 42px;
				animation: letter 1s cubic-bezier(0.1,0.5,0.2,1) infinite alternate;
                top: 0px;
				
			}
			span:nth-child(1){
				animation-delay: 0s;
			}
			span:nth-child(2){
				animation-delay: 0.1s;
			}
			span:nth-child(3){
				animation-delay: 0.2s;
			}
			span:nth-child(4){
				animation-delay: 0.3s;
			}
			span:nth-child(5){
				animation-delay: 0.4s;
			}
			span:nth-child(6){
				animation-delay: 0.5s;
			}
			span:nth-child(7){
				animation-delay: 0.6s;
			}
			span:nth-child(8){
				animation-delay: 0.7s;
			}
			
			@keyframes letter{
				from{
					top: 0px;
					text-shadow: blanchedalmond 0 0 0.05em;
				}
				to{
					top: 30px;
					text-shadow: blanchedalmond 0 1em 0.2em;
				}
			}
		</style>
	</head>
	<body>
		<div>
			<span>欢</span>
			<span>迎</span>
			<span>来</span>
			<span>到</span>
			<span>回收旧老婆</span>
			<span>的</span>
			<span>博</span>
			<span>客</span>
			
		</div>
	</body>
</html>
 


————————————————

回收旧老婆

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS动画特效之字节跳动

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> body{ background-color: lightcoral; } div{ text-al...
复制链接

扫一扫