跳动的舞蹈

最新推荐文章于 2024-01-15 14:14:16 发布
beichen3997
最新推荐文章于 2024-01-15 14:14:16 发布
阅读量194
点赞数 2
分类专栏： css JS
本文链接：https://blog.csdn.net/beichen3997/article/details/102748150
版权
JS 同时被 2 个专栏收录
29 篇文章 0 订阅
订阅专栏
css
18 篇文章 1 订阅
订阅专栏
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* ----- Loader ----- */
			body {
				background-color: #55c1FA;
			}

			.loader-wrapper {
				width: 148px;
				height: 100px;
				position: absolute;
				margin: -50px 0 0 -74px;
				left: 50%;
				top: 60%;
			}

			.loader {
				width: 148px;
				height: 100px;
				top: 0;
				left: 0;
				position: absolute;
			}

			.loader:after {
				content: "";
				top: auto;
				position: absolute;
				display: block;
				animation: shadow 1.2s infinite linear;
				-moz-animation: shadow 1.2s infinite linear;
				bottom: 0em;
				left: 0;
				height: .25em;
				width: 1em;
				border-radius: 50%;
				background-color: #034466;
				opacity: 0.3;
			}

			.roller,
			.roller:last-child {
				width: 70px;
				height: 70px;
				position: absolute;
				top: 0;
				left: 0;
				-webkit-animation: rollercoaster 1.2s infinite linear;
				-webkit-transform: rotate(135deg);
				-moz-animation: rollercoaster 1.2s infinite linear;
				-moz-transform: rotate(135deg);
				animation: rollercoaster 1.2s infinite linear;
				transform: rotate(135deg);
			}

			.roller:last-child {
				left: auto;
				right: 0;
				-webkit-transform: rotate(-45deg);
				-webkit-animation: rollercoaster2 1.2s infinite linear;
				-moz-transform: rotate(-45deg);
				-moz-animation: rollercoaster2 1.2s infinite linear;
				transform: rotate(-45deg);
				animation: rollercoaster2 1.2s infinite linear;
			}

			.roller:before,
			.roller:last-child:before {
				content: "";
				display: block;
				width: 15px;
				height: 15px;
				background: #000;
				border-radius: 50%;
			}

			@-webkit-keyframes rollercoaster {
				0% {
					-webkit-transform: rotate(135deg);
				}

				8% {
					-webkit-transform: rotate(240deg);
				}

				20% {
					-webkit-transform: rotate(300deg);
				}

				40% {
					-webkit-transform: rotate(380deg);
				}

				45% {
					-webkit-transform: rotate(440deg);
				}

				50% {
					-webkit-transform: rotate(495deg);
					opacity: 1;
				}

				50.1% {
					-webkit-transform: rotate(495deg);
					opacity: 0;
				}

				100% {
					-webkit-transform: rotate(495deg);
					opacity: 0;
				}
			}

			@-webkit-keyframes rollercoaster2 {
				0% {
					opacity: 0;
				}

				49.9% {
					opacity: 0;
				}

				50% {
					opacity: 1;
					-webkit-transform: rotate(-45deg);
				}

				58% {
					-webkit-transform: rotate(-160deg);
				}

				70% {
					-webkit-transform: rotate(-240deg);
				}

				80% {
					-webkit-transform: rotate(-300deg);
				}

				90% {
					-webkit-transform: rotate(-340deg);
				}

				100% {
					-webkit-transform: rotate(-405deg);
				}
			}

			@-webkit-keyframes shadow {
				0% {
					opacity: .3;
					-webkit-transform: translateX(65px) scale(0.5, 0.5);
				}

				8% {
					-webkit-transform: translateX(30px) scale(2, 2);
				}

				13% {
					-webkit-transform: translateX(0px) scale(1.3, 1.3);
				}

				30% {
					-webkit-transform: translateX(-15px) scale(0.5, 0.5);
					opacity: 0.1;
				}

				50% {
					-webkit-transform: translateX(60px) scale(1.2, 1.2);
					opacity: 0.3;
				}

				60% {
					-webkit-transform: translateX(130px) scale(2, 2);
					opacity: 0.05;
				}

				65% {
					-webkit-transform: translateX(145px) scale(1.2, 1.2);
				}

				80% {
					-webkit-transform: translateX(120px) scale(0.5, 0.5);
					opacity: 0.1;
				}

				90% {
					-webkit-transform: translateX(80px) scale(0.8, 0.8);
				}

				100% {
					-webkit-transform: translateX(60px);
					opacity: 0.3;
				}
			}

			/* Moz */
			@-moz-keyframes rollercoaster {
				0% {
					-moz-transform: rotate(135deg);
				}

				8% {
					-moz-transform: rotate(240deg);
				}

				20% {
					-moz-transform: rotate(300deg);
				}

				40% {
					-moz-transform: rotate(380deg);
				}

				45% {
					-moz-transform: rotate(440deg);
				}

				50% {
					-moz-transform: rotate(495deg);
					opacity: 1;
				}

				50.1% {
					-moz-transform: rotate(495deg);
					opacity: 0;
				}

				100% {
					-moz-transform: rotate(495deg);
					opacity: 0;
				}
			}

			@-moz-keyframes rollercoaster2 {
				0% {
					opacity: 0;
				}

				49.9% {
					opacity: 0;
				}

				50% {
					opacity: 1;
					-moz-transform: rotate(-45deg);
				}

				58% {
					-moz-transform: rotate(-160deg);
				}

				70% {
					-moz-transform: rotate(-240deg);
				}

				80% {
					-moz-transform: rotate(-300deg);
				}

				90% {
					-moz-transform: rotate(-340deg);
				}

				100% {
					-moz-transform: rotate(-405deg);
				}
			}

			@-moz-keyframes shadow {
				0% {
					opacity: .3;
					-moz-transform: translateX(65px) scale(0.5, 0.5);
				}

				8% {
					-moz-transform: translateX(30px) scale(2, 2);
				}

				13% {
					-moz-transform: translateX(0px) scale(1.3, 1.3);
				}

				30% {
					-moz-transform: translateX(-15px) scale(0.5, 0.5);
					opacity: 0.1;
				}

				50% {
					-moz-transform: translateX(60px) scale(1.2, 1.2);
					opacity: 0.3;
				}

				60% {
					-moz-transform: translateX(130px) scale(2, 2);
					opacity: 0.05;
				}

				65% {
					-moz-transform: translateX(145px) scale(1.2, 1.2);
				}

				80% {
					-moz-transform: translateX(120px) scale(0.5, 0.5);
					opacity: 0.1;
				}

				90% {
					-moz-transform: translateX(80px) scale(0.8, 0.8);
				}

				100% {
					-moz-transform: translateX(60px);
					opacity: 0.3;
				}
			}

			/* No-prefix */
			@keyframes rollercoaster {
				0% {
					transform: rotate(135deg);
				}

				8% {
					transform: rotate(240deg);
				}

				20% {
					transform: rotate(300deg);
				}

				40% {
					transform: rotate(380deg);
				}

				45% {
					transform: rotate(440deg);
				}

				50% {
					transform: rotate(495deg);
					opacity: 1;
				}

				50.1% {
					transform: rotate(495deg);
					opacity: 0;
				}

				100% {
					transform: rotate(495deg);
					opacity: 0;
				}
			}

			@keyframes rollercoaster2 {
				0% {
					opacity: 0;
				}

				49.9% {
					opacity: 0;
				}

				50% {
					opacity: 1;
					transform: rotate(-45deg);
				}

				58% {
					transform: rotate(-160deg);
				}

				70% {
					transform: rotate(-240deg);
				}

				80% {
					transform: rotate(-300deg);
				}

				90% {
					transform: rotate(-340deg);
				}

				100% {
					transform: rotate(-405deg);
				}
			}

			@keyframes shadow {
				0% {
					opacity: .3;
					transform: translateX(65px) scale(0.5, 0.5);
				}

				8% {
					transform: translateX(30px) scale(2, 2);
				}

				13% {
					transform: translateX(0px) scale(1.3, 1.3);
				}

				30% {
					transform: translateX(-15px) scale(0.5, 0.5);
					opacity: 0.1;
				}

				50% {
					transform: translateX(60px) scale(1.2, 1.2);
					opacity: 0.3;
				}

				60% {
					transform: translateX(130px) scale(2, 2);
					opacity: 0.05;
				}

				65% {
					transform: translateX(145px) scale(1.2, 1.2);
				}

				80% {
					transform: translateX(120px) scale(0.5, 0.5);
					opacity: 0.1;
				}

				90% {
					transform: translateX(80px) scale(0.8, 0.8);
				}

				100% {
					transform: translateX(60px);
					opacity: 0.3;
				}
			}

			#loader2:after {
				-webkit-animation-delay: 0.15s;
				animation-delay: 0.15s;
			}

			#loader2 .roller {
				-webkit-animation-delay: 0.15s;
				animation-delay: 0.15s;
			}

			#loader3:after {
				-webkit-animation-delay: 0.3s;
				animation-delay: 0.3s;
			}

			#loader3 .roller {
				-webkit-animation-delay: 0.3s;
				animation-delay: 0.3s;
			}
		</style>

	</head>
	<body>

		<div class="loader-wrapper">
			<div class="loader">
				<div class="roller"></div>
				<div class="roller"></div>
			</div>

			<div id="loader2" class="loader">
				<div class="roller"></div>
				<div class="roller"></div>
			</div>

			<div id="loader3" class="loader">
				<div class="roller"></div>
				<div class="roller"></div>
			</div>
		</div>
	</body>
</html>