以下是 强大的动画库插件anime.js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>强大的动画库插件anime.js</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<style type="text/css">
* {
box-sizing: border-box;
}
html,
body {
background: #18212D;
}
body {
position: absolute;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
padding: 1rem;
color: white;
-webkit-font-smoothing: antialiased;
}
section {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
max-width: 18rem;
margin: auto;
text-align: center;
}
h1 {
margin-bottom: 1rem;
font-size: 1.5rem;
}
article {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
min-height: 8rem;
margin-bottom: 1rem;
padding: 1rem;
}
.red {
background-color: #FF324A;
}
.green {
background-color: #31FFA6;
}
.blue {
background-color: #206EFF;
}
.yellow {
background-color: #FFFF99;
}
div.blue {
width: 2rem;
height: 2rem;
margin-top: auto;
margin-bottom: auto;
}
</style>
</head>
<body>
<div class="zzsc-container">
<header class="zzsc-header">
<div class="zzsc-demo center">
<a href="index.html" class="current">基本动画</a>
<a href="index2.html">多个timing值</a>
<a href="index3.html">指定目标值</a>
<a href="index4.html">动画控制</a>
<a href="index5.html">动画路径</a>
</div>
</header>
<section>
<article class="green">
<div class="blue"></div>
</article>
</section>
</div>
<script src="js/stopExecutionOnTimeout.js" type="text/javascript"></script>
<script type="text/javascript" src="js/anime.min.js"></script>
<script type="text/javascript">
anime({
targets: 'div.blue',
translateX: '13rem',
rotate: {
value: 180,
duration: 1500,
easing: 'easeInOutQuad'
},
scale: {
value: 2,
delay: 150,
duration: 850,
easing: 'easeInOutExpo'
},
loop: true,
direction: 'alternate'
});
</script>
</body>
</html>
HTML代码(index2.html):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>强大的动画库插件anime.js</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<style type="text/css">
* {
box-sizing: border-box;
}
html,
body {
background: #18212D;
}
body {
position: absolute;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
padding: 1rem;
color: white;
-webkit-font-smoothing: antialiased;
}
section {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
max-width: 18rem;
margin: auto;
text-align: center;
}
h1 {
margin-bottom: 1rem;
font-size: 1.5rem;
}
article {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
min-height: 8rem;
margin-bottom: 1rem;
padding: 1rem;
}
.red {
background-color: #FF324A;
}
.green {
background-color: #31FFA6;
}
.blue {
background-color: #206EFF;
}
.yellow {
background-color: #FFFF99;
}
div.blue,div.green,div.red,div.yellow {
width: 2.5em;
height: 2.5em;
margin-top: auto;
margin-bottom: auto;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="zzsc-container">
<header class="zzsc-header">
<div class="zzsc-demo center">
<a href="index.html">基本动画</a>
<a href="index2.html" class="current">多个timing值</a>
<a href="index3.html">指定目标值</a>
<a href="index4.html">动画控制</a>
<a href="index5.html">动画路径</a>
</div>
</header>
<section>
<article>
<div class="div green"></div>
<div class="div blue"></div>
<div class="div red"></div>
</article>
</section>
</div>
<script src="js/stopExecutionOnTimeout.js" type="text/javascript"></script>
<script type="text/javascript" src="js/anime.min.js"></script>
<script type="text/javascript">
anime({
targets: '.div',
translateX: '13.5rem',
scale: [
0.75,
0.9
],
delay: function (el, index) {
return index * 80;
},
direction: 'alternate',
loop: true
});
</script>
</body>
</html>
JS代码(anime.min.js):
/* * Anime v1.0.0 * http://anime-js.com * JavaScript animation engine * Copyright (c) 2016 Julian Garnier * http://juliangarnier.com * Released under the MIT license */
(function(r,n){
"function"===typeof define&&define.amd?define([],n):"object"===typeof module&&module.exports?module.exports=n():r.anime=n()}
)(this,function(){
var r={
duration:1E3,delay:0,loop:!1,autoplay:!0,direction:"normal",easing:"easeOutElastic",elasticity:400,round:!1,begin:void 0,update:void 0,complete:void 0}
,n="translateX translateY translateZ rotate rotateX rotateY rotateZ scale scaleX scaleY scaleZ skewX skewY".split(" "),e=function(){
return{
array:function(a){
return Array.isArray(a)}
,object:function(a){
return-1<Object.prototype.toString.call(a).indexOf("Object")}
,html:function(a){
return a instanceof NodeList||a instanceof HTMLCollection}
,node:function(a){
return a.nodeType}
,svg:function(a){
return a instanceof SVGElement}
,number:function(a){
return!isNaN(parseInt(a))}
,string:function(a){
return"string"===typeof a}
,func:function(a){
return"function"===typeof a}
,undef:function(a){
return"undefined"===typeof a}
,"null":function(a){
return"null"===typeof a}
,hex:function(a){
return/(^#[0-9A-F]{
6}
$)|(^#[0-9A-F]{
3}
$)/i.test(a)}
,rgb:function(a){
return/^rgb/.test(a)}
,rgba:function(a){
return/^rgba/.test(a)}
,hsl:function(a){
return/^hsl/.test(a)}
,color:function(a){
return e.hex(a)||e.rgb(a)||e.rgba(a)||e.hsl(a)}
}
}
(),z=function(){
var a={
}
,b={
Sine:function(a){
return 1-Math.cos(a*Math.PI/2)}
,Circ:function(a){
return 1-Math.sqrt(1-a*a)}
,Elastic:function(a,b){
if(0===a||1===a)return a;
var f=1-Math.min(b,998)/1E3,h=a/1-1;
return-(Math.pow(2,10*h)*Math.sin(2*(h-f/(2*Math.PI)*Math.asin(1))*Math.PI/f))}
,Back:function(a){
return a*a*(3*a-2)}
,Bounce:function(a){
for(var b,f=4;
a<((b=Math.pow(2,--f))-1)/11;
);
return 1/Math.pow(4,3-f)-7.5625*Math.pow((3*b-2)/22-a,2)}
}
;
["Quad","Cubic","Quart","Quint","Expo"].forEach(function(a,d){
b[a]=function(a){
return Math.pow(a,d+2)}
}
);
Object.keys(b).forEach(function(c){
var d=b[c];
a["easeIn"+c]=d;
a["easeOut"+c]=function(a,b){
return 1-d(1-a,b)}
;
a["easeInOut"+c]=function(a,b){
return.5>a?d(2*a,b)/2:1-d(-2*a+2,b)/2}
}
);
a.linear=function(a){
return a}
;
return a}
(),u=function(a){
return e.string(a)?a:a+""}
,A=function(a){
return a.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}
,B=function(a){
if(e.color(a))return!1;
try{
return document.querySelectorAll(a)}
catch(b){
return!1}
}
,v=function(a){
return a.reduce(function(a,c){
return a.concat(e.array(c)?v(c):c)}
,[])}
,p=function(a){
if(e.array(a))return a;
e.string(a)&&(a=B(a)||a);
return e.html(a)?[].slice.call(a):[a]}
,C=function(a,b){
return a.some(function(a){
return a===b}
)}
,N=function(a,b){
var c={
}
;
a.forEach(function(a){
var f=JSON.stringify(b.map(function(b){
return a[b]}
));
c[f]=c[f]||[];
c[f].push(a)}
);
return Object.keys(c).map(function(a){
return c[a]}
)}
,D=function(a){
return a.filter(function(a,c,d){
return d.indexOf(a)===c}
)}
,w=function(a){
var b={
}
,c;
for(c in a)b[c]=a[c];
return b}
,t=function(a,b){
for(var c in b)a[c]=e.undef(a[c])?b[c]:a[c];
return a}
,O=function(a){
a=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(a,b,c,e){
return b+b+c+c+e+e}
);
var b=/^#?([a-f\d]{
2}
)([a-f\d]{
2}
)([a-f\d]{
2}
)$/i.exec(a);
a=parseInt(b[1],16);
var c=parseInt(b[2],16),b=parseInt(b[3],16);
return"rgb("+a+","+c+","+b+")"}
,P=function(a){
a=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a);
var b=parseInt(a[1])/360,c=parseInt(a[2])/100,d=parseInt(a[3])/100;
a=function(a,b,c){
0>c&&(c+=1);
1<c&&--c;
return c<1/6?a+6*(b-a)*c:.5>c?b:c<2/3?a+(b-a)*(2/3-c)*6:a}
;
if(0==c)c=d=b=d;
else var f=.5>d?d*(1+c):d+c-d*c,h=2*d-f,c=a(h,f,b+1/3),d=a(h,f,b),b=a(h,f,b-1/3);
return"rgb("+255*c+","+255*d+","+255*b+")"}
,k=function(a){
return/([\+\-]?[0-9|auto\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg)?/.exec(a)[2]}
,E=function(a,b,c){
return k(b)?b:-1<a.indexOf("translate")?k(c)?b+k(c):b+"px":-1<a.indexOf("rotate")||-1<a.indexOf("skew")?b+"deg":b}
,F=function(a,b){
if((e.node(a)||e.svg(a))&&C(n,b))return"transform";
if((e.node(a)||e.svg(a))&&"transform"!==b&&x(a,b))return"css";
if((e.node(a)||e.svg(a))&&(a.getAttribute(b)||e.svg(a)&&a[b]))return"attribute";
if(!e["null"](a[b])&&!e.undef(a[b]))return"object"}
,x=function(a,b){
if(b in a.style)return getComputedStyle(a).getPropertyValue(A(b))||"0"}
,Q=function(a,b){
var c=-1<b.indexOf("scale")?1:0,d=a.style.transform;
if(!d)return c;
for(var f=/(\w+)\((.+?)\)/g,h=[],e=[],q=[];
h=f.exec(d);
)e.push(h[1]),q.push(h[2]);
d=q.filter(function(a,c){
return e[c]===b}
);
return d.length?d[0]:c}
,G=function(a,b){
switch(F(a,b)){
case "transform":return Q(a,b);
case "css":return x(a,b);
case "attribute":return a.getAttribute(b)}
return a[b]||0}
,H=function(a,b,c){
if(e.color(b))return b=e.rgb(b)||e.rgba(b)?b:e.hex(b)?O(b):e.hsl(b)?P(b):void 0,b;
if(k(b))return b;
a=k(a.to)?k(a.to):k(a.from);
!a&&c&&(a=k(c));
return a?b+a:b}
,I=function(a){
var b=/-?\d*\.?\d+/g;
return{
original:a,numbers:u(a).match(b)?u(a).match(b).map(Number):[0],strings:u(a).split(b)}
}
,R=function(a,b,c){
return b.reduce(function(b,f,e){
f=f?f:c[e-1];
return b+a[e-1]+f}
)}
,S=function(a){
a=a?v(e.array(a)?a.map(p):p(a)):[];
return a.map(function(a,c){
return{
target:a,id:c}
}
)}
,T=function(a,b){
var c=[],d;
for(d in a)if(!r.hasOwnProperty(d)&&"targets"!==d){
var f=e.object(a[d])?w(a[d]):{
value:a[d]}
;
f.name=d;
c.push(t(f,b))}
return c}
,J=function(a,b,c,d){
"transform"===c?(c=a+"("+E(a,b.from,b.to)+")",b=a+"("+E(a,b.to)+")"):(a="css"===c?x(d,a):void 0,c=H(b,b.from,a),b=H(b,b.to,a));
return{
from:I(c),to:I(b)}
}
,U=function(a,b){
var c=[];
a.forEach(function(d,f){
var h=d.target;
return b.forEach(function(b){
var q=F(h,b.name);
if(q){
var k;
k=b.name;
var g=b.value,g=p(e.func(g)?g(h,f):g);
k={
from:1<g.length?g[0]:G(h,k),to:1<g.length?g[1]:g[0]}
;
g=w(b);
g.animatables=d;
g.type=q;
g.from=J(b.name,k,g.type,h).from;
g.to=J(b.name,k,g.type,h).to;
g.round=e.color(k.from)||g.round?1:0;
g.delay=(e.func(g.delay)?g.delay(h,f,a.length):g.delay)/l.speed;
g.duration=(e.func(g.duration)?g.duration(h,f,a.length):g.duration)/l.speed;
c.push(g)}
}
)}
);
return c}
,V=function(a,b){
var c=U(a,b);
return N(c,["name","from","to","delay","duration"]).map(function(a){
var b=w(a[0]);
b.animatables=a.map(function(a){
return a.animatables}
);
b.totalDuration=b.delay+b.duration;
return b}
)}
,y=function(a,b){
a.tweens.forEach(function(c){
var d=c.from,f=a.duration-(c.delay+c.duration);
c.from=c.to;
c.to=d;
b&&(c.delay=f)}
);
a.reversed=a.reversed?!1:!0}
,K=function(a){
var b=[],c=[];
a.tweens.forEach(function(a){
if("css"===a.type||"transform"===a.type)b.push("css"===a.type?A(a.name):"transform"),a.animatables.forEach(function(a){
c.push(a.target)}
)}
);
return{
properties:D(b).join(","),elements:D(c)}
}
,W=function(a){
var b=K(a);
b.elements.forEach(function(a){
a.style.willChange=b.properties}
)}
,X=function(a){
K(a).elements.forEach(function(a){
a.style.removeProperty("will-change")}
)}
,Y=function(a,b){
var c=a.path,d=a.value*b,f=function(f){
f=f||0;
return c.getPointAtLength(1<b?a.value+f:d+f)}
,e=f(),k=f(-1),f=f(1);
switch(a.name){
case "translateX":return e.x;
case "translateY":return e.y;
case "rotate":return 180*Math.atan2(f.y-k.y,f.x-k.x)/Math.PI}
}
,Z=function(a,b){
var c=Math.min(Math.max(b-a.delay,0),a.duration)/a.duration,d=a.to.numbers.map(function(b,d){
var e=a.from.numbers[d],k=z[a.easing](c,a.elasticity),e=a.path?Y(a,k):e+k*(b-e);
return e=a.round?Math.round(e*a.round)/a.round:e}
);
return R(d,a.to.strings,a.from.strings)}
,L=function(a,b){
var c=void 0;
a.time=Math.min(b,a.duration);
a.progress=a.time/a.duration*100;
a.tweens.forEach(function(a){
a.currentValue=Z(a,b);
var d=a.currentValue;
a.animatables.forEach(function(b){
var e=b.id;
switch(a.type){
case "css":b.target.style[a.name]=d;
break;
case "attribute":b.target.setAttribute(a.name,d);
break;
case "object":b.target[a.name]=d;
break;
case "transform":c||(c={
}
),c[e]||(c[e]=[]),c[e].push(d)}
}
)}
);
if(c)for(var d in c)a.animatables[d].target.style.transform=c[d].join(" ");
a.settings.update&&a.settings.update(a)}
,M=function(a){
var b={
}
;
b.animatables=S(a.targets);
b.settings=t(a,r);
b.properties=T(a,b.settings);
b.tweens=V(b.animatables,b.properties);
b.duration=b.tweens.length?Math.max.apply(Math,b.tweens.map(function(a){
return a.totalDuration}
)):a.duration/l.speed;
b.time=0;
b.progress=0;
b.running=!1;
b.ended=!1;
return b}
,m=[],l=function(a){
var b=M(a),c={
tick:function(){
if(b.running){
b.ended=!1;
c.now=+new Date;
c.current=c.last+c.now-c.start;
L(b,c.current);
var a=b.settings;
a.begin&&c.current>=a.delay&&(a.begin(b),a.begin=void 0);
c.current>=b.duration?(a.loop?(c.start=+new Date,"alternate"===a.direction&&y(b,!0),e.number(a.loop)&&a.loop--,c.raf=requestAnimationFrame(c.tick)):(b.ended=!0,a.complete&&a.complete(b),b.pause()),c.last=0):c.raf=requestAnimationFrame(c.tick)}
}
}
;
b.seek=function(a){
L(b,a/100*b.duration)}
;
b.pause=function(){
b.running=!1;
cancelAnimationFrame(c.raf);
X(b);
var a=m.indexOf(b);
-1<a&&m.splice(a,1)}
;
b.play=function(a){
a&&(b=t(M(t(a,b.settings)),b));
b.pause();
b.running=!0;
c.start=+new Date;
c.last=b.ended?0:b.time;
a=b.settings;
"reverse"===a.direction&&y(b);
"alternate"!==a.direction||a.loop||(a.loop=1);
W(b);
m.push(b);
c.raf=requestAnimationFrame(c.tick)}
;
b.restart=function(){
b.reversed&&y(b);
b.pause();
b.seek(0);
b.play()}
;
b.settings.autoplay&&b.play();
return b}
;
l.speed=1;
l.list=m;
l.remove=function(a){
a=v(e.array(a)?a.map(p):p(a));
for(var b=m.length-1;
0<=b;
b--)for(var c=m[b],d=c.tweens.length-1;
0<=d;
d--)for(var f=c.tweens[d],h=f.animatables.length-1;
0<=h;
h--)C(a,f.animatables[h].target)&&(f.animatables.splice(h,1),f.animatables.length||c.tweens.splice(d,1),c.tweens.length||c.pause())}
;
l.easings=z;
l.getValue=G;
l.path=function(a){
a=e.string(a)?B(a)[0]:a;
return{
path:a,value:a.getTotalLength()}
}
;
l.random=function(a,b){
return Math.floor(Math.random()*(b-a+1))+a}
;
return l}
);
JS代码(stopExecutionOnTimeout.js):
"use strict";
"object"!=typeof window.CP&&(window.CP={
}
),window.CP.PenTimer={
programNoLongerBeingMonitored:!1,timeOfFirstCallToShouldStopLoop:0,_loopExits:{
}
,_loopTimers:{
}
,START_MONITORING_AFTER:2e3,STOP_ALL_MONITORING_TIMEOUT:5e3,MAX_TIME_IN_LOOP_WO_EXIT:2200,exitedLoop:function(o){
this._loopExits[o]=!0}
,shouldStopLoop:function(o){
if(this.programKilledSoStopMonitoring)return!0;
if(this.programNoLongerBeingMonitored)return!1;
if(this._loopExits[o])return!1;
var t=this._getTime();
if(0===this.timeOfFirstCallToShouldStopLoop)return this.timeOfFirstCallToShouldStopLoop=t,!1;
var i=t-this.timeOfFirstCallToShouldStopLoop;
if(i<this.START_MONITORING_AFTER)return!1;
if(i>this.STOP_ALL_MONITORING_TIMEOUT)return this.programNoLongerBeingMonitored=!0,!1;
try{
this._checkOnInfiniteLoop(o,t)}
catch(n){
return this._sendErrorMessageToEditor(),this.programKilledSoStopMonitoring=!0,!0}
return!1}
,_sendErrorMessageToEditor:function(){
try{
if(this._shouldPostMessage()){
var o={
action:"infinite-loop",line:this._findAroundLineNumber()}
;
parent.postMessage(JSON.stringify(o),"*")}
else this._throwAnErrorToStopPen()}
catch(t){
this._throwAnErrorToStopPen()}
}
,_shouldPostMessage:function(){
return document.location.href.match(/boomerang/)}
,_throwAnErrorToStopPen:function(){
throw"We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact support@codepen.io."}
,_findAroundLineNumber:function(){
var o=new Error,t=0;
if(o.stack){
var i=o.stack.match(/boomerang\S+:(\d+):\d+/);
i&&(t=i[1])}
return t}
,_checkOnInfiniteLoop:function(o,t){
if(!this._loopTimers[o])return this._loopTimers[o]=t,!1;
var i=t-this._loopTimers[o];
if(i>this.MAX_TIME_IN_LOOP_WO_EXIT)throw"Infinite Loop found on loop:"+o}
,_getTime:function(){
return+new Date}
}
,window.CP.shouldStopExecution=function(o){
return window.CP.PenTimer.shouldStopLoop(o)}
,window.CP.exitedLoop=function(o){
window.CP.PenTimer.exitedLoop(o)}
;
CSS代码(normalize.css):
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;margin:0.67em 0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
pre{white-space:pre-wrap;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}
CSS代码(zzsc-demo.css):
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","瀹嬩綋","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:#2fa0ec;outline:none;text-decoration:none;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
.zzsc-container{margin:0 auto;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
.bgcolor-20{background:#494A5F;color:#D5D6E2;}
/* Header */
.zzsc-header{padding:1em 190px 1em;letter-spacing:-1px;text-align:center;}
.zzsc-header h1{color:#D5D6E2;font-weight:600;font-size:2em;line-height:1;margin-bottom:0;font-family:"Microsoft YaHei","瀹嬩綋","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.zzsc-header h1 span{font-family:"Microsoft YaHei","瀹嬩綋","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
/*nav*/
.zzsc-demo a{color:#fff;text-decoration:none;}
.zzsc-demo{width:100%;padding-bottom:1.2em;}
.zzsc-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #fff;font-weight:700;}
.zzsc-demo a:hover{opacity:0.6;}
.zzsc-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.zzsc-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.zzsc-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.zzsc-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.zzsc-icon span{display:none;}
.zzsc-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.zzsc-footer{width:100%;padding-top:10px;}
.zzsc-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{color:#fff;background:transparent;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Microsoft YaHei","瀹嬩綋","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related h3{font-family:"Microsoft YaHei",sans-serif;}
.related a h3{font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-zzsc-home-outline:before{content:"\e5000";}
.icon-zzsc-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:1024px){.zzsc-header{padding:2em 10% 2em;}
.zzsc-header h1{font-size:1.4em;}
.zzsc-links{font-size:1.4em}
}
@media screen and (max-width:960px){.zzsc-header{padding:2em 10% 2em;}
.zzsc-header h1{font-size:1.2em;}
.zzsc-links{font-size:1.2em}
.related h3{font-size:1em;}
.related a h3{font-size:0.8em;}
}
@media screen and (max-width:766px){.zzsc-header h1{font-size:1.3em;}
.zzsc-links{font-size:1.3em}
}
@media screen and (max-width:640px){.zzsc-header{padding:2em 10% 2em;}
.zzsc-header h1{font-size:1em;}
.zzsc-links{font-size:1em}
.related h3{font-size:0.8em;}
.related a h3{font-size:0.6em;}
}
分享到QQ
分享到微博
微信扫一扫
