本文将推荐一款纯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;
}
}
js代码：
!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);
源码自行放置，不会的百度！
发表评论：