Emlog&Wordpress 纯CSS loading特效篇&7

  • 内容
  • 相关
GIF.gif

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>css3唯美loading加载动画特效</title>

<style type="text/css">
	@-webkit-keyframes rotate-animation {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
	@keyframes rotate-animation {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
	@-webkit-keyframes move-animation {
		0% {
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}
		25% {
			-webkit-transform: translate(-64px, 0);
			transform: translate(-64px, 0);
		}
		75% {
			-webkit-transform: translate(32px, 0);
			transform: translate(32px, 0);
		}
		100% {
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}
	}
	@-webkit-keyframes move-animation {
	 0%{
		 -webkit-transform: translate(0,0);
		 transform: translate(0,0);
	 }
	 }
	@keyframes move-animation {
		0% {
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}
		25% {
			-webkit-transform: translate(-64px, 0);
			transform: translate(-64px, 0);
		}
		75% {
			-webkit-transform: translate(32px, 0);
			transform: translate(32px, 0);
		}
		100% {
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}
	}
	body {
		background-color: #F5F5F5;
	}

	.circle-loader {
		display: block;
		width: 64px;
		height: 64px;
		margin-left: -32px;
		margin-top: -32px;
		position: absolute;
		left: 50%;
		top: 30%;
		-webkit-transform-origin: 16px 16px;
		transform-origin: 16px 16px;
		-webkit-animation: rotate-animation 5s infinite;
		animation: rotate-animation 5s infinite;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
	}
	.circle-loader .circle {
		-webkit-animation: move-animation 2.5s infinite;
		animation: move-animation 2.5s infinite;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
		position: absolute;
		left: 50%;
		top: 50%;
	}
	.circle-loader .circle-line {
		width: 64px;
		height: 24px;
		position: absolute;
		top: 4px;
		left: 0;
		-webkit-transform-origin: 4px 4px;
		transform-origin: 4px 4px;
	}
	.circle-loader .circle-line:nth-child(0) {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	.circle-loader .circle-line:nth-child(1) {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.circle-loader .circle-line:nth-child(2) {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	.circle-loader .circle-line:nth-child(3) {
		-webkit-transform: rotate(270deg);
		transform: rotate(270deg);
	}
	.circle-loader .circle-line .circle:nth-child(1) {
		width: 8px;
		height: 8px;
		top: 50%;
		left: 50%;
		margin-top: -4px;
		margin-left: -4px;
		border-radius: 4px;
		-webkit-animation-delay: -0.3s;
		animation-delay: -0.3s;
	}
	.circle-loader .circle-line .circle:nth-child(2) {
		width: 16px;
		height: 16px;
		top: 50%;
		left: 50%;
		margin-top: -8px;
		margin-left: -8px;
		border-radius: 8px;
		-webkit-animation-delay: -0.6s;
		animation-delay: -0.6s;
	}
	.circle-loader .circle-line .circle:nth-child(3) {
		width: 24px;
		height: 24px;
		top: 50%;
		left: 50%;
		margin-top: -12px;
		margin-left: -12px;
		border-radius: 12px;
		-webkit-animation-delay: -0.9s;
		animation-delay: -0.9s;
	}
	.circle-loader .circle-blue {
		background-color: #1f4e5a;
	}
	.circle-loader .circle-red {
		background-color: #ff5955;
	}
	.circle-loader .circle-yellow {
		background-color: #ffb265;
	}
	.circle-loader .circle-green {
		background-color: #00a691;
	}

</style>
</head>
<body>
<div class="page">
<div class="circle-loader">
	<div class="circle-line">
		<div class="circle circle-blue"></div>
		<div class="circle circle-blue"></div>
		<div class="circle circle-blue"></div>
	</div>
	<div class="circle-line">
		<div class="circle circle-yellow"></div>
		<div class="circle circle-yellow"></div>
		<div class="circle circle-yellow"></div>
	</div>
	<div class="circle-line">
		<div class="circle circle-red"></div>
		<div class="circle circle-red"></div>
		<div class="circle circle-red"></div>
	</div>
	<div class="circle-line">
		<div class="circle circle-green"></div>
		<div class="circle circle-green"></div>
		<div class="circle circle-green"></div>
	</div>
</div>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>
Emlog&Wordpress 纯CSS loading特效篇&7
         本页正文内容约4461个文字
         本文标签:

         版权声明:若无特殊注明,本文皆为“懒人的小窝”原创,转载请保留文章出处。

         本文链接:https://suppore.cn/427.html   百度已收录

发表评论

电子邮件地址不会被公开, 推荐使用QQ快速评论!

评论

7条评论
  1. avatar

    黄衫飞白马 Lv.5 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows Windows 回复

    (๑•̀ω•́๑)害羞

    湖南省益阳市 移动

    1. avatar

      黄衫飞白马 Lv.5 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows Windows 回复

      献花

      湖南省益阳市 移动

      1. avatar

        黄衫飞白马 Lv.5 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows Windows 回复

        吐舌

        湖南省益阳市 移动

        1. avatar

          黄衫飞白马 Lv.5 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows Windows 回复

          打哈气

          湖南省益阳市 移动

          1. avatar

            妹纸 Lv.2 Chrome 47.0.2526.108 Chrome 47.0.2526.108 Windows 8.1 x64 Edition Windows 8.1 x64 Edition 回复

            我能说完全不知从那里下手吗

            广东省广州市荔湾区 /海珠区电信

            1. avatar

              文栋说自媒体 Lv.2 Chrome 50.0.2661.102 Chrome 50.0.2661.102 Windows Windows 回复

              你的加载效果真的很赞,哈哈

              甘肃省兰州市 电信

              1. 小陈 Lv.6 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows Windows 回复

                回复了文栋说自媒体:还可以吧。 表情

                      湖南省邵阳市 电信

            00:00 / 00:00
            顺序播放