跳动的球和跳动的文字

最新推荐文章于 2022-10-08 21:54:09 发布

掠影浮华

最新推荐文章于 2022-10-08 21:54:09 发布

阅读量290

点赞数 1

分类专栏：学习文章标签： css animation

本文链接：https://blog.csdn.net/weixin_44088986/article/details/87774169

版权

学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.div {
				width: 200px;
				height: 30px;
				background-color: rgb(200, 200, 200, 0.6);
				margin: auto;
				margin-top:100px;
			}
			
			.div p:nth-of-type(1) {
				display: inline-block;
				position: relative;
				animation: jump 2s infinite;
			}
			
			.div p:nth-of-type(2) {
				display: inline-block;
				position: relative;
				animation: jump 2s .2s infinite;
			}
			
			.div p:nth-of-type(3) {
				display: inline-block;
				position: relative;
				animation: jump 2s .4s infinite;
			}
			
			.div p:nth-of-type(4) {
				display: inline-block;
				position: relative;
				animation: jump 2s .6s infinite;
			}
			
			.div p:nth-of-type(5) {
				display: inline-block;
				position: relative;
				animation: jump 2s .8s infinite;
			}
			
			.div p:nth-of-type(6) {
				display: inline-block;
				position: relative;
				animation: jump 2s 1s infinite;
			}
			
			.div p:nth-of-type(7) {
				display: inline-block;
				position: relative;
				animation: jump 2s 1.2s infinite;
			}
			
			.div p:nth-of-type(8) {
				display: inline-block;
				position: relative;
				animation: jump 2s 1.4s infinite;
			}
			
			@keyframes jump {
				0% {
					bottom: 0;
				}
				50% {
					bottom: 15px;
				}
				100% {
					bottom: 0;
				}
			}
			
			.boder {
				width: 200px;
				height: 200px;
				border-radius: 50%;
				Background-image: radial-gradient(at top,blue,black);
				animation: jump_1 2s infinite ease-in-out;
				position: relative;
				margin: auto;
				margin-top: 200px;
			}
			
			@keyframes jump_1 {
				0% {
					bottom: 0;
				}
				50% {
					bottom: 200px;
				}
				100% {
					bottom: 0;
				}
			}
			
			.shadow {
				width: 200px;
				height: 50px;
				background-color: rgb(204, 204, 204);
				border-radius: 50%;
				position: relative;
				animation: zoom 2s infinite;
				margin: auto;
			}
			
			@keyframes zoom {
				0% {
					width: 100px;
					height: 30px;
				}
				50% {
					width: 30px;
					height: 5px;
				}
				100% {
					width: 100px;
					height: 30px;
				}
			}
		</style>
	</head>

	<body>
		<div class="div">
			<p>正</p>
			<p>在</p>
			<p>加</p>
			<p>载</p>
			<p>中</p>
			<p>.</p>
			<p>.</p>
			<p>.</p>
		</div>
		<div class="boder">
		</div>
		<div class="shadow">
		</div>
	</body>

</html>

掠影浮华

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
跳动的球和跳动的文字

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; * { margin: 0; padding: 0;
复制链接

扫一扫