HTML5立体圆环旋转动画代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5立体圆环旋转动画代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>HTML5立体圆环旋转动画</title>
  <style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
</style>

    <style>
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  content: "";
}

html,
body {
  height: 100%;
}

body {
  position: relative;
  background: #272727;
  overflow: hidden;
}

.container,
.container * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.container {
  animation: spin 10s linear infinite;
}

.thing {
  width: 15em;
  height: 15em;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.thing:nth-child(1) {
  -moz-box-shadow: inset 10px 0 0 1px #ff4d4d;
  -webkit-box-shadow: inset 10px 0 0 1px #ff4d4d;
  box-shadow: inset 10px 0 0 1px #ff4d4d;
  -moz-transform: rotateZ(0deg) translateY(5em);
  -ms-transform: rotateZ(0deg) translateY(5em);
  -o-transform: rotateZ(0deg) translateY(5em);
  -webkit-transform: rotateZ(0deg) translateY(5em);
  transform: rotateZ(0deg) translateY(5em);
}
.thing:nth-child(2) {
  -moz-box-shadow: inset 10px 0 0 1px #ff774d;
  -webkit-box-shadow: inset 10px 0 0 1px #ff774d;
  box-shadow: inset 10px 0 0 1px #ff774d;
  -moz-transform: rotateZ(14.4deg) translateY(5em);
  -ms-transform: rotateZ(14.4deg) translateY(5em);
  -o-transform: rotateZ(14.4deg) translateY(5em);
  -webkit-transform: rotateZ(14.4deg) translateY(5em);
  transform: rotateZ(14.4deg) translateY(5em);
}
.thing:nth-child(3) {
  -moz-box-shadow: inset 10px 0 0 1px #ffa24d;
  -webkit-box-shadow: inset 10px 0 0 1px #ffa24d;
  box-shadow: inset 10px 0 0 1px #ffa24d;
  -moz-transform: rotateZ(28.8deg) translateY(5em);
  -ms-transform: rotateZ(28.8deg) translateY(5em);
  -o-transform: rotateZ(28.8deg) translateY(5em);
  -webkit-transform: rotateZ(28.8deg) translateY(5em);
  transform: rotateZ(28.8deg) translateY(5em);
}
.thing:nth-child(4) {
  -moz-box-shadow: inset 10px 0 0 1px #ffcd4d;
  -webkit-box-shadow: inset 10px 0 0 1px #ffcd4d;
  box-shadow: inset 10px 0 0 1px #ffcd4d;
  -moz-transform: rotateZ(43.2deg) translateY(5em);
  -ms-transform: rotateZ(43.2deg) translateY(5em);
  -o-transform: rotateZ(43.2deg) translateY(5em);
  -webkit-transform: rotateZ(43.2deg) translateY(5em);
  transform: rotateZ(43.2deg) translateY(5em);
}
.thing:nth-child(5) {
  -moz-box-shadow: inset 10px 0 0 1px #fff84d;
  -webkit-box-shadow: inset 10px 0 0 1px #fff84d;
  box-shadow: inset 10px 0 0 1px #fff84d;
  -moz-transform: rotateZ(57.6deg) translateY(5em);
  -ms-transform: rotateZ(57.6deg) translateY(5em);
  -o-transform: rotateZ(57.6deg) translateY(5em);
  -webkit-transform: rotateZ(57.6deg) translateY(5em);
  transform: rotateZ(57.6deg) translateY(5em);
}
.thing:nth-child(6) {
  -moz-box-shadow: inset 10px 0 0 1px #dbff4d;
  -webkit-box-shadow: inset 10px 0 0 1px #dbff4d;
  box-shadow: inset 10px 0 0 1px #dbff4d;
  -moz-transform: rotateZ(72deg) translateY(5em);
  -ms-transform: rotateZ(72deg) translateY(5em);
  -o-transform: rotateZ(72deg) translateY(5em);
  -webkit-transform: rotateZ(72deg) translateY(5em);
  transform: rotateZ(72deg) translateY(5em);
}
.thing:nth-child(7) {
  -moz-box-shadow: inset 10px 0 0 1px #b0ff4d;
  -webkit-box-shadow: inset 10px 0 0 1px #b0ff4d;
  box-shadow: inset 10px 0 0 1px #b0ff4d;
  -moz-transform: rotateZ(86.4deg) translateY(5em);
  -ms-transform: rotateZ(86.4deg) translateY(5em);
  -o-transform: rotateZ(86.4deg) translateY(5em);
  -webkit-transform: rotateZ(86.4deg) translateY(5em);
  transform: rotateZ(86.4deg) translateY(5em);
}
.thing:nth-child(8) {
  -moz-box-shadow: inset 10px 0 0 1px #86ff4d;
  -webkit-box-shadow: inset 10px 0 0 1px #86ff4d;
  box-shadow: inset 10px 0 0 1px #86ff4d;
  -moz-transform: rotateZ(100.8deg) translateY(5em);
  -ms-transform: rotateZ(100.8deg) translateY(5em);
  -o-transform: rotateZ(100.8deg) translateY(5em);
  -webkit-transform: rotateZ(100.8deg) translateY(5em);
  transform: rotateZ(100.8deg) translateY(5em);
}
.thing:nth-child(9) {
  -moz-box-shadow: inset 10px 0 0 1px #5bff4d;
  -webkit-box-shadow: inset 10px 0 0 1px #5bff4d;
  box-shadow: inset 10px 0 0 1px #5bff4d;
  -moz-transform: rotateZ(115.2deg) translateY(5em);
  -ms-transform: rotateZ(115.2deg) translateY(5em);
  -o-transform: rotateZ(115.2deg) translateY(5em);
  -webkit-transform: rotateZ(115.2deg) translateY(5em);
  transform: rotateZ(115.2deg) translateY(5em);
}
.thing:nth-child(10) {
  -moz-box-shadow: inset 10px 0 0 1px #4dff69;
  -webkit-box-shadow: inset 10px 0 0 1px #4dff69;
  box-shadow: inset 10px 0 0 1px #4dff69;
  -moz-transform: rotateZ(129.6deg) translateY(5em);
  -ms-transform: rotateZ(129.6deg) translateY(5em);
  -o-transform: rotateZ(129.6deg) translateY(5em);
  -webkit-transform: rotateZ(129.6deg) translateY(5em);
  transform: rotateZ(129.6deg) translateY(5em);
}
.thing:nth-child(11) {
  -moz-box-shadow: inset 10px 0 0 1px #4dff94;
  -webkit-box-shadow: inset 10px 0 0 1px #4dff94;
  box-shadow: inset 10px 0 0 1px #4dff94;
  -moz-transform: rotateZ(144deg) translateY(5em);
  -ms-transform: rotateZ(144deg) translateY(5em);
  -o-transform: rotateZ(144deg) translateY(5em);
  -webkit-transform: rotateZ(144deg) translateY(5em);
  transform: rotateZ(144deg) translateY(5em);
}
.thing:nth-child(12) {
  -moz-box-shadow: inset 10px 0 0 1px #4dffbf;
  -webkit-box-shadow: inset 10px 0 0 1px #4dffbf;
  box-shadow: inset 10px 0 0 1px #4dffbf;
  -moz-transform: rotateZ(158.4deg) translateY(5em);
  -ms-transform: rotateZ(158.4deg) translateY(5em);
  -o-transform: rotateZ(158.4deg) translateY(5em);
  -webkit-transform: rotateZ(158.4deg) translateY(5em);
  transform: rotateZ(158.4deg) translateY(5em);
}
.thing:nth-child(13) {
  -moz-box-shadow: inset 10px 0 0 1px #4dffea;
  -webkit-box-shadow: inset 10px 0 0 1px #4dffea;
  box-shadow: inset 10px 0 0 1px #4dffea;
  -moz-transform: rotateZ(172.8deg) translateY(5em);
  -ms-transform: rotateZ(172.8deg) translateY(5em);
  -o-transform: rotateZ(172.8deg) translateY(5em);
  -webkit-transform: rotateZ(172.8deg) translateY(5em);
  transform: rotateZ(172.8deg) translateY(5em);
}
.thing:nth-child(14) {
  -moz-box-shadow: inset 10px 0 0 1px #4deaff;
  -webkit-box-shadow: inset 10px 0 0 1px #4deaff;
  box-shadow: inset 10px 0 0 1px #4deaff;
  -moz-transform: rotateZ(187.2deg) translateY(5em);
  -ms-transform: rotateZ(187.2deg) translateY(5em);
  -o-transform: rotateZ(187.2deg) translateY(5em);
  -webkit-transform: rotateZ(187.2deg) translateY(5em);
  transform: rotateZ(187.2deg) translateY(5em);
}
.thing:nth-child(15) {
  -moz-box-shadow: inset 10px 0 0 1px #4dbfff;
  -webkit-box-shadow: inset 10px 0 0 1px #4dbfff;
  box-shadow: inset 10px 0 0 1px #4dbfff;
  -moz-transform: rotateZ(201.6deg) translateY(5em);
  -ms-transform: rotateZ(201.6deg) translateY(5em);
  -o-transform: rotateZ(201.6deg) translateY(5em);
  -webkit-transform: rotateZ(201.6deg) translateY(5em);
  transform: rotateZ(201.6deg) translateY(5em);
}
.thing:nth-child(16) {
  -moz-box-shadow: inset 10px 0 0 1px #4d94ff;
  -webkit-box-shadow: inset 10px 0 0 1px #4d94ff;
  box-shadow: inset 10px 0 0 1px #4d94ff;
  -moz-transform: rotateZ(216deg) translateY(5em);
  -ms-transform: rotateZ(216deg) translateY(5em);
  -o-transform: rotateZ(216deg) translateY(5em);
  -webkit-transform: rotateZ(216deg) translateY(5em);
  transform: rotateZ(216deg) translateY(5em);
}
.thing:nth-child(17) {
  -moz-box-shadow: inset 10px 0 0 1px #4d69ff;
  -webkit-box-shadow: inset 10px 0 0 1px #4d69ff;
  box-shadow: inset 10px 0 0 1px #4d69ff;
  -moz-transform: rotateZ(230.4deg) translateY(5em);
  -ms-transform: rotateZ(230.4deg) translateY(5em);
  -o-transform: rotateZ(230.4deg) translateY(5em);
  -webkit-transform: rotateZ(230.4deg) translateY(5em);
  transform: rotateZ(230.4deg) translateY(5em);
}
.thing:nth-child(18) {
  -moz-box-shadow: inset 10px 0 0 1px #5b4dff;
  -webkit-box-shadow: inset 10px 0 0 1px #5b4dff;
  box-shadow: inset 10px 0 0 1px #5b4dff;
  -moz-transform: rotateZ(244.8deg) translateY(5em);
  -ms-transform: rotateZ(244.8deg) translateY(5em);
  -o-transform: rotateZ(244.8deg) translateY(5em);
  -webkit-transform: rotateZ(244.8deg) translateY(5em);
  transform: rotateZ(244.8deg) translateY(5em);
}
.thing:nth-child(19) {
  -moz-box-shadow: inset 10px 0 0 1px #864dff;
  -webkit-box-shadow: inset 10px 0 0 1px #864dff;
  box-shadow: inset 10px 0 0 1px #864dff;
  -moz-transform: rotateZ(259.2deg) translateY(5em);
  -ms-transform: rotateZ(259.2deg) translateY(5em);
  -o-transform: rotateZ(259.2deg) translateY(5em);
  -webkit-transform: rotateZ(259.2deg) translateY(5em);
  transform: rotateZ(259.2deg) translateY(5em);
}
.thing:nth-child(20) {
  -moz-box-shadow: inset 10px 0 0 1px #b04dff;
  -webkit-box-shadow: inset 10px 0 0 1px #b04dff;
  box-shadow: inset 10px 0 0 1px #b04dff;
  -moz-transform: rotateZ(273.6deg) translateY(5em);
  -ms-transform: rotateZ(273.6deg) translateY(5em);
  -o-transform: rotateZ(273.6deg) translateY(5em);
  -webkit-transform: rotateZ(273.6deg) translateY(5em);
  transform: rotateZ(273.6deg) translateY(5em);
}
.thing:nth-child(21) {
  -moz-box-shadow: inset 10px 0 0 1px #db4dff;
  -webkit-box-shadow: inset 10px 0 0 1px #db4dff;
  box-shadow: inset 10px 0 0 1px #db4dff;
  -moz-transform: rotateZ(288deg) translateY(5em);
  -ms-transform: rotateZ(288deg) translateY(5em);
  -o-transform: rotateZ(288deg) translateY(5em);
  -webkit-transform: rotateZ(288deg) translateY(5em);
  transform: rotateZ(288deg) translateY(5em);
}
.thing:nth-child(22) {
  -moz-box-shadow: inset 10px 0 0 1px #ff4df8;
  -webkit-box-shadow: inset 10px 0 0 1px #ff4df8;
  box-shadow: inset 10px 0 0 1px #ff4df8;
  -moz-transform: rotateZ(302.4deg) translateY(5em);
  -ms-transform: rotateZ(302.4deg) translateY(5em);
  -o-transform: rotateZ(302.4deg) translateY(5em);
  -webkit-transform: rotateZ(302.4deg) translateY(5em);
  transform: rotateZ(302.4deg) translateY(5em);
}
.thing:nth-child(23) {
  -moz-box-shadow: inset 10px 0 0 1px #ff4dcd;
  -webkit-box-shadow: inset 10px 0 0 1px #ff4dcd;
  box-shadow: inset 10px 0 0 1px #ff4dcd;
  -moz-transform: rotateZ(316.8deg) translateY(5em);
  -ms-transform: rotateZ(316.8deg) translateY(5em);
  -o-transform: rotateZ(316.8deg) translateY(5em);
  -webkit-transform: rotateZ(316.8deg) translateY(5em);
  transform: rotateZ(316.8deg) translateY(5em);
}
.thing:nth-child(24) {
  -moz-box-shadow: inset 10px 0 0 1px #ff4da2;
  -webkit-box-shadow: inset 10px 0 0 1px #ff4da2;
  box-shadow: inset 10px 0 0 1px #ff4da2;
  -moz-transform: rotateZ(331.2deg) translateY(5em);
  -ms-transform: rotateZ(331.2deg) translateY(5em);
  -o-transform: rotateZ(331.2deg) translateY(5em);
  -webkit-transform: rotateZ(331.2deg) translateY(5em);
  transform: rotateZ(331.2deg) translateY(5em);
}
.thing:nth-child(25) {
  -moz-box-shadow: inset 10px 0 0 1px #ff4d77;
  -webkit-box-shadow: inset 10px 0 0 1px #ff4d77;
  box-shadow: inset 10px 0 0 1px #ff4d77;
  -moz-transform: rotateZ(345.6deg) translateY(5em);
  -ms-transform: rotateZ(345.6deg) translateY(5em);
  -o-transform: rotateZ(345.6deg) translateY(5em);
  -webkit-transform: rotateZ(345.6deg) translateY(5em);
  transform: rotateZ(345.6deg) translateY(5em);
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}
@keyframes spin {
  100% {
    -moz-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

</style>

  <script src="js/prefixfree.min.js"></script>

</head>

<body>
  <div class='container'>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
</div>
</body>
</html>

JS代码(prefixfree.min.js):

/** * StyleFix 1.0.3 & PrefixFree 1.0.7 * @author Lea Verou * MIT license */
(function(){
	if(!window.addEventListener){
	return;
}
var self = window.StyleFix ={
	link:function(link){
	try{
	// Ignore stylesheets with data-noprefix attribute as well as alternate stylesheets if(link.rel !== 'stylesheet' || link.hasAttribute('data-noprefix')){
	return;
}
}
catch(e){
	return;
}
var url = link.href || link.getAttribute('data-href'),base = url.replace(/[^\/]+$/,''),base_scheme = (/^[a-z]{
	3,10}
:/.exec(base) || [''])[0],base_domain = (/^[a-z]{
	3,10}
:\/\/[^\/]+/.exec(base) || [''])[0],base_query = /^([^?]*)\??/.exec(url)[1],parent = link.parentNode,xhr = new XMLHttpRequest(),process;
	xhr.onreadystatechange = function(){
	if(xhr.readyState === 4){
	process();
}
}
;
	process = function(){
	var css = xhr.responseText;
	if(css && link.parentNode && (!xhr.status || xhr.status < 400 || xhr.status > 600)){
	css = self.fix(css,true,link);
	// Convert relative URLs to absolute,if needed if(base){
	css = css.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function($0,quote,url){
	if(/^([a-z]{
	3,10}
:|#)/i.test(url)){
	// Absolute & or hash-relative return $0;
}
else if(/^\/\//.test(url)){
	// Scheme-relative // May contain sequences like /../ and /./ but those DO work return 'url("' + base_scheme + url + '")';
}
else if(/^\//.test(url)){
	// Domain-relative return 'url("' + base_domain + url + '")';
}
else if(/^\?/.test(url)){
	// Query-relative return 'url("' + base_query + url + '")';
}
else{
	// Path-relative return 'url("' + base + url + '")';
}
}
);
	// behavior URLs shoudn鈥檛 be converted (Issue #19) // base should be escaped before added to RegExp (Issue #81) var escaped_base = base.replace(/([\\\^\$*+[\]?{
}
.=!:(|)])/g,"\\$1");
	css = css.replace(RegExp('\\b(behavior:\\s*?url\\(\'?"?)' + escaped_base,'gi'),'$1');
}
var style = document.createElement('style');
	style.textContent = css;
	style.media = link.media;
	style.disabled = link.disabled;
	style.setAttribute('data-href',link.getAttribute('href'));
	parent.insertBefore(style,link);
	parent.removeChild(link);
	style.media = link.media;
	// Duplicate is intentional. See issue #31}
}
;
	try{
	xhr.open('GET',url);
	xhr.send(null);
}
catch (e){
	// Fallback to XDomainRequest if available if (typeof XDomainRequest != "undefined"){
	xhr = new XDomainRequest();
	xhr.onerror = xhr.onprogress = function(){
}
;
	xhr.onload = process;
	xhr.open("GET",url);
	xhr.send(null);
}
}
link.setAttribute('data-inprogress','');
}
,styleElement:function(style){
	if (style.hasAttribute('data-noprefix')){
	return;
}
var disabled = style.disabled;
	style.textContent = self.fix(style.textContent,true,style);
	style.disabled = disabled;
}
,styleAttribute:function(element){
	var css = element.getAttribute('style');
	css = self.fix(css,false,element);
	element.setAttribute('style',css);
}
,process:function(){
	// Linked stylesheets $('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);
	// Inline stylesheets $('style').forEach(StyleFix.styleElement);
	// Inline styles $('[style]').forEach(StyleFix.styleAttribute);
}
,register:function(fixer,index){
	(self.fixers = self.fixers || []) .splice(index === undefined? self.fixers.length:index,0,fixer);
}
,fix:function(css,raw,element){
	for(var i=0;
	i<self.fixers.length;
	i++){
	css = self.fixers[i](css,raw,element) || css;
}
return css;
}
,camelCase:function(str){
	return str.replace(/-([a-z])/g,function($0,$1){
	return $1.toUpperCase();
}
).replace('-','');
}
,deCamelCase:function(str){
	return str.replace(/[A-Z]/g,function($0){
	return '-' + $0.toLowerCase()}
);
}
}
;
	/************************************** * Process styles **************************************/
