以下是 HTML5分段式SVG文字动画特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="zh" class="no-js">
<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>HTML5分段式SVG文字动画特效</title>
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<script>
document.documentElement.className = 'js';
</script>
<script src="js/segment.min.js"></script>
<script src="js/d3-ease.v0.6.js"></script>
<script src="js/letters.js"></script>
</head>
<body class="demo-1">
<!-- SVG icons -->
<svg class="hidden">
<symbol id="icon-play" viewBox="0 0 60 60">
<path d="m53.48 27.435l-42.807-26.52c-3.119-2.047-5.672-.541-5.672 3.346v51.48c0 3.885 2.553 5.391 5.672 3.346l42.807-26.52c0 0 1.521-1.07 1.521-2.566s-1.521-2.566-1.521-2.566" />
</symbol>
</svg>
<!-- /SVG icons -->
<div class="container">
<header class="zzsc-header">
<div class="deco" aria-hidden="true">o</div>
<h1>Animated Letters</h1>
<p>An artistically animated SVG font using the <a href="https://github.com/lmgonzalves/segment">Segment</a> library.</p>
<nav class="zzsc-demos">
<a class="current-demo" href="index.html">Examples</a>
<a href="index2.html">Alphabet</a>
</nav>
</header>
<section class="content">
<ul class="list">
<li class="list__item color-1">
<h3 class="list__text">ashin</h3>
<button class="control__button control__button--play" aria-label="Trigger animation">
<svg class="control__vector" aria-hidden="true" role="img" viewBox="0 0 60 60">
<use xlink:href="#icon-play"></use>
</svg>
</button>
</li>
<li class="list__item color-2">
<h3 class="list__text">bogyoke</h3>
<button class="control__button control__button--play" aria-label="Trigger animation">
<svg class="control__vector" aria-hidden="true" role="img" viewBox="0 0 60 60">
<use xlink:href="#icon-play"></use>
</svg>
</button>
</li>
<li class="list__item color-3">
<h3 class="list__text">nang</h3>
<button class="control__button control__button--play" aria-label="Trigger animation">
<svg class="control__vector" aria-hidden="true" role="img" viewBox="0 0 60 60">
<use xlink:href="#icon-play"></use>
</svg>
</button>
</li>
<li class="list__item color-8">
<h3 class="list__text">maung</h3>
<button class="control__button control__button--play" aria-label="Trigger animation">
<svg class="control__vector" aria-hidden="true" role="img" viewBox="0 0 60 60">
<use xlink:href="#icon-play"></use>
</svg>
</button>
</li>
<li class="list__item color-4">
<h3 class="list__text">Tekkatho</h3>
<button class="control__button control__button--play" aria-label="Trigger animation">
<svg class="control__vector" aria-hidden="true" role="img" viewBox="0 0 24 24">
<use xlink:href="#icon-play"></use>
</svg>
</button>
</li>
<li class="list__item color-5">
<h3 class="list__text">sawbwa</h3>
<button class="control__button control__button--play" aria-label="Trigger animation">
<svg class="control__vector" aria-hidden="true" role="img" viewBox="0 0 60 60">
<use xlink:href="#icon-play"></use>
</svg>
</button>
</li>
<li class="list__item color-6">
<h3 class="list__text">binnya</h3>
<button class="control__button control__button--play" aria-label="Trigger animation">
<svg class="control__vector" aria-hidden="true" role="img" viewBox="0 0 60 60">
<use xlink:href="#icon-play"></use>
</svg>
</button>
</li>
<li class="list__gap">
<p>In the following effects we also use <a href="http://mojs.io/">mo.js</a> for additional animations:</p>
</li>
<li class="list__item color-7">
<h3 class="list__text">thakin</h3>
<button class="control__button control__button--play" aria-label="Trigger animation">
<svg class="control__vector" aria-hidden="true" role="img" viewBox="0 0 60 60">
<use xlink:href="#icon-play"></use>
</svg>
</button>
</li>
<li class="list__item color-9">
<h3 class="list__text">zeya</h3>
<button class="control__button control__button--play" aria-label="Trigger animation">
<svg class="control__vector" aria-hidden="true" role="img" viewBox="0 0 60 60">
<use xlink:href="#icon-play"></use>
</svg>
</button>
</li>
<li class="list__item color-10">
<h3 class="list__text">sanda</h3>
<button class="control__button control__button--play" aria-label="Trigger animation">
<svg class="control__vector" aria-hidden="true" role="img" viewBox="0 0 60 60">
<use xlink:href="#icon-play"></use>
</svg>
</button>
</li>
<li class="list__item list__item--burst color-11">
<h3 class="list__text">duwa</h3>
<button class="control__button control__button--play" aria-label="Trigger animation">
<svg class="control__vector" aria-hidden="true" role="img" viewBox="0 0 24 24">
<use xlink:href="#icon-play"></use>
</svg>
</button>
</li>
<li class="list__item list__item--burst color-12">
<h3 class="list__text">sao</h3>
<button class="control__button control__button--play" aria-label="Trigger animation">
<svg class="control__vector" aria-hidden="true" role="img" viewBox="0 0 24 24">
<use xlink:href="#icon-play"></use>
</svg>
</button>
</li>
</ul>
</section>
<!-- Related demos -->
</div>
<!-- /container -->
<script>
(function() {
var decoLetter = new Letters(document.querySelector('.deco'), {
size: 1000,
weight: 5,
color: '#212028',
//color: '#63646B',
duration: 2,
fade:0,
easing: d3_ease.easeExpOut.ease
});
decoLetter.hideInstantly();
setTimeout(function() {
decoLetter.show();
}, 200);
})();
</script>
<script src="js/mo.min.js"></script>
<script src="js/demo-1.js"></script>
</body>
</html>
HTML代码(index2.html):
<!doctype html>
<html lang="zh" class="no-js">
<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>HTML5分段式SVG文字动画特效</title>
<link res="stylesheet" type="text/css" href="fonts/morse/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<script>
document.documentElement.className = 'js';
</script>
<script src="js/segment.min.js"></script>
<script src="js/d3-ease.v0.6.js"></script>
<script src="js/letters.js"></script>
</head>
<body class="demo-2">
<div class="container">
<header class="zzsc-header">
<h1>Animated Letters</h1>
<nav class="zzsc-demos">
<a href="index.html">Examples</a>
<a class="current-demo" href="index2.html">Alphabet</a>
</nav>
<p class="info"><strong>Click the boxes to see the effect.</strong></p>
</header>
<section class="content">
<ul class="grid">
<li class="grid__item">
<div class="grid__inner" data-morse='a' data-phonetic="alpha">
<span class="grid__text">a</span>
<h3 class="grid__heading">a</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='b' data-phonetic="bravo">
<span class="grid__text">b</span>
<h3 class="grid__heading">b</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='c' data-phonetic="charlie">
<span class="grid__text">c</span>
<h3 class="grid__heading">c</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='d' data-phonetic="delta">
<span class="grid__text">d</span>
<h3 class="grid__heading">d</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='e' data-phonetic="echo">
<span class="grid__text">e</span>
<h3 class="grid__heading">e</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='f' data-phonetic="foxtrot">
<span class="grid__text">f</span>
<h3 class="grid__heading">f</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='g' data-phonetic="golf">
<span class="grid__text">g</span>
<h3 class="grid__heading">g</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='h' data-phonetic="hotel">
<span class="grid__text">h</span>
<h3 class="grid__heading">h</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='i' data-phonetic="india">
<span class="grid__text">i</span>
<h3 class="grid__heading">i</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='j' data-phonetic="juliett">
<span class="grid__text">j</span>
<h3 class="grid__heading">j</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='k' data-phonetic="kilo">
<span class="grid__text">k</span>
<h3 class="grid__heading">k</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='l' data-phonetic="lima">
<span class="grid__text">l</span>
<h3 class="grid__heading">l</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='m' data-phonetic="mike">
<span class="grid__text">m</span>
<h3 class="grid__heading">m</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='n' data-phonetic="november">
<span class="grid__text">n</span>
<h3 class="grid__heading">n</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='o' data-phonetic="oscar">
<span class="grid__text">o</span>
<h3 class="grid__heading">o</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner">
<span class="grid__text" data-morse='p' data-phonetic="papa">p</span>
<h3 class="grid__heading">p</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='q' data-phonetic="quebec">
<span class="grid__text">q</span>
<h3 class="grid__heading">q</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='r' data-phonetic="romeo">
<span class="grid__text">r</span>
<h3 class="grid__heading">r</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='s' data-phonetic="sierra">
<span class="grid__text">s</span>
<h3 class="grid__heading">s</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='t' data-phonetic="tango">
<span class="grid__text">t</span>
<h3 class="grid__heading">t</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='u' data-phonetic="uniform">
<span class="grid__text">u</span>
<h3 class="grid__heading">u</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='v' data-phonetic="victor">
<span class="grid__text">v</span>
<h3 class="grid__heading">v</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='w' data-phonetic="whiskey">
<span class="grid__text">w</span>
<h3 class="grid__heading">w</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='x' data-phonetic="xray">
<span class="grid__text">x</span>
<h3 class="grid__heading">x</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='y' data-phonetic="yankee">
<span class="grid__text">y</span>
<h3 class="grid__heading">y</h3>
</div>
</li>
<li class="grid__item">
<div class="grid__inner" data-morse='z' data-phonetic="zulu">
<span class="grid__text">z</span>
<h3 class="grid__heading">z</h3>
</div>
</li>
</ul>
</section>
</div>
<!-- /container -->
<script src="js/demo-2.js"></script>
</body>
</html>
JS代码(d3-ease.v0.6.js):
(function (global,factory){
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports):typeof define === 'function' && define.amd ? define(['exports'],factory):(factory((global.d3_ease ={
}
)));
}
(this,function (exports){
'use strict';
var linearIn ={
ease:function(t){
return +t;
}
}
;
var quadIn ={
ease:function(t){
return t * t;
}
}
;
var quadOut ={
ease:function(t){
return t * (2 - t);
}
}
;
var quadInOut ={
ease:function(t){
return ((t *= 2) <= 1 ? t * t:--t * (2 - t) + 1) / 2;
}
}
;
var cubicIn ={
ease:function(t){
return t * t * t;
}
}
;
var cubicOut ={
ease:function(t){
return --t * t * t + 1;
}
}
;
var cubicInOut ={
ease:function(t){
return ((t *= 2) <= 1 ? t * t * t:(t -= 2) * t * t + 2) / 2;
}
}
;
var exponent = 3;
var polyIn = (function polyIn(e){
return e = +e,{
exponent:polyIn,ease:function(t){
return Math.pow(t,e);
}
}
;
}
)(exponent);
var polyOut = (function polyOut(e){
return e = +e,{
exponent:polyOut,ease:function(t){
return 1 - Math.pow(1 - t,e);
}
}
;
}
)(exponent);
var polyInOut = (function polyInOut(e){
return e = +e,{
exponent:polyInOut,ease:function(t){
return ((t *= 2) <= 1 ? Math.pow(t,e):2 - Math.pow(2 - t,e)) / 2;
}
}
;
}
)(exponent);
var pi = Math.PI;
var halfPi = pi / 2;
var sinIn ={
ease:function(t){
return 1 - Math.cos(t * halfPi);
}
}
;
var sinOut ={
ease:function(t){
return Math.sin(t * halfPi);
}
}
;
var sinInOut ={
ease:function(t){
return (1 - Math.cos(pi * t)) / 2;
}
}
;
var expIn ={
ease:function(t){
return Math.pow(2,10 * t - 10);
}
}
;
var expOut ={
ease:function(t){
return 1 - Math.pow(2,-10 * t);
}
}
;
var expInOut ={
ease:function(t){
return ((t *= 2) <= 1 ? Math.pow(2,10 * t - 10):2 - Math.pow(2,10 - 10 * t)) / 2;
}
}
;
var circleIn ={
ease:function(t){
return 1 - Math.sqrt(1 - t * t);
}
}
;
var circleOut ={
ease:function(t){
return Math.sqrt(1 - --t * t);
}
}
;
var circleInOut ={
ease:function(t){
return ((t *= 2) <= 1 ? 1 - Math.sqrt(1 - t * t):Math.sqrt(1 - (t -= 2) * t) + 1) / 2;
}
}
;
var b1 = 4 / 11;
var b2 = 6 / 11;
var b3 = 8 / 11;
var b4 = 3 / 4;
var b5 = 9 / 11;
var b6 = 10 / 11;
var b7 = 15 / 16;
var b8 = 21 / 22;
var b9 = 63 / 64;
var b0 = 1 / b1 / b1;
function bounce(t){
return (t = +t) < b1 ? b0 * t * t:t < b3 ? b0 * (t -= b2) * t + b4:t < b6 ? b0 * (t -= b5) * t + b7:b0 * (t -= b8) * t + b9;
}
var bounceIn ={
ease:function(t){
return 1 - bounce(1 - t);
}
}
;
var bounceOut ={
ease:bounce}
;
var bounceInOut ={
ease:function(t){
return ((t *= 2) <= 1 ? 1 - bounce(1 - t):bounce(t - 1) + 1) / 2;
}
}
;
var overshoot = 1.70158;
var backIn = (function backIn(s){
return s = +s,{
overshoot:backIn,ease:function(t){
return t * t * ((s + 1) * t - s);
}
}
;
}
)(overshoot);
var backOut = (function backOut(s){
return s = +s,{
overshoot:backOut,ease:function(t){
return --t * t * ((s + 1) * t + s) + 1;
}
}
;
}
)(overshoot);
var backInOut = (function backInOut(s){
return s = +s,{
overshoot:backInOut,ease:function(t){
return ((t *= 2) < 1 ? t * t * ((s + 1) * t - s):(t -= 2) * t * ((s + 1) * t + s) + 2) / 2;
}
}
;
}
)(overshoot);
var tau = 2 * Math.PI;
var amplitude = 1;
var period = 0.3;
var elasticIn = (function elasticIn(a,p){
var s = Math.asin(1 / (a = Math.max(1,a))) * (p /= tau);
return{
amplitude:function(a){
return elasticIn(a,p * tau);
}
,period:function(p){
return elasticIn(a,p);
}
,ease:function(t){
return a * Math.pow(2,10 * --t) * Math.sin((s - t) / p);
}
}
;
}
)(amplitude,period);
var elasticOut = (function elasticOut(a,p){
var s = Math.asin(1 / (a = Math.max(1,a))) * (p /= tau);
return{
amplitude:function(a){
return elasticOut(a,p * tau);
}
,period:function(p){
return elasticOut(a,p);
}
,ease:function(t){
return 1 - a * Math.pow(2,-10 * (t = +t)) * Math.sin((t + s) / p);
}
}
;
}
)(amplitude,period);
var elasticInOut = (function elasticInOut(a,p){
var s = Math.asin(1 / (a = Math.max(1,a))) * (p /= tau);
return{
amplitude:function(a){
return elasticInOut(a,p * tau);
}
,period:function(p){
return elasticInOut(a,p);
}
,ease:function(t){
return ((t = t * 2 - 1) < 0 ? a * Math.pow(2,10 * t) * Math.sin((s - t) / p):2 - a * Math.pow(2,-10 * t) * Math.sin((s + t) / p)) / 2;
}
}
;
}
)(amplitude,period);
var version = "0.6.0";
exports.version = version;
exports.easeLinearIn = linearIn;
exports.easeLinearOut = linearIn;
exports.easeLinearInOut = linearIn;
exports.easeQuadIn = quadIn;
exports.easeQuadOut = quadOut;
exports.easeQuadInOut = quadInOut;
exports.easeCubicIn = cubicIn;
exports.easeCubicOut = cubicOut;
exports.easeCubicInOut = cubicInOut;
exports.easePolyIn = polyIn;
exports.easePolyOut = polyOut;
exports.easePolyInOut = polyInOut;
exports.easeSinIn = sinIn;
exports.easeSinOut = sinOut;
exports.easeSinInOut = sinInOut;
exports.easeExpIn = expIn;
exports.easeExpOut = expOut;
exports.easeExpInOut = expInOut;
exports.easeCircleIn = circleIn;
exports.easeCircleOut = circleOut;
exports.easeCircleInOut = circleInOut;
exports.easeBounceIn = bounceIn;
exports.easeBounceOut = bounceOut;
exports.easeBounceInOut = bounceInOut;
exports.easeBackIn = backIn;
exports.easeBackOut = backOut;
exports.easeBackInOut = backInOut;
exports.easeElasticIn = elasticIn;
exports.easeElasticOut = elasticOut;
exports.easeElasticInOut = elasticInOut;
}
));
JS代码(demo-2.js):
(function(){
var items = [].slice.call(document.querySelectorAll('ul.grid > li.grid__item'));
function init(){
items.forEach(function(item){
var word = item.querySelector('.grid__heading'),// initialize the plugininstance = new Letters(word,{
size:200,weight:10,color:'#E65454',duration:0.8,delay:0.1,fade:0,easing:d3_ease.easeExpOut.ease}
);
// show wordinstance.showInstantly();
item.addEventListener('click',function(){
instance.hide({
duration:1,delay:0,fade:1,easing:d3_ease.easeExpOut.ease,callback:function(){
instance.show();
}
}
);
}
);
}
);
}
init();
}
)();
CSS代码(zzsc-demo.css):
@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?rretjt');src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),url('../fonts/icomoon.woff?rretjt') format('woff'),url('../fonts/icomoon.ttf?rretjt') format('truetype'),url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
@font-face{font-family:'knarfart';font-weight:normal;font-style:normal;src:url('../fonts/knarfart/knarfart-webfont.eot');src:url('../fonts/knarfart/knarfart-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/knarfart/knarfart-webfont.woff2') format('woff2'),url('../fonts/knarfart/knarfart-webfont.woff') format('woff'),url('../fonts/knarfart/knarfart-webfont.ttf') format('truetype'),url('../fonts/knarfart/knarfart-webfont.svg#knarfart') format('svg');}
@font-face{font-family:'morse_coderegular';font-weight:normal;font-style:normal;src:url('../fonts/morse/m0rse-webfont.eot');src:url('../fonts/morse/m0rse-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/morse/m0rse-webfont.woff2') format('woff2'),url('../fonts/morse/m0rse-webfont.woff') format('woff'),url('../fonts/morse/m0rse-webfont.ttf') format('truetype'),url('../fonts/morse/m0rse-webfont.svg#morse_coderegular') format('svg');}
*,*::after,*::before{-webkit-box-sizing:border-box;box-sizing:border-box;}
body{font-family:'Avenir Next',Avenir,'Helvetica Neue',Helvetica,Arial,sans-serif;counter-reset:gridcounter;color:#3e3d47;background:#1e1d23;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{text-decoration:none;color:#aaa;outline:none;}
a:hover,a:focus{color:#fff;outline:none;}
.hidden{position:absolute;left:-100vw;width:0;height:0;}
.container{position:relative;overflow:hidden;}
.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{position:relative;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;overflow:hidden;padding:3.5em 1em 1em;text-align:center;text-align:center;}
.demo-1 .zzsc-header{height:calc(100vh - 40px);margin:20px 20px 20px;padding:2em 1em 4em;background:url(../img/mouse.svg) no-repeat left 50% bottom 40px;}
.deco{font-family:'knarfart',cursive;font-size:90vw;line-height:110vh;position:absolute;z-index:-1;top:0;left:0;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;overflow:hidden;width:100%;height:100%;pointer-events:none;color:rgba(0,0,0,0.06);background:#23222a;}
.zzsc-header h1{font-size:2.35em;font-weight:400;line-height:1;margin:0;padding:0.85em 0 0;letter-spacing:0.5em;word-spacing:-0.3em;text-transform:uppercase;color:#e65454;}
.demo-1 .zzsc-header h1{font-size:3.35em;}
.zzsc-header p{font-weight:500;margin:2em 0 0;}
.info{color:#e65454;}
.zzsc-demos{font-size:0.95em;font-weight:bold;line-height:1;margin:2em 0 0 0;}
.zzsc-demos a{position:relative;display:inline-block;padding:0 0.5em;pointer-events:auto;}
.zzsc-demos a:not(:last-child)::after{left:calc(100% + 0.5em);}
.zzsc-demos a:not(:last-child){margin:0 1em 0.1em 0;}
.zzsc-demos a.current-demo{color:#504f55;}
/* Top Navigation Style */
.zzsc-links{line-height:1;position:relative;display:inline-block;text-align:center;white-space:nowrap;}
.zzsc-links::after,.zzsc-demos a:not(:last-child)::after{content:'';position:absolute;top:0;left:50%;width:1px;height:100%;background:rgba(255,255,255,0.1);-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.zzsc-icon{display:inline-block;width:1.5em;margin:0.15em 0.5em;text-decoration:none;}
.zzsc-icon span{display:none;}
.zzsc-icon::before{font-family:'icomoon';font-weight:normal;font-style:normal;font-variant:normal;line-height:1;margin:0 5px;text-transform:none;speak:none;-webkit-font-smoothing:antialiased;}
/* List */
.list{margin:0;padding:0;list-style:none;}
.list__item{position:relative;z-index:1;overflow:hidden;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;max-width:calc(100vw - 40px);height:calc(100vh - 40px);min-height:460px;margin:20px;padding:100px 0;text-align:center;}
.list__gap{min-height:0;height:auto;text-align:center;font-weight:bold;padding:1em 0;}
.list__item--burst .list__text div svg{/* fox for mo.js */
left:0;}
.list__text{position:relative;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;max-width:90%;pointer-events:none;}
.list__item p{font-size:1.5em;font-weight:bold;color:#777;}
.control__button{-webkit-flex:none;-ms-flex:none;flex:none;width:2em;height:2em;margin:3em 0 0;z-index:100;padding:0;border:0;background:none;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.control__button--active{pointer-events:none;opacity:0;}
.js .control__button:focus,.js .control__button:active{outline:none;}
.control__vector{width:100%;height:100%;fill:rgba(0,0,0,0.12);}
/* Background colors */
.color-1{background:#91a7d0;}
.color-2{background:#f6cac9;}
.color-3{background:#3d3d40;}
.color-4{background:#615e5f;}
.color-5{background:#3f51b5;}
.color-6{background:#403f6f;}
.color-7{background:#bec6d5;}
.color-8{background:#ffef67;}
.color-9{background:#f0eee9;}
.color-10{background:#e890bb;}
.color-11{background:#23222a;}
.color-12{background:#8788c5;}
/* Grid */
.grid{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;max-width:1300px;margin:3em auto 0;padding:1em;list-style:none;}
.grid__item{position:relative;-webkit-flex:1 1 280px;-ms-flex:1 1 280px;flex:1 1 280px;width:25%;padding:1.25em;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.grid__item::before{content:'';position:absolute;top:0%;left:50%;width:10px;height:100%;background:#1e1d23;-webkit-transform:rotate3d(0,0,1,40deg);transform:rotate3d(0,0,1,40deg);}
.grid__inner{position:relative;padding:1em;cursor:pointer;background:#23222a;}
.grid__inner::before{content:attr(data-morse);font-family:'morse_coderegular',sans-serif;font-size:13em;font-weight:normal;line-height:0.7;position:absolute;top:0;left:60px;padding:0 0.15em 0 0;color:#1e1d23;}
.grid__inner::after{content:attr(data-phonetic);font-family:'Lucida Sans Typewriter','Lucida Console',monaco,'Bitstream Vera Sans Mono',monospace;font-size:1.15em;font-weight:normal;position:absolute;right:1em;bottom:0;color:#1e1d23;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);-webkit-transform-origin:100% 50%;transform-origin:100% 50%;}
.grid__text{font-weight:bold;line-height:40px;position:relative;display:block;width:40px;height:40px;text-align:center;vertical-align:middle;color:#e65454;border-radius:50%;background:#1e1d23;}
.grid__heading{font-family:'knarfart',sans-serif;font-size:8em;line-height:200px;position:relative;z-index:10;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:100%;margin:0.5em 0;letter-spacing:-0.15em;}
.grid__heading .letter{margin:0 0.05em;}
/* 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:50em){.demo-1 .zzsc-header{background:none;}
.demo-1 .zzsc-header h1{font-size:8vw;}
.grid__item{width:100%;}
}
@media screen and (max-width:40em){.zzsc-header h1{font-size:1.85em;}
}
分享到QQ
分享到微博
微信扫一扫
