css动画，小球运动

最新推荐文章于 2024-06-26 09:26:11 发布

logical_thinking

最新推荐文章于 2024-06-26 09:26:11 发布

阅读量1.3k

点赞数

分类专栏： css基础盒知识文章标签：前端 html css 青少年编程 html5

本文链接：https://blog.youkuaiyun.com/logical_thinking/article/details/126675067

版权

css基础盒知识专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了如何利用CSS动画实现小球的运动效果。通过定义关键帧@keyframes，设置不同时间段内小球的运动状态，实现小球在X轴和Y轴上的方向变化。文章鼓励读者通过实践和调试来熟悉CSS动画的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

随着用户的需求，以及为提升用户体验今天我们讲利用css制作动画

提示：以下是本篇文章正文内容，下面案例可供参考

一、定义关键帧

这里用到了animation：名时间；动画后面的是运动方式、循环否后面的具体内容请自己调试，这样可以更加熟悉。

@keyframes 名

其中0%，10% 是时间段表示在这个时间段做的事情这个时间段的时间是由animation的时间控制的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrapper{
				width: 200px;
				height: 200px;
				background-color: red;
				animation: mybox 8s ease infinite ;
			}
			
			@keyframes mybox{
				0%,10%{
				  transform: translateX(0);	
				}
					
				25%,35%{
				  transform: translateX(200px);
				}
				
				50%,65%{
				   transform: translateX(400px);
				}
				75%,90%{
					transform: translateX(600px);
				}

				100%{
					transform: translateX(800px);
				}
			}
		</style>
	</head>
	<body>
		<div class="wrapper"></div>
	</body>

二、小球运动

小球这里用的思路是：

当小球运动到一定的距离开始改变运动的方向 X轴，Y轴的方向

<<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				background-color: black;
			}
			.wrapper{
				width: 100px;
				height: 100px;
				/* 圆角边框 */
				border-radius: 50%;
				/* 径向渐变 */
				background: radial-gradient(circle farthest-side at center,white,grey);
				/* animation: 名字 时间 匀速  往返  无限循环 */
				animation: mybox 8s linear alternate infinite;
			}
			
			@keyframes mybox{
				0%{
					transform: translate(0,0);
				}
				25%{
					transform: translate(500px,0);
				}
				50%{
					transform: translate(500px,500px);
				}
				75%{
					transform: translate(0,500px);
				}
				100%{
					transform: translate(0,0);
				}
			}
		</style>
	</head>
	<body>
		<div class="wrapper"></div>
	</body>
</html>