(function(){
	setTimeout(function(){
	$('link[rel="stylesheet"]').forEach(StyleFix.link);
}
,10);
	document.addEventListener('DOMContentLoaded',StyleFix.process,false);
}
)();
	function $(expr,con){
	return [].slice.call((con || document).querySelectorAll(expr));
}
}
)();
	/** * PrefixFree */
(function(root){
	if(!window.StyleFix || !window.getComputedStyle){
	return;
}
// Private helperfunction fix(what,before,after,replacement,css){
	what = self[what];
	if(what.length){
	var regex = RegExp(before + '(' + what.join('|') + ')' + after,'gi');
	css = css.replace(regex,replacement);
}
return css;
}
var self = window.PrefixFree ={
	prefixCSS:function(css,raw,element){
	var prefix = self.prefix;
	// Gradient angles hotfix if(self.functions.indexOf('linear-gradient') > -1){
	// Gradients are supported with a prefix,convert angles to legacy css = css.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig,function ($0,delim,repeating,deg){
	return delim + (repeating || '') + 'linear-gradient(' + (90-deg) + 'deg';
}
);
}
css = fix('functions','(\\s|:|,)','\\s*\\(','$1' + prefix + '$2(',css);
	css = fix('keywords','(\\s|:)','(\\s|;
	|\\}
