css实现彩色方块前后更替loading加载动画效果代码-html代码-BFW代码库

css实现彩色方块前后更替loading加载动画效果代码

代码语言：html

代码描述：css实现彩色方块前后更替loading加载动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
        	margin:0;
        	height:100vh;
        	display:flex;
        	align-items:center;
        	justify-content:center;
        }
        .container {
        	width:8em;
        	height:1em;
        	font-size:35px;
        	display:flex;
        	justify-content:space-between;
        }
        .container span {
        	width:1em;
        	height:1em;
        	--duration:1.5s;
        }
        .girl {
        	animation:slide var(--duration) ease-in-out infinite alternate;
        }
        @keyframes slide {
        	from {
        	transform:translateX(0);
        	filter:brightness(1);
        }
        to {
        	transform:translatex(calc(8em - (1em * 1.25)));
        	filter:brightness(1.45);
        }
        }.boys {
        	width:6em;
        	display:flex;
        	justify-content:space-between;
        }
        .boys span {
        	animation:var(--duration) ease-in-out infinite alternate;
        }
        .boys span:nth-child(1) {
        	animation-name:jump-off-1;
        }
        .boys span:nth-child(2) {
        	animation-name:jump-off-2;
        }
        .boys span:nth-child(3) {
        	animation-name:jump-off-3;
        }
        .boys span:nth-child(4) {
        	animation-name:jump-off-4;
        }
        @keyframes jump-off-1 {
        	0%,15% {
        	transform:rotate(0deg);
        }
        35%,100% {
        	transform-origin:-50% center;
        	transform:rotate(-180deg);
        }
        }@keyframes jump-off-2 {
        	0%,30% {
        	transform:rotate(0deg);
        }
        50%,100% {
        	transform-origin:-50% center;
        	transform:rotate(-180deg);
        }
        }@keyframes jump-off-3 {
        	0%,45% {
        	transform:rotate(0deg);
        }
        65%,100% {
        	transform-origin:-50% center;
        	transform:rotate(-180deg);
        }
        }@keyframes jump-off-4 {
        	0%,60% {
        	transform:rotate(0deg);
        }
        80%,100% {
        	transform-origin:-50% center;
        	transform:rotate(-180deg);
        }
        }.container span::before {
        	content:'';
        	position:absolute;
        	width:inherit;
        	height:inherit;
        	border-radius:15%;
        	box-shadow:0 0 0.1em rgba(0,0,0,0.3);
        }
        .girl::before {
        	background-color:hotpink;
        }
        .boys span::before {
        	background-color:dodgerblue;
        	animation:var(--duration) ease-in-out infinite alternate;
        }
  .........完整代码请登录后点击上方下载按钮下载查看