CSS动画特效之 字节跳动

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

CSS动画特效之 字节跳动


<!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>
 


————————————————
上一篇:css 控制列表布局


下一篇:CSS选取第一个、最后一个、偶数、奇数、第n个标签元素