CSS动画

最新推荐文章于 2024-08-30 15:33:13 发布

mt-6087

最新推荐文章于 2024-08-30 15:33:13 发布

阅读量37

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_72267895/article/details/131531995

版权

基本的空间移动

<style>
			*{
				margin: 0 auto;
			}
			.f{
				width: 600px;
				height: 600px;
				border: 1px solid #000;
				position: relative;
			}
			.z{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				animation: movel 5s linear 0.3s alternate forwards;
			}
			@keyframes movel {
				0%{
					top: 0;
					left: 0;
				}100%{
					top: 500px;
					left: 500px;
				}
			}
</style>

<div class="f">
			<div class="z"></div>
</div>

效果如下

实现多步移动

只需要修改@keyframes中的内容

@keyframes movel {
				0%{
					top: 0;
					left: 0;
				}20%{
					top: 0;
					left: 500px;
				}40%{
					top: 500px;
					left: 500px;
				}80%{
					top: 500px;
					left: 0;
				}100%{
					top: 0;
					left: 0;
			}

效果如下

还可以进行旋转操作

@keyframes circle {
				from{
					transform: rotate(0deg);
				}to{
					transform: rotate(360deg);
				}
}

通过加工可以实现太极动图

源码如下

<style>
			*{
				margin: 0px auto;
				background-color: gainsboro;
			}
			.fu{
				width: 500px;
				height: 500px;
				/* border: 1px solid black; */
				position: relative;
				/* background-color: gray; */
				animation: circle 2s linear infinite;
			}
			.fu>div{
				position: absolute;
				
			}
			.z1{
				width: 250px;
				height: 500px;
				background-color: black;
				border-radius: 250px 0px 0px 250px;
				
			}
			.z2{
				width: 250px;
				height: 500px;
				background-color: white;
				border-radius: 0px 250px 250px 0px;
				left: 250px;
				
			}
			.z3{
				width: 250px;
				height: 250px;
				background-color: white;
				border-radius: 50%;
				left: 125px;
				z-index: 1;
			}
			.z4{
				width: 250px;
				height: 250px;
				background-color: black;
				border-radius: 50%;
				left: 125px;
				top: 250px;
				z-index: 1;
			}
			.z5{
				width: 80px;
				height: 80px;
				background-color: black;
				border-radius: 50%;
				left: 220px;
				top: 85px;
				z-index: 3;
			}
			.z6{
				width: 80px;
				height: 80px;
				background-color: white;
				border-radius: 50%;
				left: 220px;
				top: 345px;
				z-index: 3;
			}
			@keyframes circle {
				from{
					transform: rotate(0deg);
				}to{
					transform: rotate(360deg);
				}
			}
</style>

	<body>
		<div class="fu">
			<div class="z1"></div>
			<div class="z2"></div>
			<div class="z3"></div>
			<div class="z4"></div>
			<div class="z5"></div>
			<div class="z6"></div>
		</div>
	</body>