伪元素做一个跳动的方块

最新推荐文章于 2022-12-02 23:19:18 发布

雕琢时光纸戆

最新推荐文章于 2022-12-02 23:19:18 发布

阅读量242

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/TISRNW/article/details/102500702

版权

html 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
				
			}
			html,body{
				height: 100%;
				width: 100%;
				
			}
			body{
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.box{
				height: 200px;
				width: 200px;
				/*background-color: #ffe3d1;*/
				position: relative;
			    perspective: 1200px;
			}
		     .box:before{
		     	height: 100%;
		     	width: 100%;
		     	display: block;
		     	content: '';
		     	background-color: #FFE3D1;
		     	border-radius: 20px;
		     	animation: zhuan1 .5s linear infinite;
		     	
		     }
		     @keyframes zhuan1{
		     	50%{
		     		transform: translateY(18px) rotate(45deg) ;
		     		-webkit-border-bottom-right-radius: 90px;
		     	}
		     	100%{
		     		transform: translateY(0px) rotate(90deg);
		     		-webkit-border-bottom-right-radius: 20px;
		     	}
		     }
		     .box:after{
		     	height: 15%;
		     	width: 100%;
		     	content: '';
		     	background-color: gainsboro;
		     	position: absolute;
		     	top: 220px;
		     	border-radius: 50%;
		     	animation: zhuan2 .5s linear infinite;
		     }
		     @keyframes zhuan2{
		     	50%{
		     		transform: scale(1.2, 1);
		     	}
		     	100%{
		     		transform: scale(1,1);
		     	}
		     }
		</style>
	</head>
	<body>
		<div class="box">
			
		</div>
		
	</body>
</html>