|$)','$1' + prefix + '$2$3',css);
	css = fix('properties','(^|\\{
	|\\s|;
	)','\\s*:','$1' + prefix + '$2:',css);
	// Prefix properties *inside* values (issue #8) if (self.properties.length){
	var regex = RegExp('\\b(' + self.properties.join('|') + ')(?!:)','gi');
	css = fix('valueProperties','\\b',':(.+?);
	',function($0){
	return $0.replace(regex,prefix + "$1")}
,css);
}
if(raw){
	css = fix('selectors','','\\b',self.prefixSelector,css);
	css = fix('atrules','@','\\b','@' + prefix + '$1',css);
}
// Fix double prefixing css = css.replace(RegExp('-' + prefix,'g'),'-');
	// Prefix wildcard css = css.replace(/-\*-(?=[a-z]+)/gi,self.prefix);
	return css;
}
,property:function(property){
	return (self.properties.indexOf(property)? self.prefix:'') + property;
}
,value:function(value,property){
	value = fix('functions','(^|\\s|,)','\\s*\\(','$1' + self.prefix + '$2(',value);
	value = fix('keywords','(^|\\s)','(\\s|$)','$1' + self.prefix + '$2$3',value);
	// TODO properties inside values return value;
}
,// Warning:Prefixes no matter what,even if the selector is supported prefix-less prefixSelector:function(selector){
	return selector.replace(/^:{
	1,2}
/,function($0){
	return $0 + self.prefix}
)}
,// Warning:Prefixes no matter what,even if the property is supported prefix-less prefixProperty:function(property,camelCase){
	var prefixed = self.prefix + property;
	return camelCase? StyleFix.camelCase(prefixed):prefixed;
}
}
;
	/************************************** * Properties **************************************/
