css3动画之字节跳动

最新推荐文章于 2023-05-07 16:03:57 发布

ZhangSir8

最新推荐文章于 2023-05-07 16:03:57 发布

阅读量452

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/zhangsir8/article/details/101363754

版权

css3 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

在这里插入图片描述


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			body{
				background-color: #2d303a;
			}
			div{
				text-align: center;
				margin: 400px auto;
			}
			span{
				position: relative;
				font: normal 500 6rem 'Varela Round', sans-serif;
				color: white;
				animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
				top: 0px;
			}
			span:nth-child(1) {
			  animation-delay: 0s;
			}
			span:nth-child(2) {
			  animation-delay: 0.0833333333s;
			}
			span:nth-child(3) {
			  animation-delay: 0.1666666667s;
			}
			span:nth-child(4) {
			  animation-delay: 0.25s;
			}
			span:nth-child(5) {
			  animation-delay: 0.3333333333s;
			}
			span:nth-child(6) {
			  animation-delay: 0.4166666667s;
			}
			span:nth-child(7) {
			  animation-delay: 0.520s;
			}
			@keyframes bounce {
			  0% {
			    top: 0;
			    text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
			  }
			  100% {
			    top: -1em;
			    text-shadow: rgba(255, 255, 255, 0.9) 0 1em 0.35em;
			  }
			}
		</style>
		
	</head>
	<body>
		<div>
			<span >注</span>
			<span >定</span>
			<span >孤</span>
			<span >独</span>
			<span >终</span>
			<span >老</span>
		</div>
	</body>
</html>

ZhangSir8

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ b...
复制链接

扫一扫