杨小杰博客(Youngxj)提供免费教程下载和网站搭建技术教程,主要分享和发布网站源码,致力创造一个高质量网络资源教程的分享平台

CSS打造的动感loading效果

Young小杰2017-2-24 19:01网站搭建(0)1364查询中……小标签: 网站优化 网站搭建教程

css-to-create-dynamic-loading-effect

本文将推荐一款纯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 &amp;&amp; n() }, n = function() { var t = p.responseText; if (t &amp;&amp; e.parentNode &amp;&amp; (!p.status || p.status &lt; 400 || p.status &gt; 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 &amp;&amp; (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 &lt; 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 &amp;&amp; window.getComputedStyle) { var t = window.PrefixFree = { prefixCSS: function(e, n) { var i = t.prefix; if (t.functions.indexOf("linear-gradient") &gt; -1 &amp;&amp; (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 &amp;&amp; (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 &gt; 3;) { n.pop(); var a = n.join("-"); o(a) &amp;&amp; -1 === r.indexOf(a) &amp;&amp; r.push(a) } } }, o = function(e) { return StyleFix.camelCase(e) in i }; if (n.length &gt; 0) for (var s = 0; s &lt; 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 &lt; f &amp;&amp; (u = { prefix: p, uses: f }) } t.prefix = "-" + u.prefix + "-", t.Prefix = StyleFix.camelCase(t.prefix), t.properties = []; for (var s = 0; s &lt; 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) &amp;&amp; e(t.prefix + l, s) &amp;&amp; t.functions.push(a) } for (var u in n) { var s = n[u]; ! e(u, s) &amp;&amp; e(t.prefix + u, s) &amp;&amp; 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) &amp;&amp; r(t.prefixSelector(s)) &amp;&amp; t.selectors.push(o) } for (var l in i) { var s = l + " " + (i[l] || ""); ! r("@" + s) &amp;&amp; r("@" + t.prefix + s) &amp;&amp; t.atrules.push(l) } e.removeChild(a) } (), t.valueProperties = ["transition", "transition-property"], e.className += " " + t.prefix, StyleFix.register(t.prefixCSS) }} (document.documentElement);



源码自行放置,不会的百度!


本文最后更新于2017-2-24,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

发表评论:

手机扫描二维码
阅读体验更佳