(function(){
	var prefixes ={
}
,properties = [],shorthands ={
}
,style = getComputedStyle(document.documentElement,null),dummy = document.createElement('div').style;
	// Why are we doing this instead of iterating over properties in a .style object? Cause Webkit won't iterate over those. var iterate = function(property){
	if(property.charAt(0) === '-'){
	properties.push(property);
	var parts = property.split('-'),prefix = parts[1];
	// Count prefix uses prefixes[prefix] = ++prefixes[prefix] || 1;
	// This helps determining shorthands while(parts.length > 3){
	parts.pop();
	var shorthand = parts.join('-');
	if(supported(shorthand) && properties.indexOf(shorthand) === -1){
	properties.push(shorthand);
}
}
}
}
,supported = function(property){
	return StyleFix.camelCase(property) in dummy;
}
// Some browsers have numerical indices for the properties,some don't if(style.length > 0){
	for(var i=0;
	i<style.length;
	i++){
	iterate(style[i])}
}
else{
	for(var property in style){
	iterate(StyleFix.deCamelCase(property));
}
}
// Find most frequently used prefix var highest ={
	uses:0}
;
	for(var prefix in prefixes){
	var uses = prefixes[prefix];
	if(highest.uses < uses){
	highest ={
	prefix:prefix,uses:uses}
;
}
}
self.prefix = '-' + highest.prefix + '-';
	self.Prefix = StyleFix.camelCase(self.prefix);
	self.properties = [];
	// Get properties ONLY supported with a prefix for(var i=0;
	i<properties.length;
	i++){
	var property = properties[i];
	if(property.indexOf(self.prefix) === 0){
	// we might have multiple prefixes,like Opera var unprefixed = property.slice(self.prefix.length);
	if(!supported(unprefixed)){
	self.properties.push(unprefixed);
}
}
}
// IE fix if(self.Prefix == 'Ms' && !('transform' in dummy) && !('MsTransform' in dummy) && ('msTransform' in dummy)){
	self.properties.push('transform','transform-origin');
}
self.properties.sort();
}
)();
	/************************************** * Values **************************************/
