原 CSS3学习第11篇——综合练习弹跳滚动的小球

本文链接：https://blog.csdn.net/m0_37617778/article/details/85178111

目标：

一个小球从空中落下，然后弹起、落下、弹起落下……，向右滚动，最后停止，根据受力情况的不同进行缩放变形。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3 弹跳的小球</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			width: 100%;
			height: 100%;
		}
		.box{
			width: 100%;
			height: 100%;
			background-color: black;
			position: relative;
			perspective: 1000px;
		}

		.ball{
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background:  -webkit-radial-gradient(25% 25%,farthest-corner,#59F3F1,black);
			position: absolute;
			z-index: 99;
			top: 100px;
			left: 300px;
			text-align:center;
			line-height: 100px;
			font-size: 40px;
			animation:run 10s ease-in-out 1 forwards 0.5s;
		}

		.earth{
			width: 100%;
			height:600px;
			position: fixed;
			top:400px;
			left: 50px;
			background-color:white;
			transform-style: preserve-3d;
			transform: rotateX(90deg) translateY(-300px);
		}

		@keyframes run{
			0%{
				transform: translateY(0px);
			}

			7%{
				transform: translateY(400px) scaleX(1.2);
			}

			15%{
				transform: translateY(50px) scaleY(1.2);
			}

			22%{
				transform: translateY(400px) scaleX(1.1);
			}

			31%{
				transform: translateY(100px) scaleY(1.1);
			}

			40%{
				transform: translateY(400px) scaleX(1.05);;
			}

			50%{
				transform: translateY(200px) scaleY(1.05);
			}

			60%{
				transform: translateY(400px);
			}

			70%{
				transform: translateY(300px);
			}

			85%{
				transform: translateY(400px);
			}

			100%{
				transform: translateY(460px) translateX(400px) rotateZ(180deg) ;
			}
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="ball">^_^</div>
		<div class="earth"></div>
	</div>
</body>
</html>