方块和圆形跳动正在加载中

首先我们先看一下效果如下：


HTML部分如下：

<div class="box">
		<span class="a one"></span>
		<span class="b one"></span>
		<span class="c one"></span>
		<span class="d one"></span>
		<span class="e one"></span>
		<span class="f one"></span>
		<span class="g one"></span>
		<span class="h one"></span>
		<span class="i one"></span>
	</div>

一个大的div里面九个span标签，分别给他们 一个相同的类和一个不相同的类。
CSS部分如下:

body{
			background: #252A34;
		}
		.box{
			margin: 300px  auto;
			width: 500px;
		}
		.one{
			height: 30px;
			width: 30px;
			display: inline-block;
			animation:change 1s infinite;
			margin-left: 20px;
		}
		@keyframes change{
			50%{
				transform: rotate(180deg);
				transform: translateY(180px);
				border-radius: 50%;
			}
			100%{
				transform: rotate(360deg);
				transform: translateY(0px);
				border-radius: 0%;
			}
		}
		.a{
			background:rgba(241,193,6,1.00);
			animation-delay: 0.1s;
		}
		.b{
			background: rgba(15,193,79,1.00);
			animation-delay: 0.2s;
		}
		.c{
			background:rgba(241,193,6,1.00);
			animation-delay: 0.3s;
		}
		.d{
			background: rgba(15,193,79,1.00);
			animation-delay: 0.4s;
		}
		.e{
			background:rgba(241,193,6,1.00);
			animation-delay: 0.5s;
		}
		.f{
			background: rgba(15,193,79,1.00);
			animation-delay: 0.6s;
		}
		.g{
			background:rgba(241,193,6,1.00);
			animation-delay: 0.7s;
		}
		.h{
			background: rgba(15,193,79,1.00);
			animation-delay: 0.8s;
		}
		.i{
			background:rgba(241,193,6,1.00);
			animation-delay: 0.9s;
		}	
		

这里给大家解说一下：
rotate：旋转
translate：位移

关键帧的创建：
0%和 100%之间可以创建多个百分比，分别给每个百分比中给需要有动画
效果的元素加上不同的样式；
0%和 100%可以使用关键词 from 和 to 来表示。

本文地址：https://blog.csdn.net/weixin_55108422/article/details/113997044