(function(){
	// Values that might need prefixingvar functions ={
	'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%'}
}
;
	functions['repeating-linear-gradient'] =functions['repeating-radial-gradient'] =functions['radial-gradient'] =functions['linear-gradient'];
	// Note:The properties assigned are just to *test* support.// The keywords will be prefixed everywhere.var keywords ={
	'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'}
;
	self.functions = [];
	self.keywords = [];
	var style = document.createElement('div').style;
	function supported(value,property){
	style[property] = '';
	style[property] = value;
	return !!style[property];
}
for (var func in functions){
	var test = functions[func],property = test.property,value = func + '(' + test.params + ')';
	if (!supported(value,property) && supported(self.prefix + value,property)){
	// It's supported,but with a prefix self.functions.push(func);
}
}
for (var keyword in keywords){
	var property = keywords[keyword];
	if (!supported(keyword,property) && supported(self.prefix + keyword,property)){
	// It's supported,but with a prefix self.keywords.push(keyword);
}
}
}
)();
	/************************************** * Selectors and @-rules **************************************/
(function(){
	varselectors ={
	':read-only':null,':read-write':null,':any-link':null,'::selection':null}
,atrules ={
	'keyframes':'name','viewport':null,'document':'regexp(".")'}
;
	self.selectors = [];
	self.atrules = [];
	var style = root.appendChild(document.createElement('style'));
	function supported(selector){
	style.textContent = selector + '{
}
';
	// Safari 4 has issues with style.innerHTML return !!style.sheet.cssRules.length;
}
for(var selector in selectors){
	var test = selector + (selectors[selector]? '(' + selectors[selector] + ')':'');
	if(!supported(test) && supported(self.prefixSelector(test))){
	self.selectors.push(selector);
}
}
for(var atrule in atrules){
	var test = atrule + ' ' + (atrules[atrule] || '');
	if(!supported('@' + test) && supported('@' + self.prefix + test)){
	self.atrules.push(atrule);
}
}
root.removeChild(style);
}
)();
	// Properties that accept properties as their valueself.valueProperties = [ 'transition','transition-property']// Add class for current prefixroot.className += ' ' + self.prefix;
	StyleFix.register(self.prefixCSS);
}
)(document.documentElement);

