以下是 html5音乐录音播放动画特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>html5音乐录音播放动画特效 </title>
<link rel="stylesheet" type="text/css" href="css/icons.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr-custom.js"></script>
</head>
<body>
<div class="container">
<div class="content">
<p class="mobile-message">Scroll down to the button</p>
<div class="component" data-path-start="M280,466c0,0.13-0.001,0.26-0.003,0.39c-0.002,0.134-0.004,0.266-0.007,0.396
C279.572,482.992,266.307,496,250,496h-2.125H51.625H50c-16.316,0-29.592-13.029-29.99-29.249c-0.003-0.13-0.006-0.261-0.007-0.393
C20.001,466.239,20,466.119,20,466l0,0c0-0.141,0.001-0.281,0.003-0.422C20.228,449.206,33.573,436,50,436h1.625h196.25H250
c16.438,0,29.787,13.222,29.997,29.608C279.999,465.738,280,465.869,280,466L280,466z" data-path-listen="M181,466c0,0.13-0.001,0.26-0.003,0.39c-0.002,0.134-0.004,0.266-0.007,0.396
C180.572,482.992,167.307,496,151,496h-2.125h2.75H150c-16.316,0-29.592-13.029-29.99-29.249c-0.003-0.13-0.006-0.261-0.007-0.393
C120.001,466.239,120,466.119,120,466l0,0c0-0.141,0.001-0.281,0.003-0.422C120.228,449.206,133.573,436,150,436h1.625h-2.75H151
c16.438,0,29.787,13.222,29.997,29.608C180.999,465.738,181,465.869,181,466L181,466z" data-path-player="M290,40c0,0.13-0.001,380.26-0.003,380.39c-0.002,0.134,0.006,24.479,0.003,24.609 c0,3.095-2.562,5.001-5,5.001h-27.125H41.625H15c-1.875,0-5-1.25-5-5.001c-0.003-0.13,0.004-24.509,0.003-24.641 C10.001,420.239,10,40.119,10,40l0,0c0-0.141-0.002-24.859,0-25c0,0,0-5,5-5h26.625h216.25H285c2.438,0,5,1.906,5,5 C290.002,15.13,290,39.869,290,40L290,40z">
<!-- SVG with morphing paths and initial start button shape -->
<svg class="morpher" width="300" height="500">
<path class="morph__button" d="M280,466c0,0.13-0.001,0.26-0.003,0.39c-0.002,0.134-0.004,0.266-0.007,0.396
C279.572,482.992,266.307,496,250,496h-2.125H51.625H50c-16.316,0-29.592-13.029-29.99-29.249c-0.003-0.13-0.006-0.261-0.007-0.393
C20.001,466.239,20,466.119,20,466l0,0c0-0.141,0.001-0.281,0.003-0.422C20.228,449.206,33.573,436,50,436h1.625h196.25H250
c16.438,0,29.787,13.222,29.997,29.608C279.999,465.738,280,465.869,280,466L280,466z"/>
</svg>
<!-- Initial start button that switches into the recording button -->
<button class="button button--start">
<span class="button__content button__content--start">听这首歌</span>
<span class="button__content button__content--listen"><span class="icon icon--microphone"></span></span>
</button>
<!-- Music player -->
<div class="player player--hidden">
<img class="player__cover" src="img/Gramatik.jpg" alt="Water 4 The Soul by Gramatik" />
<div class="player__meta">
<h3 class="player__track">Virtual Insight</h3>
<h3 class="player__album">
<span class="player__album-name">Water 4 The Soul</span> by <span class="player__artist">Gramatik</span>
</h3>
<div class="player__controls">
<button class="player__control icon icon--skip-back" aria-label="Previous song"></button>
<button class="player__control player__control--play icon icon--play" aria-label="Play"></button>
<button class="player__control icon icon--skip-next" aria-label="Next song"></button>
</div>
</div>
<button class="button button--close"><span class="icon icon--cross"></span></button>
</div><!-- /player -->
</div><!-- /component -->
</div><!-- /content -->
</div><!-- /container -->
<script src="js/classie.js"></script>
<script src="js/snap.svg-min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
JS代码(main.js):
/** * main.js * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2015,Codrops * http://www.codrops.com */
;
(function(window){
'use strict';
/** * some helper functions */
// from http://stackoverflow.com/a/25273333var bezier = function(x1,y1,x2,y2,epsilon){
var curveX = function(t){
var v = 1 - t;
return 3 * v * v * t * x1 + 3 * v * t * t * x2 + t * t * t;
}
;
var curveY = function(t){
var v = 1 - t;
return 3 * v * v * t * y1 + 3 * v * t * t * y2 + t * t * t;
}
;
var derivativeCurveX = function(t){
var v = 1 - t;
return 3 * (2 * (t - 1) * t + v * v) * x1 + 3 * (- t * t * t + 2 * v * t) * x2;
}
;
return function(t){
var x = t,t0,t1,t2,x2,d2,i;
// First try a few iterations of Newton's method -- normally very fast.for (t2 = x,i = 0;
i < 8;
i++){
x2 = curveX(t2) - x;
if (Math.abs(x2) < epsilon) return curveY(t2);
d2 = derivativeCurveX(t2);
if (Math.abs(d2) < 1e-6) break;
t2 = t2 - x2 / d2;
}
t0 = 0,t1 = 1,t2 = x;
if (t2 < t0) return curveY(t0);
if (t2 > t1) return curveY(t1);
// Fallback to the bisection method for reliability.while (t0 < t1){
x2 = curveX(t2);
if (Math.abs(x2 - x) < epsilon) return curveY(t2);
if (x > x2) t0 = t2;
else t1 = t2;
t2 = (t1 - t0) * .5 + t0;
}
// Failurereturn curveY(t2);
}
;
}
,getRandomNumber = function(min,max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
,throttle = function(fn,delay){
var allowSample = true;
return function(e){
if (allowSample){
allowSample = false;
setTimeout(function(){
allowSample = true;
}
,delay);
fn(e);
}
}
;
}
,// from https://davidwalsh.name/vendor-prefixprefix = (function (){
var styles = window.getComputedStyle(document.documentElement,''),pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['','o']))[1],dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')','i'))[1];
return{
dom:dom,lowercase:pre,css:'-' + pre + '-',js:pre[0].toUpperCase() + pre.substr(1)}
;
}
)();
var support ={
transitions:Modernizr.csstransitions}
,transEndEventNames ={
'WebkitTransition':'webkitTransitionEnd','MozTransition':'transitionend','OTransition':'oTransitionEnd','msTransition':'MSTransitionEnd','transition':'transitionend'}
,transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],onEndTransition = function( el,callback,propTest ){
var onEndCallbackFn = function( ev ){
if( support.transitions ){
if( ev.target != this || propTest && ev.propertyName !== propTest && ev.propertyName !== prefix.css + propTest ) return;
this.removeEventListener( transEndEventName,onEndCallbackFn );
}
if( callback && typeof callback === 'function' ){
callback.call(this);
}
}
;
if( support.transitions ){
el.addEventListener( transEndEventName,onEndCallbackFn );
}
else{
onEndCallbackFn();
}
}
,// the main component element/wrappershzEl = document.querySelector('.component'),// the initial buttonshzCtrl = shzEl.querySelector('button.button--start'),// the svg element which contains the shape pathsshzSVGEl = shzEl.querySelector('svg.morpher'),// snapsvg instancesnap = Snap(shzSVGEl),// the SVG pathshzPathEl = snap.select('path'),// total number of notes/symbols moving towards the listen buttontotalNotes = 50,// the notes elementsnotes,// the note´s speed factor relative to the distance from the note element to the button.// if notesSpeedFactor = 1,then the speed equals the distance (in ms)notesSpeedFactor = 4.5,// simulation time for listening (ms)simulateTime = 6500,// window sizeswinsize ={
width:window.innerWidth,height:window.innerHeight}
,// button offsetshzCtrlOffset = shzCtrl.getBoundingClientRect(),// button sizesshzCtrlSize ={
width:shzCtrl.offsetWidth,height:shzCtrl.offsetHeight}
,// tells us if the listening animation is taking placeisListening = false,// audio player elementplayerEl = shzEl.querySelector('.player'),// close player controlplayerCloseCtrl = playerEl.querySelector('.button--close');
function init(){
// create the music notes elements - the musical symbols that will animate/move towards the listen buttoncreateNotes();
// bind eventsinitEvents();
}
/** * creates [totalNotes] note elements (the musical symbols that will animate/move towards the listen button) */
function createNotes(){
var notesEl = document.createElement('div'),notesElContent = '';
notesEl.className = 'notes';
for(var i = 0;
i < totalNotes;
++i){
// we have 6 different types of symbols (icon--note1,icon--note2 ... icon--note6)var j = (i + 1) - 6 * Math.floor(i/6);
notesElContent += '<div class="note icon icon--note' + j + '"></div>';
}
notesEl.innerHTML = notesElContent;
shzEl.insertBefore(notesEl,shzEl.firstChild)// reference to the notes elementsnotes = [].slice.call(notesEl.querySelectorAll('.note'));
}
/** * event binding */
function initEvents(){
// click on the initial buttonshzCtrl.addEventListener('click',listen);
// close the player viewplayerCloseCtrl.addEventListener('click',closePlayer);
// window resize:update window sizes and button offsetwindow.addEventListener('resize',throttle(function(ev){
winsize ={
width:window.innerWidth,height:window.innerHeight}
;
shzCtrlOffset = shzCtrl.getBoundingClientRect();
}
,10));
}
/** * transform the initial button into a circle shaped one that "listens" to the current song.. */
function listen(){
isListening = true;
// toggle classes (button content/text changes)classie.remove(shzCtrl,'button--start');
classie.add(shzCtrl,'button--listen');
// animate the shape of the button (we are using Snap.svg for this)animatePath(shzPathEl,shzEl.getAttribute('data-path-listen'),400,[0.8,-0.6,0.2,1],function(){
// ripples start...classie.add(shzCtrl,'button--animate');
// music notes animation starts...showNotes();
// simulate the song detectionsetTimeout(showPlayer,simulateTime);
}
);
}
/** * stop the ripples and notes animations */
function stopListening(){
isListening = false;
// ripples stop...classie.remove(shzCtrl,'button--animate');
// music notes animation stops...hideNotes();
}
/** * show the notes elements:first set a random position and then animate them towards the button */
function showNotes(){
notes.forEach(function(note){
// first position the notes randomly on the pagepositionNote(note);
// now,animate the notes torwards the buttonanimateNote(note);
}
);
}
/** * fade out the notes elements */
function hideNotes(){
notes.forEach(function(note){
note.style.opacity = 0;
}
);
}
/** * positions a note/symbol randomly on the page. The area is restricted to be somewhere outside of the viewport. * @param{
Element Node}
note - the note element */
function positionNote(note){
// we want to position the notes randomly (translation and rotation) outside of the viewportvar x = getRandomNumber(-2*(shzCtrlOffset.left + shzCtrlSize.width/2),2*(winsize.width - (shzCtrlOffset.left + shzCtrlSize.width/2))),y,rotation = getRandomNumber(-30,30);
if( x > -1*(shzCtrlOffset.top + shzCtrlSize.height/2) && x < shzCtrlOffset.top + shzCtrlSize.height/2 ){
y = getRandomNumber(0,1) > 0 ? getRandomNumber(-2*(shzCtrlOffset.top + shzCtrlSize.height/2),-1*(shzCtrlOffset.top + shzCtrlSize.height/2)):getRandomNumber(winsize.height - (shzCtrlOffset.top + shzCtrlSize.height/2),winsize.height + winsize.height - (shzCtrlOffset.top + shzCtrlSize.height/2));
}
else{
y = getRandomNumber(-2*(shzCtrlOffset.top + shzCtrlSize.height/2),winsize.height + winsize.height - (shzCtrlOffset.top + shzCtrlSize.height/2));
}
// first reset transition if anynote.style.WebkitTransition = note.style.transition = 'none';
// apply the random transformsnote.style.WebkitTransform = note.style.transform = 'translate3d(' + x + 'px,' + y + 'px,0) rotate3d(0,0,1,' + rotation + 'deg)';
// save the translation values for laternote.setAttribute('data-tx',Math.abs(x));
note.setAttribute('data-ty',Math.abs(y));
}
/** * animates a note torwards the button. Once that's done,it repositions the note and animates it again until the component is no longer listening. * @param{
Element Node}
note - the note element */
function animateNote(note){
setTimeout(function(){
if(!isListening) return;
// the transition speed of each note will be proportional to the its distance to the button// speed = notesSpeedFactor * distancevar noteSpeed = notesSpeedFactor * Math.sqrt(Math.pow(note.getAttribute('data-tx'),2) + Math.pow(note.getAttribute('data-ty'),2));
// apply the transitionnote.style.WebkitTransition = '-webkit-transform ' + noteSpeed + 'ms ease,opacity 0.8s';
note.style.transition = 'transform ' + noteSpeed + 'ms ease-in,opacity 0.8s';
// now apply the transform (reset the transform so the note moves to its original position) and fade in the notenote.style.WebkitTransform = note.style.transform = 'translate3d(0,0,0)';
note.style.opacity = 1;
// after the animation is finished,var onEndTransitionCallback = function(){
// reset transitions and stylesnote.style.WebkitTransition = note.style.transition = 'none';
note.style.opacity = 0;
if(!isListening) return;
positionNote(note);
animateNote(note);
}
;
onEndTransition(note,onEndTransitionCallback,'transform');
}
,60);
}
/** * shows the audio player */
function showPlayer(){
// stop the ripples and notes animationsstopListening();
// morph the listening button shape into the audio player shape// we are setting a timeout so that there´s a small delay (it just looks nicer)setTimeout(function(){
animatePath(shzPathEl,shzEl.getAttribute('data-path-player'),450,[0.7,0,0.3,1],function(){
// show audio playerclassie.remove(playerEl,'player--hidden');
}
);
// hide buttonclassie.add(shzCtrl,'button--hidden');
}
,250);
// remove this class so the button content/text gets hiddenclassie.remove(shzCtrl,'button--listen');
}
/** * closes the audio player */
function closePlayer(){
// hide the playerclassie.add(playerEl,'player--hidden');
// morph the player shape into the initial button shapeanimatePath(shzPathEl,shzEl.getAttribute('data-path-start'),400,[0.4,1,0.3,1]);
// show again the button and its content// we are setting a timeout so that there´s a small delay (it just looks nicer)setTimeout(function(){
classie.remove(shzCtrl,'button--hidden');
classie.add(shzCtrl,'button--start');
}
,50);
}
/** * animates an SVG Path (using Snap.svg) * * @param{
Element Node}
el - the path element * @param{
string}
path - the new path definition * @param{
number}
duration - animation time * @param{
array|function}
timingFunction - the animation easing. Either a Snap mina function or an array for the 4 bezier points * @param{
function}
callback - callback function */
function animatePath(el,path,duration,timingFunction,callback){
var epsilon = (1000 / 60 / duration) / 4,timingFunction = typeof timingFunction == 'function' ? timingFunction:bezier(timingFunction[0],timingFunction[1],timingFunction[2],timingFunction[3],epsilon);
el.stop().animate({
'path':path}
,duration,timingFunction,callback);
}
init();
}
)(window);
JS代码(modernizr-custom.js):
/*! modernizr 3.2.0 (Custom Build) | MIT * * http://modernizr.com/download/?-csstransitions-prefixedcss !*/
!function(e,n,t){
function r(e,n){
return typeof e===n}
function o(){
var e,n,t,o,i,s,a;
for(var f in C)if(C.hasOwnProperty(f)){
if(e=[],n=C[f],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;
t<n.options.aliases.length;
t++)e.push(n.options.aliases[t].toLowerCase());
for(o=r(n.fn,"function")?n.fn():n.fn,i=0;
i<e.length;
i++)s=e[i],a=s.split("."),1===a.length?Modernizr[a[0]]=o:(!Modernizr[a[0]]||Modernizr[a[0]]instanceof Boolean||(Modernizr[a[0]]=new Boolean(Modernizr[a[0]])),Modernizr[a[0]][a[1]]=o),g.push((o?"":"no-")+a.join("-"))}
}
function i(e){
var n=_.className,t=Modernizr._config.classPrefix||"";
if(w&&(n=n.baseVal),Modernizr._config.enableJSClass){
var r=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");
n=n.replace(r,"$1"+t+"js$2")}
Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),w?_.className.baseVal=n:_.className=n)}
function s(e){
return e.replace(/([A-Z])/g,function(e,n){
return"-"+n.toLowerCase()}
).replace(/^ms-/,"-ms-")}
function a(e){
return e.replace(/([a-z])-([a-z])/g,function(e,n,t){
return n+t.toUpperCase()}
).replace(/^-/,"")}
function f(e,n){
return!!~(""+e).indexOf(n)}
function l(){
return"function"!=typeof n.createElement?n.createElement(arguments[0]):w?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}
function u(e,n){
return function(){
return e.apply(n,arguments)}
}
function p(e,n,t){
var o;
for(var i in e)if(e[i]in n)return t===!1?e[i]:(o=n[e[i]],r(o,"function")?u(o,t||n):o);
return!1}
function d(){
var e=n.body;
return e||(e=l(w?"svg":"body"),e.fake=!0),e}
function c(e,t,r,o){
var i,s,a,f,u="modernizr",p=l("div"),c=d();
if(parseInt(r,10))for(;
r--;
)a=l("div"),a.id=o?o[r]:u+(r+1),p.appendChild(a);
return i=l("style"),i.type="text/css",i.id="s"+u,(c.fake?c:p).appendChild(i),c.appendChild(p),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(n.createTextNode(e)),p.id=u,c.fake&&(c.style.background="",c.style.overflow="hidden",f=_.style.overflow,_.style.overflow="hidden",_.appendChild(c)),s=t(p,e),c.fake?(c.parentNode.removeChild(c),_.style.overflow=f,_.offsetHeight):p.parentNode.removeChild(p),!!s}
function m(n,r){
var o=n.length;
if("CSS"in e&&"supports"in e.CSS){
for(;
o--;
)if(e.CSS.supports(s(n[o]),r))return!0;
return!1}
if("CSSSupportsRule"in e){
for(var i=[];
o--;
)i.push("("+s(n[o])+":"+r+")");
return i=i.join(" or "),c("@supports ("+i+"){
#modernizr{
position:absolute;
}
}
",function(e){
return"absolute"==getComputedStyle(e,null).position}
)}
return t}
function v(e,n,o,i){
function s(){
p&&(delete N.style,delete N.modElem)}
if(i=r(i,"undefined")?!1:i,!r(o,"undefined")){
var u=m(e,o);
if(!r(u,"undefined"))return u}
for(var p,d,c,v,h,y=["modernizr","tspan"];
!N.style;
)p=!0,N.modElem=l(y.shift()),N.style=N.modElem.style;
for(c=e.length,d=0;
c>d;
d++)if(v=e[d],h=N.style[v],f(v,"-")&&(v=a(v)),N.style[v]!==t){
if(i||r(o,"undefined"))return s(),"pfx"==n?v:!0;
try{
N.style[v]=o}
catch(g){
}
if(N.style[v]!=h)return s(),"pfx"==n?v:!0}
return s(),!1}
function h(e,n,t,o,i){
var s=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+b.join(s+" ")+s).split(" ");
return r(n,"string")||r(n,"undefined")?v(a,n,o,i):(a=(e+" "+P.join(s+" ")+s).split(" "),p(a,n,t))}
function y(e,n,r){
return h(e,t,t,n,r)}
var g=[],C=[],x={
_version:"3.2.0",_config:{
classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0}
,_q:[],on:function(e,n){
var t=this;
setTimeout(function(){
n(t[e])}
,0)}
,addTest:function(e,n,t){
C.push({
name:e,fn:n,options:t}
)}
,addAsyncTest:function(e){
C.push({
name:null,fn:e}
)}
}
,Modernizr=function(){
}
;
Modernizr.prototype=x,Modernizr=new Modernizr;
var _=n.documentElement,w="svg"===_.nodeName.toLowerCase(),S="Moz O ms Webkit",b=x._config.usePrefixes?S.split(" "):[];
x._cssomPrefixes=b;
var E=function(n){
var r,o=prefixes.length,i=e.CSSRule;
if("undefined"==typeof i)return t;
if(!n)return!1;
if(n=n.replace(/^@/,""),r=n.replace(/-/g,"_").toUpperCase()+"_RULE",r in i)return"@"+n;
for(var s=0;
o>s;
s++){
var a=prefixes[s],f=a.toUpperCase()+"_"+r;
if(f in i)return"@-"+a.toLowerCase()+"-"+n}
return!1}
;
x.atRule=E;
var P=x._config.usePrefixes?S.toLowerCase().split(" "):[];
x._domPrefixes=P;
var z={
elem:l("modernizr")}
;
Modernizr._q.push(function(){
delete z.elem}
);
var N={
style:z.elem.style}
;
Modernizr._q.unshift(function(){
delete N.style}
),x.testAllProps=h;
var T=x.prefixed=function(e,n,t){
return 0===e.indexOf("@")?E(e):(-1!=e.indexOf("-")&&(e=a(e)),n?h(e,n,t):h(e,"pfx"))}
;
x.prefixedCSS=function(e){
var n=T(e);
return n&&s(n)}
;
x.testAllProps=y,Modernizr.addTest("csstransitions",y("transition","all",!0)),o(),i(g),delete x.addTest,delete x.addAsyncTest;
for(var j=0;
j<Modernizr._q.length;
j++)Modernizr._q[j]();
e.Modernizr=Modernizr}
(window,document);
CSS代码(demo.css):
@font-face{font-weight:normal;font-style:normal;font-family:'codropsicons';src:url('../fonts/codropsicons/codropsicons.eot');src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),url('../fonts/codropsicons/codropsicons.woff') format('woff'),url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');}
*,*:after,*:before{-webkit-box-sizing:border-box;box-sizing:border-box;}
.clearfix:before,.clearfix:after{display:table;content:'';}
.clearfix:after{clear:both;}
body{font-family:'Avenir Next',Avenir,'Helvetica Neue',Helvetica,Arial,sans-serif;color:#fff;background:#00a7e7 url(../img/bg.png);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{outline:none;color:#f0f0f0;text-decoration:none;}
a:hover,a:focus{color:#fff;}
.container{height:100vh;min-height:665px;overflow:hidden;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;}
.mobile-message{padding:2em 1em 4em;position:absolute;width:100%;text-align:center;font-weight:bold;display:none;}
/* Header */
.codrops-header{padding:1em 1em 0;text-align:center;position:relative;z-index:10;}
.codrops-header h1{margin:0.5em 0 0;font-size:1.85em;font-weight:normal;line-height:1;}
.codrops-header h1 span{display:block;padding:0.5em 0 1em;font-weight:bold;color:#0892C7;font-size:0.5em;}
/* Top Navigation Style */
.codrops-links{position:relative;display:inline-block;text-align:center;white-space:nowrap;font-size:0.85em;}
.codrops-links::after{position:absolute;top:0;left:50%;width:1px;height:100%;background:rgba(0,0,0,0.1);content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.codrops-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.codrops-icon span{display:none;}
.codrops-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'codropsicons';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
.codrops-icon--drop:before{content:"\e001";color:#0E90C5;}
.codrops-icon--prev:before{content:"\e004";}
/* Content */
.content{padding:1em 0;}
@media screen and (max-height:650px){.mobile-message{display:block;}
}
CSS代码(icons.css):
@font-face{font-family:'icomoon';src:url('../fonts/icons/icomoon.eot?4djz1y');src:url('../fonts/icons/icomoon.eot?4djz1y#iefix') format('embedded-opentype'),url('../fonts/icons/icomoon.woff2?4djz1y') format('woff2'),url('../fonts/icons/icomoon.ttf?4djz1y') format('truetype'),url('../fonts/icons/icomoon.woff?4djz1y') format('woff'),url('../fonts/icons/icomoon.svg?4djz1y#icomoon') format('svg');font-weight:normal;font-style:normal;}
.icon{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.icon--skip-back:before{content:"\f0a5";}
.icon--skip-next:before{content:"\f0a6";}
.icon--pause:before{content:"\f0bb";}
.icon--play:before{content:"\f0bf";}
.icon--microphone:before{content:"\e048";}
.icon--cross:before{content:"\e90c";}
.icon--note1:before{content:"\e902";}
.icon--note2:before{content:"\e903";}
.icon--note3:before{content:"\e904";}
.icon--note4:before{content:"\e905";}
.icon--note5:before{content:"\e906";}
.icon--note6:before{content:"\e907";}
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;}
分享到QQ
分享到微博
微信扫一扫
