CSS打造的动感loading效果

本文将推荐一款纯CSS打造的动感loading效果，做轻应用或游戏时常常能用得到。

本效果的实现不需要用到任何图片，让我们一起看下代码。

HTML代码：

<div id="container" class="loader">
  <div class="round0 init"></div>
  <div class="round1"></div>
  <div class="round2"></div>
  <div class="round3"></div>
  <div class="round4"></div>
  <div class="round5"></div>
  <div class="round6"></div>
  <div class="round7"></div>
  <div class="round8"></div>
  <div class="round9"></div>
  <div class="round10"></div>
</div>

CSS代码：

html,body{
  margin:0;
  padding:0;
  background:#32ce55;
  position:absolute;
  width:100%;
  height:100%;
}
 
.loader{
  position:absolute;
  width:100px;
  height:100px;
  /*background:rgba(20,20,20,0.5);
  border-radius:50px;*/
  left:50%;
  top:50%;
  margin-top:-50px;
  margin-left:-50px;
}
 
.loader>div{
  position:absolute;
  width:20px;
  height:20px;
  border-radius:15px;
  background:white;
  left:50%;
  top:50%;
  margin-top:-10px;
  margin-left:-10px;
}
 
.loader>div:not(.init){
  width:0px;
  height:0px;
  margin:0px;
  animation-duration: 2.7s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
 
.loader>.round1{
  animation-name: round1;
  animation-delay:0s;
}
 
.loader>.round2{
  animation-name:round2;
  animation-delay:.1s;
}
 
.loader>.round3{
  animation-name:round3;
  animation-delay:.2s;
}
 
.loader>.round4{
  animation-name:round4;
  animation-delay:.3s;
}
 
.loader>.round5{
  animation-name:round5;
  animation-delay:.4s;
}
 
.loader>.round6{
  animation-name:round6;
  animation-delay:.5s;
}
 
.loader>.round7{
  animation-name:round7;
  animation-delay:.9s;
}
 
.loader>.round8{
  animation-name:round8;
  animation-delay:.8s;
}
 
.loader>.round9{
  animation-name:round9;
  animation-delay:.7s;
}
 
.loader>.round10{
  animation-name:round10;
  animation-delay:.6s;
}
 
@keyframes round1
{
  0%, 55%, 100% {
    margin:0px;
    width:0px;
    height:0px;
  }
  5%, 50% {
    margin-left:-10px;
    margin-top:-50px;
    width:20px;
    height:20px;
  }
}
 
@keyframes round2
{
  0%, 55%, 100% {
    margin:0px;
    width:0px;
    height:0px;
  }
  5%, 50% {
    margin-left:14px;
    margin-top:-43px;
    width:20px;
    height:20px;
  }
}
 
@keyframes round3
{
  0%, 55%, 100% {
    margin:0px;
    width:0px;
    height:0px;
  }
  5%, 50% {
    margin-left:29px;
    margin-top:-24px;
    width:20px;
    height:20px;
  }
}
 
@keyframes round4
{
  0%, 55%, 100% {
    margin:0px;
    width:0px;
    height:0px;
  }
  5%, 50% {
    margin-left:29px;
    margin-top:0px;
    width:20px;
    height:20px;
  }
}
 
@keyframes round5
{
  0%, 55%, 100% {
    margin:0px;
    width:0px;
    height:0px;
  }
  5%, 50% {
    margin-left:15px;
    margin-top:22px;
    width:20px;
    height:20px;
  }
}
 
@keyframes round6
{
  0%, 55%, 100% {
    margin:0px;
    width:0px;
    height:0px;
  }
  5%, 50% {
    margin-left:-10px;
    margin-top:30px;
    width:20px;
    height:20px;
  }
}
 
@keyframes round7
{
  0%, 55%, 100% {
    margin:0px;
    width:0px;
    height:0px;
  }
  5%, 50% {
    margin-left:-34px;
    margin-top:-43px;
    width:20px;
    height:20px;
  }
}
 
@keyframes round8
{
  0%, 55%, 100% {
    margin:0px;
    width:0px;
    height:0px;
  }
  5%, 50% {
    margin-left:-49px;
    margin-top:-24px;
    width:20px;
    height:20px;
  }
}
 
@keyframes round9
{
  0%, 55%, 100% {
    margin:0px;
    width:0px;
    height:0px;
  }
  5%, 50% {
    margin-left:-49px;
    margin-top:0px;
    width:20px;
    height:20px;
  }
}
 
@keyframes round10
{
  0%, 55%, 100% {
    margin:0px;
    width:0px;
    height:0px;
  }
  5%, 50% {
    margin-left:-35px;
    margin-top:22px;
    width:20px;
    height:20px;
  }
}
Javascript代码：

!
function() {
	function e(e, r) {
		return [].slice.call((r || document).querySelectorAll(e))
	}
	if (window.addEventListener) {
		var r = window.StyleFix = {
			link: function(e) {
				try {
					if ("stylesheet" !== e.rel || e.hasAttribute("data-noprefix")) return
				} catch(t) {
					return
				}
				var n,
				i = e.href || e.getAttribute("data-href"),
				a = i.replace(/[^\/]+$/, ""),
				o = (/^[a-z]{3,10}:/.exec(a) || [""])[0],
				s = (/^[a-z]{3,10}:\/\/[^\/]+/.exec(a) || [""])[0],
				l = /^([^?]*)\??/.exec(i)[1],
				u = e.parentNode,
				p = new XMLHttpRequest;
				p.onreadystatechange = function() {
					4 === p.readyState && n()
				},
				n = function() {
					var t = p.responseText;
					if (t && e.parentNode && (!p.status || p.status < 400 || p.status > 600)) {
						if (t = r.fix(t, !0, e), a) {
							t = t.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,
							function(e, r, t) {
								return /^([a-z]{3,10}:|#)/i.test(t) ? e: /^\/\//.test(t) ? 'url("' + o + t + '")': /^\//.test(t) ? 'url("' + s + t + '")': /^\?/.test(t) ? 'url("' + l + t + '")': 'url("' + a + t + '")'
							});
							var n = a.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g, "\\$1");
							t = t.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)" + n, "gi"), "$1")
						}
						var i = document.createElement("style");
						i.textContent = t,
						i.media = e.media,
						i.disabled = e.disabled,
						i.setAttribute("data-href", e.getAttribute("href")),
						u.insertBefore(i, e),
						u.removeChild(e),
						i.media = e.media
					}
				};
				try {
					p.open("GET", i),
					p.send(null)
				} catch(t) {
					"undefined" != typeof XDomainRequest && (p = new XDomainRequest, p.onerror = p.onprogress = function() {},
					p.onload = n, p.open("GET", i), p.send(null))
				}
				e.setAttribute("data-inprogress", "")
			},
			styleElement: function(e) {
				if (!e.hasAttribute("data-noprefix")) {
					var t = e.disabled;
					e.textContent = r.fix(e.textContent, !0, e),
					e.disabled = t
				}
			},
			styleAttribute: function(e) {
				var t = e.getAttribute("style");
				t = r.fix(t, !1, e),
				e.setAttribute("style", t)
			},
			process: function() {
				e("style").forEach(StyleFix.styleElement),
				e("[style]").forEach(StyleFix.styleAttribute)
			},
			register: function(e, t) { (r.fixers = r.fixers || []).splice(void 0 === t ? r.fixers.length: t, 0, e)
			},
			fix: function(e, t, n) {
				for (var i = 0; i < r.fixers.length; i++) e = r.fixers[i](e, t, n) || e;
				return e
			},
			camelCase: function(e) {
				return e.replace(/-([a-z])/g,
				function(e, r) {
					return r.toUpperCase()
				}).replace("-", "")
			},
			deCamelCase: function(e) {
				return e.replace(/[A-Z]/g,
				function(e) {
					return "-" + e.toLowerCase()
				})
			}
		}; !
		function() {
			setTimeout(function() {},
			10),
			document.addEventListener("DOMContentLoaded", StyleFix.process, !1)
		} ()
	}
} (),
function(e) {
	function r(e, r, n, i, a) {
		if (e = t[e], e.length) {
			var o = RegExp(r + "(" + e.join("|") + ")" + n, "gi");
			a = a.replace(o, i)
		}
		return a
	}
	if (window.StyleFix && window.getComputedStyle) {
		var t = window.PrefixFree = {
			prefixCSS: function(e, n) {
				var i = t.prefix;
				if (t.functions.indexOf("linear-gradient") > -1 && (e = e.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/gi,
				function(e, r, t, n) {
					return r + (t || "") + "linear-gradient(" + (90 - n) + "deg"
				})), e = r("functions", "(\\s|:|,)", "\\s*\\(", "$1" + i + "$2(", e), e = r("keywords", "(\\s|:)", "(\\s|;|\\}|$)", "$1" + i + "$2$3", e), e = r("properties", "(^|\\{|\\s|;)", "\\s*:", "$1" + i + "$2:", e), t.properties.length) {
					var a = RegExp("\\b(" + t.properties.join("|") + ")(?!:)", "gi");
					e = r("valueProperties", "\\b", ":(.+?);",
					function(e) {
						return e.replace(a, i + "$1")
					},
					e)
				}
				return n && (e = r("selectors", "", "\\b", t.prefixSelector, e), e = r("atrules", "@", "\\b", "@" + i + "$1", e)),
				e = e.replace(RegExp("-" + i, "g"), "-"),
				e = e.replace(/-\*-(?=[a-z]+)/gi, t.prefix)
			},
			property: function(e) {
				return (t.properties.indexOf(e) ? t.prefix: "") + e
			},
			value: function(e) {
				return e = r("functions", "(^|\\s|,)", "\\s*\\(", "$1" + t.prefix + "$2(", e),
				e = r("keywords", "(^|\\s)", "(\\s|$)", "$1" + t.prefix + "$2$3", e)
			},
			prefixSelector: function(e) {
				return e.replace(/^:{1,2}/,
				function(e) {
					return e + t.prefix
				})
			},
			prefixProperty: function(e, r) {
				var n = t.prefix + e;
				return r ? StyleFix.camelCase(n) : n
			}
		}; !
		function() {
			var e = {},
			r = [],
			n = getComputedStyle(document.documentElement, null),
			i = document.createElement("div").style,
			a = function(t) {
				if ("-" === t.charAt(0)) {
					r.push(t);
					var n = t.split("-"),
					i = n[1];
					for (e[i] = ++e[i] || 1; n.length > 3;) {
						n.pop();
						var a = n.join("-");
						o(a) && -1 === r.indexOf(a) && r.push(a)
					}
				}
			},
			o = function(e) {
				return StyleFix.camelCase(e) in i
			};
			if (n.length > 0) for (var s = 0; s < n.length; s++) a(n[s]);
			else for (var l in n) a(StyleFix.deCamelCase(l));
			var u = {
				uses: 0
			};
			for (var p in e) {
				var f = e[p];
				u.uses < f && (u = {
					prefix: p,
					uses: f
				})
			}
			t.prefix = "-" + u.prefix + "-",
			t.Prefix = StyleFix.camelCase(t.prefix),
			t.properties = [];
			for (var s = 0; s < r.length; s++) {
				var l = r[s];
				if (0 === l.indexOf(t.prefix)) {
					var c = l.slice(t.prefix.length);
					o(c) || t.properties.push(c)
				}
			}
			"Ms" != t.Prefix || "transform" in i || "MsTransform" in i || !("msTransform" in i) || t.properties.push("transform", "transform-origin"),
			t.properties.sort()
		} (),
		function() {
			function e(e, r) {
				return i[r] = "",
				i[r] = e,
				!!i[r]
			}
			var r = {
				"linear-gradient": {
					property: "backgroundImage",
					params: "red, teal"
				},
				calc: {
					property: "width",
					params: "1px + 5%"
				},
				element: {
					property: "backgroundImage",
					params: "#foo"
				},
				"cross-fade": {
					property: "backgroundImage",
					params: "url(a.png), url(b.png), 50%"
				}
			};
			r["repeating-linear-gradient"] = r["repeating-radial-gradient"] = r["radial-gradient"] = r["linear-gradient"];
			var n = {
				initial: "color",
				"zoom-in": "cursor",
				"zoom-out": "cursor",
				box: "display",
				flexbox: "display",
				"inline-flexbox": "display",
				flex: "display",
				"inline-flex": "display",
				grid: "display",
				"inline-grid": "display",
				"min-content": "width"
			};
			t.functions = [],
			t.keywords = [];
			var i = document.createElement("div").style;
			for (var a in r) {
				var o = r[a],
				s = o.property,
				l = a + "(" + o.params + ")"; ! e(l, s) && e(t.prefix + l, s) && t.functions.push(a)
			}
			for (var u in n) {
				var s = n[u]; ! e(u, s) && e(t.prefix + u, s) && t.keywords.push(u)
			}
		} (),
		function() {
			function r(e) {
				return a.textContent = e + "{}",
				!!a.sheet.cssRules.length
			}
			var n = {
				":read-only": null,
				":read-write": null,
				":any-link": null,
				"::selection": null
			},
			i = {
				keyframes: "name",
				viewport: null,
				document: 'regexp(".")'
			};
			t.selectors = [],
			t.atrules = [];
			var a = e.appendChild(document.createElement("style"));
			for (var o in n) {
				var s = o + (n[o] ? "(" + n[o] + ")": ""); ! r(s) && r(t.prefixSelector(s)) && t.selectors.push(o)
			}
			for (var l in i) {
				var s = l + " " + (i[l] || ""); ! r("@" + s) && r("@" + t.prefix + s) && t.atrules.push(l)
			}
			e.removeChild(a)
		} (),
		t.valueProperties = ["transition", "transition-property"],
		e.className += " " + t.prefix,
		StyleFix.register(t.prefixCSS)
	}
} (document.documentElement);

转载请注明出处 AE博客|墨渊 » CSS打造的动感loading效果