CSS代码(reset.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

CSS代码(style.css):

*,*:before,*:after{margin:0;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
*:before,*:after{content:"";}
html,body{height:100%;}
body{position:relative;background:#272727;overflow:hidden;}
.container,.container *{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}
.container{animation:spin 10s linear infinite;}
.thing{width:15em;height:15em;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;}
.thing:nth-child(1){-moz-box-shadow:inset 10px 0 0 1px #ff4d4d;-webkit-box-shadow:inset 10px 0 0 1px #ff4d4d;box-shadow:inset 10px 0 0 1px #ff4d4d;-moz-transform:rotateZ(0deg) translateY(5em);-ms-transform:rotateZ(0deg) translateY(5em);-o-transform:rotateZ(0deg) translateY(5em);-webkit-transform:rotateZ(0deg) translateY(5em);transform:rotateZ(0deg) translateY(5em);}
.thing:nth-child(2){-moz-box-shadow:inset 10px 0 0 1px #ff774d;-webkit-box-shadow:inset 10px 0 0 1px #ff774d;box-shadow:inset 10px 0 0 1px #ff774d;-moz-transform:rotateZ(14.4deg) translateY(5em);-ms-transform:rotateZ(14.4deg) translateY(5em);-o-transform:rotateZ(14.4deg) translateY(5em);-webkit-transform:rotateZ(14.4deg) translateY(5em);transform:rotateZ(14.4deg) translateY(5em);}
.thing:nth-child(3){-moz-box-shadow:inset 10px 0 0 1px #ffa24d;-webkit-box-shadow:inset 10px 0 0 1px #ffa24d;box-shadow:inset 10px 0 0 1px #ffa24d;-moz-transform:rotateZ(28.8deg) translateY(5em);-ms-transform:rotateZ(28.8deg) translateY(5em);-o-transform:rotateZ(28.8deg) translateY(5em);-webkit-transform:rotateZ(28.8deg) translateY(5em);transform:rotateZ(28.8deg) translateY(5em);}
.thing:nth-child(4){-moz-box-shadow:inset 10px 0 0 1px #ffcd4d;-webkit-box-shadow:inset 10px 0 0 1px #ffcd4d;box-shadow:inset 10px 0 0 1px #ffcd4d;-moz-transform:rotateZ(43.2deg) translateY(5em);-ms-transform:rotateZ(43.2deg) translateY(5em);-o-transform:rotateZ(43.2deg) translateY(5em);-webkit-transform:rotateZ(43.2deg) translateY(5em);transform:rotateZ(43.2deg) translateY(5em);}
.thing:nth-child(5){-moz-box-shadow:inset 10px 0 0 1px #fff84d;-webkit-box-shadow:inset 10px 0 0 1px #fff84d;box-shadow:inset 10px 0 0 1px #fff84d;-moz-transform:rotateZ(57.6deg) translateY(5em);-ms-transform:rotateZ(57.6deg) translateY(5em);-o-transform:rotateZ(57.6deg) translateY(5em);-webkit-transform:rotateZ(57.6deg) translateY(5em);transform:rotateZ(57.6deg) translateY(5em);}
.thing:nth-child(6){-moz-box-shadow:inset 10px 0 0 1px #dbff4d;-webkit-box-shadow:inset 10px 0 0 1px #dbff4d;box-shadow:inset 10px 0 0 1px #dbff4d;-moz-transform:rotateZ(72deg) translateY(5em);-ms-transform:rotateZ(72deg) translateY(5em);-o-transform:rotateZ(72deg) translateY(5em);-webkit-transform:rotateZ(72deg) translateY(5em);transform:rotateZ(72deg) translateY(5em);}
.thing:nth-child(7){-moz-box-shadow:inset 10px 0 0 1px #b0ff4d;-webkit-box-shadow:inset 10px 0 0 1px #b0ff4d;box-shadow:inset 10px 0 0 1px #b0ff4d;-moz-transform:rotateZ(86.4deg) translateY(5em);-ms-transform:rotateZ(86.4deg) translateY(5em);-o-transform:rotateZ(86.4deg) translateY(5em);-webkit-transform:rotateZ(86.4deg) translateY(5em);transform:rotateZ(86.4deg) translateY(5em);}
.thing:nth-child(8){-moz-box-shadow:inset 10px 0 0 1px #86ff4d;-webkit-box-shadow:inset 10px 0 0 1px #86ff4d;box-shadow:inset 10px 0 0 1px #86ff4d;-moz-transform:rotateZ(100.8deg) translateY(5em);-ms-transform:rotateZ(100.8deg) translateY(5em);-o-transform:rotateZ(100.8deg) translateY(5em);-webkit-transform:rotateZ(100.8deg) translateY(5em);transform:rotateZ(100.8deg) translateY(5em);}
.thing:nth-child(9){-moz-box-shadow:inset 10px 0 0 1px #5bff4d;-webkit-box-shadow:inset 10px 0 0 1px #5bff4d;box-shadow:inset 10px 0 0 1px #5bff4d;-moz-transform:rotateZ(115.2deg) translateY(5em);-ms-transform:rotateZ(115.2deg) translateY(5em);-o-transform:rotateZ(115.2deg) translateY(5em);-webkit-transform:rotateZ(115.2deg) translateY(5em);transform:rotateZ(115.2deg) translateY(5em);}
.thing:nth-child(10){-moz-box-shadow:inset 10px 0 0 1px #4dff69;-webkit-box-shadow:inset 10px 0 0 1px #4dff69;box-shadow:inset 10px 0 0 1px #4dff69;-moz-transform:rotateZ(129.6deg) translateY(5em);-ms-transform:rotateZ(129.6deg) translateY(5em);-o-transform:rotateZ(129.6deg) translateY(5em);-webkit-transform:rotateZ(129.6deg) translateY(5em);transform:rotateZ(129.6deg) translateY(5em);}
.thing:nth-child(11){-moz-box-shadow:inset 10px 0 0 1px #4dff94;-webkit-box-shadow:inset 10px 0 0 1px #4dff94;box-shadow:inset 10px 0 0 1px #4dff94;-moz-transform:rotateZ(144deg) translateY(5em);-ms-transform:rotateZ(144deg) translateY(5em);-o-transform:rotateZ(144deg) translateY(5em);-webkit-transform:rotateZ(144deg) translateY(5em);transform:rotateZ(144deg) translateY(5em);}
.thing:nth-child(12){-moz-box-shadow:inset 10px 0 0 1px #4dffbf;-webkit-box-shadow:inset 10px 0 0 1px #4dffbf;box-shadow:inset 10px 0 0 1px #4dffbf;-moz-transform:rotateZ(158.4deg) translateY(5em);-ms-transform:rotateZ(158.4deg) translateY(5em);-o-transform:rotateZ(158.4deg) translateY(5em);-webkit-transform:rotateZ(158.4deg) translateY(5em);transform:rotateZ(158.4deg) translateY(5em);}
.thing:nth-child(13){-moz-box-shadow:inset 10px 0 0 1px #4dffea;-webkit-box-shadow:inset 10px 0 0 1px #4dffea;box-shadow:inset 10px 0 0 1px #4dffea;-moz-transform:rotateZ(172.8deg) translateY(5em);-ms-transform:rotateZ(172.8deg) translateY(5em);-o-transform:rotateZ(172.8deg) translateY(5em);-webkit-transform:rotateZ(172.8deg) translateY(5em);transform:rotateZ(172.8deg) translateY(5em);}
.thing:nth-child(14){-moz-box-shadow:inset 10px 0 0 1px #4deaff;-webkit-box-shadow:inset 10px 0 0 1px #4deaff;box-shadow:inset 10px 0 0 1px #4deaff;-moz-transform:rotateZ(187.2deg) translateY(5em);-ms-transform:rotateZ(187.2deg) translateY(5em);-o-transform:rotateZ(187.2deg) translateY(5em);-webkit-transform:rotateZ(187.2deg) translateY(5em);transform:rotateZ(187.2deg) translateY(5em);}
.thing:nth-child(15){-moz-box-shadow:inset 10px 0 0 1px #4dbfff;-webkit-box-shadow:inset 10px 0 0 1px #4dbfff;box-shadow:inset 10px 0 0 1px #4dbfff;-moz-transform:rotateZ(201.6deg) translateY(5em);-ms-transform:rotateZ(201.6deg) translateY(5em);-o-transform:rotateZ(201.6deg) translateY(5em);-webkit-transform:rotateZ(201.6deg) translateY(5em);transform:rotateZ(201.6deg) translateY(5em);}
.thing:nth-child(16){-moz-box-shadow:inset 10px 0 0 1px #4d94ff;-webkit-box-shadow:inset 10px 0 0 1px #4d94ff;box-shadow:inset 10px 0 0 1px #4d94ff;-moz-transform:rotateZ(216deg) translateY(5em);-ms-transform:rotateZ(216deg) translateY(5em);-o-transform:rotateZ(216deg) translateY(5em);-webkit-transform:rotateZ(216deg) translateY(5em);transform:rotateZ(216deg) translateY(5em);}
.thing:nth-child(17){-moz-box-shadow:inset 10px 0 0 1px #4d69ff;-webkit-box-shadow:inset 10px 0 0 1px #4d69ff;box-shadow:inset 10px 0 0 1px #4d69ff;-moz-transform:rotateZ(230.4deg) translateY(5em);-ms-transform:rotateZ(230.4deg) translateY(5em);-o-transform:rotateZ(230.4deg) translateY(5em);-webkit-transform:rotateZ(230.4deg) translateY(5em);transform:rotateZ(230.4deg) translateY(5em);}
.thing:nth-child(18){-moz-box-shadow:inset 10px 0 0 1px #5b4dff;-webkit-box-shadow:inset 10px 0 0 1px #5b4dff;box-shadow:inset 10px 0 0 1px #5b4dff;-moz-transform:rotateZ(244.8deg) translateY(5em);-ms-transform:rotateZ(244.8deg) translateY(5em);-o-transform:rotateZ(244.8deg) translateY(5em);-webkit-transform:rotateZ(244.8deg) translateY(5em);transform:rotateZ(244.8deg) translateY(5em);}
.thing:nth-child(19){-moz-box-shadow:inset 10px 0 0 1px #864dff;-webkit-box-shadow:inset 10px 0 0 1px #864dff;box-shadow:inset 10px 0 0 1px #864dff;-moz-transform:rotateZ(259.2deg) translateY(5em);-ms-transform:rotateZ(259.2deg) translateY(5em);-o-transform:rotateZ(259.2deg) translateY(5em);-webkit-transform:rotateZ(259.2deg) translateY(5em);transform:rotateZ(259.2deg) translateY(5em);}
.thing:nth-child(20){-moz-box-shadow:inset 10px 0 0 1px #b04dff;-webkit-box-shadow:inset 10px 0 0 1px #b04dff;box-shadow:inset 10px 0 0 1px #b04dff;-moz-transform:rotateZ(273.6deg) translateY(5em);-ms-transform:rotateZ(273.6deg) translateY(5em);-o-transform:rotateZ(273.6deg) translateY(5em);-webkit-transform:rotateZ(273.6deg) translateY(5em);transform:rotateZ(273.6deg) translateY(5em);}
.thing:nth-child(21){-moz-box-shadow:inset 10px 0 0 1px #db4dff;-webkit-box-shadow:inset 10px 0 0 1px #db4dff;box-shadow:inset 10px 0 0 1px #db4dff;-moz-transform:rotateZ(288deg) translateY(5em);-ms-transform:rotateZ(288deg) translateY(5em);-o-transform:rotateZ(288deg) translateY(5em);-webkit-transform:rotateZ(288deg) translateY(5em);transform:rotateZ(288deg) translateY(5em);}
.thing:nth-child(22){-moz-box-shadow:inset 10px 0 0 1px #ff4df8;-webkit-box-shadow:inset 10px 0 0 1px #ff4df8;box-shadow:inset 10px 0 0 1px #ff4df8;-moz-transform:rotateZ(302.4deg) translateY(5em);-ms-transform:rotateZ(302.4deg) translateY(5em);-o-transform:rotateZ(302.4deg) translateY(5em);-webkit-transform:rotateZ(302.4deg) translateY(5em);transform:rotateZ(302.4deg) translateY(5em);}
.thing:nth-child(23){-moz-box-shadow:inset 10px 0 0 1px #ff4dcd;-webkit-box-shadow:inset 10px 0 0 1px #ff4dcd;box-shadow:inset 10px 0 0 1px #ff4dcd;-moz-transform:rotateZ(316.8deg) translateY(5em);-ms-transform:rotateZ(316.8deg) translateY(5em);-o-transform:rotateZ(316.8deg) translateY(5em);-webkit-transform:rotateZ(316.8deg) translateY(5em);transform:rotateZ(316.8deg) translateY(5em);}
.thing:nth-child(24){-moz-box-shadow:inset 10px 0 0 1px #ff4da2;-webkit-box-shadow:inset 10px 0 0 1px #ff4da2;box-shadow:inset 10px 0 0 1px #ff4da2;-moz-transform:rotateZ(331.2deg) translateY(5em);-ms-transform:rotateZ(331.2deg) translateY(5em);-o-transform:rotateZ(331.2deg) translateY(5em);-webkit-transform:rotateZ(331.2deg) translateY(5em);transform:rotateZ(331.2deg) translateY(5em);}
.thing:nth-child(25){-moz-box-shadow:inset 10px 0 0 1px #ff4d77;-webkit-box-shadow:inset 10px 0 0 1px #ff4d77;box-shadow:inset 10px 0 0 1px #ff4d77;-moz-transform:rotateZ(345.6deg) translateY(5em);-ms-transform:rotateZ(345.6deg) translateY(5em);-o-transform:rotateZ(345.6deg) translateY(5em);-webkit-transform:rotateZ(345.6deg) translateY(5em);transform:rotateZ(345.6deg) translateY(5em);}
@-moz-keyframes spin{100%{-moz-transform:rotateZ(360deg);transform:rotateZ(360deg);}
}
@-webkit-keyframes spin{100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg);}
}
@keyframes spin{100%{-moz-transform:rotateZ(360deg);-ms-transform:rotateZ(360deg);-o-transform:rotateZ(360deg);-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg);}
}

附件:下载该文件资源,减少时间成本(增值服务)