css3各种动画效果合集（二）_animation: animate 5s linear infinite;-CSDN博客

本文链接：https://blog.csdn.net/qq_53541336/article/details/133065095

本文介绍了几种独特的网页加载动画设计，包括双重加载环、3D旋转方块、彩虹渐变、花瓣旋转、快递包裹滑动以及六边形滑动动画，展示了HTML和CSS在创建动态视觉体验中的应用。

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

七、双重加载环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双重加载环</title>
		<style>
			body{
				margin: 0;
				padding: 0;
				background: #060606;
			}
			.loader{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 200px;
				height: 200px;
				box-sizing: border-box;
				background: #000;
			}
			.loader .face{
				position: absolute;
				border: 2px solid #121212;
			}
			.loader .face.face1{
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				background: #090909;
				box-shadow: 0 0 10px rgba(0, 0, 0, 1);
				border-radius: 50%;
				border-left: 2px solid #ffff00;
				border-top: 2px solid #ffff00;
				animation: animate 3s linear infinite;
			}
			.loader .face.face2{
				left: 30px;
				right: 30px;
				top: 30px;
				bottom: 30px;
				background: #090909;
				box-shadow: 0 0 10px rgba(0, 0, 0, 1);
				border-radius: 50%;
				border-right: 2px solid #03a9f4;
				border-bottom: 2px solid #03a9f4;
				animation: animate 3s linear reverse infinite;
			}
			.loader .face .circle{
				position: absolute;
				top: calc(50% - 1px);
				left: 50%;
				width: 50%;
				height: 2px;
				/* background: #fff; */
				transform-origin: left;
			}
			.loader .face.face1 .circle{
				transform: rotate(-45deg);
			}
			.loader .face.face2 .circle{
				transform: rotate(-45deg);
			}
			.loader .face .circle::before{
				content: '';
				position: absolute;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: #fff;
				top: -4px;
				right: -6px;
			}
			.loader .face.face1 .circle::before{
				background: #ffff00;
				box-shadow: 0 0 20px #ff0,
				            0 0 40px #ff0,
							0 0 60px #ff0,
							0 0 80px #ff0,
							0 0 100px #ff0,
							0 0 0 5px rgba(255,255, 0, .1);
			}
			.loader .face.face2 .circle::before{
				background: #03a9f4;
				box-shadow: 0 0 20px #03a9f4,
				            0 0 40px #03a9f4,
							0 0 60px #03a9f4,
							0 0 80px #03a9f4,
							0 0 100px #03a9f4,
							0 0 0 5px rgba(3,169, 244, .1);
			}
			@keyframes animate{
				0%{
					transform: rotate(0deg);
				}
				100%{
					transform: rotate(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="loader">
			<div class="face face1">
				<div class="circle"></div>
			</div>
			<div class="face face2">
				<div class="circle"></div>
			</div>
		</div>
	</body>
</html>

八、3d旋转方块加载动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3d旋转方块加载动画</title>
		<style>
			body{
				margin: 0;
				padding: 0;
				background: #000;
			}
			.loader{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 150px;
				height: 150px;
				perspective: 600px;
				/* background: #fff; */
			}
			.loader span{
				position: absolute;
				border: 10px solid #262626;
				border-radius: 4px;
			}
			.loader span::before{
				content: '';
				position: absolute;
				top: -10px;
				left: -10px;
				width: 10px;
				height: 50%;
				background: #ff0;
			}
			.loader span::after{
				content: '';
				position: absolute;
				bottom: -10px;
				right: -10px;
				width: 10px;
				height: 50%;
				background: #ff0;
			}
			.loader span:nth-child(1){
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				animation: animate 8s linear infinite;
			}
			@keyframes animate{
				0%{
					transform: rotateY(0deg);
				}
				100%{
					transform: rotateY(360deg);
				}
			}
			.loader span:nth-child(2){
				top: 20px;
				left: 20px;
				right: 20px;
				bottom: 20px;
				animation: animate 4s linear infinite;
			}
			.loader span:nth-child(3){
				top: 40px;
				left: 40px;
				right: 40px;
				bottom: 40px;
				animation: animate 2s linear infinite;
			}
		</style>
	</head>
	<body>
		<div class="loader">
			<span></span>
			<span></span>
			<span></span>
			<!-- <span></span> -->
		</div>
	</body>
</html>

九、彩虹加载页面效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>彩虹加载页面效果</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.center{
				position: absolute;
				top: 40%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
			ul{
				margin: 0;
				padding: 0;
				position: relative;
				width: 400px;
				height: 240px;
				overflow: hidden;
				border-bottom: 1px solid rgba(0, 0, 0, .2);
			}
			ul li{
				list-style: none;
				border-radius: 50%;
				border: 15px solid #000;
				position: absolute;
				top: 100%;
				left: 50%;
				border-bottom-color: transparent !important; 
				border-left-color: transparent !important;
				box-shadow: 0 0 10px rgba(0,0,0,.5);
				animation: animate 5s infinite alternate;
				transform: translate(-50%,-50%);
			}
			ul li:nth-child(1){
				width: 60px;
				height: 60px;
				border-color: #f00;
				animation-delay: .2s;
			}
			ul li:nth-child(2){
				width: 90px;
				height: 90px;
				border-color:  #FF7D00;
				animation-delay: .4s;
			}
			ul li:nth-child(3){
				width: 120px;
				height: 120px;
				border-color: #FFFF00 ;
				animation-delay: .6s;
			}
			ul li:nth-child(4){
				width: 150px;
				height: 150px;
				border-color: #00FF00;
				animation-delay: .8s;
			}
			ul li:nth-child(5){
				width: 180px;
				height: 180px;
				border-color: #00FFFF;
				animation-delay: 1s;
			}
			ul li:nth-child(6){
				width: 210px;
				height: 210px;
				border-color: #0000FF;
				animation-delay: 1.2s;
			}
			ul li:nth-child(7){
				width: 240px;
				height: 240px;
				border-color:  #FF00FF ;
				animation-delay: 1.4s;
			}
			@keyframes animate{
				0%{
					transform: translate(-50%,-50%) rotate(-45deg);
				}
				100%{
					transform: translate(-50%,-50%) rotate(315deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="center">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>

十、花瓣旋转动画效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>花瓣旋转动画效果</title>
		<style>
			ul{
				margin: 0;
				padding: 0;
				position: absolute;
				left: 40%;
				top: 20%;
			}
			ul li{
				list-style: none;
				width: 200px;
				height: 200px;
				position: absolute;
				top: 0;
				border-radius: 50%;
				box-shadow: 0 0 5px rgba(0, 0, 0, .2);
				transform-origin: bottom center;
				animation:  animate 7s linear infinite;
			}
			@keyframes animate{
				0%{
					transform: rotate(0deg);
				}
				100%{
					transform: rotate(360deg);
				}
			}
			ul li:nth-child(1){
				background: rgba(214, 188, 211, .8);
				animation-delay: 0s;
			}
			ul li:nth-child(2){
				background: rgba(216, 134, 167, .8);
				animation-delay: 1s;
			}
			ul li:nth-child(3){
				background: rgba(177, 101, 212, .8);
				animation-delay: 2s;
			}
			ul li:nth-child(4){
				background: rgba(123, 77, 197, .8);
				animation-delay: 3s;
			}
			ul li:nth-child(5){
				background: rgba(253, 143, 232, .8);
				animation-delay: 4s;
			}
			ul li:nth-child(6){
				background: rgba(251, 125, 195, .8);
				animation-delay:5s ;
			}
			ul li:nth-child(7){
				background: rgba(229, 103, 154, .8);
				animation-delay: 6s;
			}
			ul li:nth-child(8){
				background: rgba(48, 83, 144, .4);
				animation-delay: 7s;
			}
		</style>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>

十一、运行快递包裹动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>运行快递包裹动画</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			body{
				margin: 0;
				padding: 0;
			}
			.center{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 300px;
				height: 60px;
				border: 4px solid #262626;
				border-radius: 4px;
				overflow: hidden;
			}
			.center :hover ul li{
				animation: animate .5s linear infinite;
			}
			ul{
				display: flex;
				background: #ff0;
				height: 60px;
				width: 400px;
			}
			ul li{
				position: relative;
				list-style: none;
				height: 30px;
				width: 20px;
				background: #262626;
				margin: 0 10px;
				transform: skewX(35deg);
				animation: animate 2s linear infinite;
			}
			ul li::before{
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				background: #000;
				top: 100%;
				transform: skew(126deg) translateX(-21px);
			}
			@keyframes animate{
				0%{
					transform: skewX(35deg) translateX(-100px);
				}
				100%{
					transform: skewX(35deg) translateX(0px);
				}
			}
		</style>
	</head>
	<body>
		<div class="center">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>

十二、滑动六边形加载动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>滑动六边形加载动画</title>
		<style>
			body{
				margin: 0;
				padding: 0;
				background: #7a139a;
			}
			.center{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 400px;
				height: 50px;
				background: transparent;
				border-bottom: 4px solid #fff;
				animation: animateLine 4s linear infinite;
			}
			.hexagon{
				position: absolute;
				left: 0;
				bottom: 12px;
				width: 50px;
				height: 30px;
				background: #fff;
				animation: animate 5s linear infinite;
			}
			.hexagon::before{
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: #fff;
				transform: rotate(60deg);
			}
			.hexagon::after{
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: #fff;
				transform: rotate(-60deg);
			}
			@keyframes animate{
				0%{
					transform: rotate(0deg);
					left: 0;
				}
				50%{
					transform: rotate(360deg);
					left: calc(100% - 50px);
				}
				100%{
					transform: rotate(0deg);
					left: 0;
				}
			}
			@keyframes animateLine{
				0%{
					transform: translate(-50%,-50%) rotate(30deg);
				}
				25%{
					transform: translate(-50%,-50%) rotate(0deg);
				}
				50%{
					transform: translate(-50%,-50%) rotate(-30deg);
				}
				75%{
					transform: translate(-50%,-50%) rotate(0deg);
				}
				100%{
					transform: translate(-50%,-50%) rotate(30deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="center">
			<div class="hexagon"></div>
		</div>
	</body>
</html>