以下是 html5 3d宽屏幻灯片特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5 3d宽屏幻灯片代码</title>
<link rel="stylesheet" type="text/css" href="css/normalize.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="slideshow" id="slideshow">
<ol class="slides">
<li class="current">
<div class="description">
<h2>Tilted Content Slideshow</h2>
<p>This slider, as seen on the landing page of the <a href="#">FWA</a>, plays with 3D perspective and performs some interesting animations on the right-hand side images.</p>
</div>
<div class="tiltview col">
<a href="#"><img src="img/1_screen.jpg"/></a>
<a href="https://13141618.taobao.com/jiaoben/"><img src="img/2_screen.jpg"/></a>
</div>
</li>
<li>
<div class="description">
<h2>CSS Animations</h2>
<p>We are using 12 different animations for showing and hiding the items of a slide. The animations are defined by randomly adding data-attributes called <code>data-effect-in</code> and <code>data-effect-out</code> for every slide. </p>
</div>
<div class="tiltview row">
<a href="#"><img src="img/3_mobile.jpg"/></a>
<a href="#"><img src="img/4_mobile.jpg"/></a>
</div>
</li>
<li>
<div class="description">
<h2>Tilted Items</h2>
<p>The perspective view is achieved by adding a perspective value to the slide list item and tilting a division that contains the two screenshots.</p>
</div>
<div class="tiltview col">
<a href="#"><img src="img/5_screen.jpg"/></a>
<a href="#"><img src="img/6_screen.jpg"/></a>
</div>
</li>
<li>
<div class="description">
<h2>Column or Row</h2>
<p>The items in the tilted container are either laid out in a column or in a row. For some directions we need to adjust the animation delays for the items, since we don't want the items to overlap each other when they move in or out.</p>
</div>
<div class="tiltview row">
<a href="#"><img src="img/1_mobile.jpg"/></a>
<a href="https://13141618.taobao.com/jiaoben/"><img src="img/2_mobile.jpg"/></a>
</div>
</li>
<li>
<div class="description">
<h2>Responsiveness</h2>
<p>For smaller screens, the items on the right hand side will become less opaque and serve as decoration only. The focus will be on the description which will occupy all the width.</p>
</div>
<div class="tiltview col">
<a href="#"><img src="img/3_screen.jpg"/></a>
<a href="#"><img src="img/4_screen.jpg"/></a>
</div>
</li>
<li>
<div class="description">
<h2>Navigation</h2>
<p>For the "line" navigation we use a little trick to make the clickable area a bit bigger: we add a thick white border to the top and bottom of the span. Since the border is part of the element, it will be part of the clickable zone.</p>
</div>
<div class="tiltview row">
<a href="#"><img src="img/5_mobile.jpg"/></a>
<a href="#"><img src="img/6_mobile.jpg"/></a>
</div>
</li>
</ol>
</div>
<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript" src="js/tiltSlider.js"></script>
<script type="text/javascript">
new TiltSlider(document.getElementById('slideshow'));
</script>
</body>
</html>
JS代码(modernizr.custom.js):
/* Modernizr 2.7.1 (Custom Build) | MIT & BSD * Build:http://modernizr.com/download/#-cssanimations-csstransforms3d-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load */
;
window.Modernizr=function(a,b,c){
function z(a){
j.cssText=a}
function A(a,b){
return z(m.join(a+";
")+(b||""))}
function B(a,b){
return typeof a===b}
function C(a,b){
return!!~(""+a).indexOf(b)}
function D(a,b){
for(var d in a){
var e=a[d];
if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}
return!1}
function E(a,b,d){
for(var e in a){
var f=b[a[e]];
if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}
return!1}
function F(a,b,c){
var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");
return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}
var d="2.7.1",e={
}
,f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={
}
.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={
}
,r={
}
,s={
}
,t=[],u=t.slice,v,w=function(a,c,d,e){
var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");
if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);
return f=["­
",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i}
,x={
}
.hasOwnProperty,y;
!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){
return x.call(a,b)}
:y=function(a,b){
return b in a&&B(a.constructor.prototype[b],"undefined")}
,Function.prototype.bind||(Function.prototype.bind=function(b){
var c=this;
if(typeof c!="function")throw new TypeError;
var d=u.call(arguments,1),e=function(){
if(this instanceof e){
var a=function(){
}
;
a.prototype=c.prototype;
var f=new a,g=c.apply(f,d.concat(u.call(arguments)));
return Object(g)===g?g:f}
return c.apply(b,d.concat(u.call(arguments)))}
;
return e}
),q.cssanimations=function(){
return F("animationName")}
,q.csstransforms3d=function(){
var a=!!F("perspective");
return a&&"webkitPerspective"in g.style&&w("@media (transform-3d),(-webkit-transform-3d){
#modernizr{
left:9px;
position:absolute;
height:3px;
}
}
",function(b,c){
a=b.offsetLeft===9&&b.offsetHeight===3}
),a}
;
for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));
return e.addTest=function(a,b){
if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);
else{
a=a.toLowerCase();
if(e[a]!==c)return e;
b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}
return e}
,z(""),i=k=null,function(a,b){
function l(a,b){
var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;
return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}
function m(){
var a=s.elements;
return typeof a=="string"?a.split(" "):a}
function n(a){
var b=j[a[h]];
return b||(b={
}
,i++,a[h]=i,j[i]=b),b}
function o(a,c,d){
c||(c=b);
if(k)return c.createElement(a);
d||(d=n(c));
var g;
return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}
function p(a,c){
a||(a=b);
if(k)return a.createDocumentFragment();
c=c||n(a);
var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;
for(;
e<g;
e++)d.createElement(f[e]);
return d}
function q(a,b){
b.cache||(b.cache={
}
,b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){
return s.shivMethods?o(c,a,b):b.createElem(c)}
,a.createDocumentFragment=Function("h,f","return function(){
var n=f.cloneNode(),c=n.createElement;
h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){
return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'}
)+");
return n}
")(s,b.frag)}
function r(a){
a||(a=b);
var c=n(a);
return s.shivCSS&&!g&&!c.hasCSS&&(c.hasCSS=!!l(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{
display:block}
mark{
background:#FF0;
color:#000}
template{
display:none}
")),k||q(a,c),a}
var c="3.7.0",d=a.html5||{
}
,e=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,f=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,g,h="_html5shiv",i=0,j={
}
,k;
(function(){
try{
var a=b.createElement("a");
a.innerHTML="<xyz></xyz>",g="hidden"in a,k=a.childNodes.length==1||function(){
b.createElement("a");
var a=b.createDocumentFragment();
return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}
()}
catch(c){
g=!0,k=!0}
}
)();
var s={
elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p}
;
a.html5=s,r(b)}
(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){
return D([a])}
,e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){
return b?F(a,b,c):F(a,"pfx")}
,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}
(this,this.document),function(a,b,c){
function d(a){
return"[object Function]"==o.call(a)}
function e(a){
return"string"==typeof a}
function f(){
}
function g(a){
return!a||"loaded"==a||"complete"==a||"uninitialized"==a}
function h(){
var a=p.shift();
q=1,a?a.t?m(function(){
("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)}
,0):(a(),h()):q=0}
function i(a,c,d,e,f,i,j){
function k(b){
if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){
"img"!=a&&m(function(){
t.removeChild(l)}
,50);
for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}
}
var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={
t:d,s:c,e:f,a:i,x:j}
;
1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){
k.call(this,r)}
,p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}
function j(a,b,c,d,f){
return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}
function k(){
var a=B;
return a.loader={
load:j,i:0}
,a}
var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={
}
.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){
return"[object Array]"==o.call(a)}
,x=[],y={
}
,z={
timeout:function(a,b){
return b.length&&(a.timeout=b[0]),a}
}
,A,B;
B=function(a){
function b(a){
var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={
url:c,origUrl:c,prefixes:a}
,e,f,g;
for(f=0;
f<d;
f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));
for(f=0;
f<b;
f++)c=x[f](c);
return c}
function g(a,e,f,g,h){
var i=b(a),j=i.autoCallback;
i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){
k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2}
)))}
function h(a,b){
function c(a,c){
if(a){
if(e(a))c||(j=function(){
var a=[].slice.call(arguments);
k.apply(this,a),l()}
),g(a,j,b,0,h);
else if(Object(a)===a)for(n in m=function(){
var b=0,c;
for(c in a)a.hasOwnProperty(c)&&b++;
return b}
(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){
var a=[].slice.call(arguments);
k.apply(this,a),l()}
:j[n]=function(a){
return function(){
var b=[].slice.call(arguments);
a&&a.apply(this,b),l()}
}
(k[n])),g(a[n],j,b,n,h))}
else!c&&l()}
var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;
c(h?a.yep:a.nope,!!i),i&&c(i)}
var i,j,l=this.yepnope.loader;
if(e(a))g(a,0,l,0);
else if(w(a))for(i=0;
i<a.length;
i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);
else Object(a)===a&&h(a,l)}
,B.addPrefix=function(a,b){
z[a]=b}
,B.addFilter=function(a){
x.push(a)}
,B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){
b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"}
,0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){
var k=b.createElement("script"),l,o,e=e||B.errorTimeout;
k.src=a;
for(o in d)k.setAttribute(o,d[o]);
c=j?h:c||f,k.onreadystatechange=k.onload=function(){
!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)}
,m(function(){
l||(l=1,c(1))}
,e),i?k.onload():n.parentNode.insertBefore(k,n)}
,a.yepnope.injectCss=function(a,c,d,e,g,i){
var e=b.createElement("link"),j,c=i?h:c||f;
e.href=a,e.rel="stylesheet",e.type="text/css";
for(j in d)e.setAttribute(j,d[j]);
g||(n.parentNode.insertBefore(e,n),m(c,0))}
}
(this,document),Modernizr.load=function(){
yepnope.apply(window,[].slice.call(arguments,0))}
;
JS代码(tiltSlider.js):
/** * tiltSlider.js v1.0.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2014,Codrops * http://www.codrops.com */
;
( function( window ){
'use strict';
// https://gist.github.com/edankwan/4389601Modernizr.addTest('csstransformspreserve3d',function (){
var prop = Modernizr.prefixed('transformStyle');
var val = 'preserve-3d';
var computedStyle;
if(!prop) return false;
prop = prop.replace(/([A-Z])/g,function(str,m1){
return '-' + m1.toLowerCase();
}
).replace(/^ms-/,'-ms-');
Modernizr.testStyles('#modernizr{
' + prop + ':' + val + ';
}
',function (el,rule){
computedStyle = window.getComputedStyle ? getComputedStyle(el,null).getPropertyValue(prop):'';
}
);
return (computedStyle === val);
}
);
var support ={
animations:Modernizr.cssanimations,preserve3d:Modernizr.csstransformspreserve3d,transforms3d:Modernizr.csstransforms3d}
,isSupported = support.animations && support.preserve3d && support.transforms3d,animEndEventNames ={
'WebkitAnimation':'webkitAnimationEnd','OAnimation':'oAnimationEnd','msAnimation':'MSAnimationEnd','animation':'animationend'}
,// animation end event nameanimEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ];
function extend( a,b ){
for( var key in b ){
if( b.hasOwnProperty( key ) ){
a[key] = b[key];
}
}
return a;
}
function TiltSlider( el,options ){
this.el = el;
// available effects for the animations (animation class names) - when a item comes in / outthis.animEffectsOut = ['moveUpOut','moveDownOut','slideUpOut','slideDownOut','slideLeftOut','slideRightOut'];
this.animEffectsIn = ['moveUpIn','moveDownIn','slideUpIn','slideDownIn','slideLeftIn','slideRightIn'];
// the itemsthis.items = this.el.querySelector( 'ol.slides' ).children;
// total itemsthis.itemsCount = this.items.length;
if( !this.itemsCount ) return;
// index of the current itemthis.current = 0;
this.options = extend({
}
,this.options );
extend( this.options,options );
this._init();
}
TiltSlider.prototype.options ={
}
;
TiltSlider.prototype._init = function(){
this._addNavigation();
this._initEvents();
}
// add the navigation to the DOMTiltSlider.prototype._addNavigation = function(){
// add nav "dots"this.nav = document.createElement( 'nav' )var inner = '';
for( var i = 0;
i < this.itemsCount;
++i ){
inner += i === 0 ? '<span class="current"></span>':'<span></span>';
}
this.nav.innerHTML = inner;
this.el.appendChild( this.nav );
this.navDots = [].slice.call( this.nav.children );
}
TiltSlider.prototype._initEvents = function(){
var self = this;
// show a new item when clicking the navigation "dots"this.navDots.forEach( function( dot,idx ){
dot.addEventListener( 'click',function(){
if( idx !== self.current ){
self._showItem( idx );
}
}
);
}
);
}
TiltSlider.prototype._showItem = function( pos ){
if( this.isAnimating ){
return false;
}
this.isAnimating = true;
classie.removeClass( this.navDots[ this.current ],'current' );
var self = this,// the current itemcurrentItem = this.items[ this.current ];
this.current = pos;
// next item to come invar nextItem = this.items[ this.current ],// set random effects for the itemsoutEffect = this.animEffectsOut[ Math.floor( Math.random() * this.animEffectsOut.length ) ],inEffect = this.animEffectsIn[ Math.floor( Math.random() * this.animEffectsOut.length ) ];
currentItem.setAttribute( 'data-effect-out',outEffect );
nextItem.setAttribute( 'data-effect-in',inEffect );
classie.addClass( this.navDots[ this.current ],'current' );
var cntAnims = 0,// the number of elements that actually animate inside the current itemanimElemsCurrentCount = currentItem.querySelector( '.tiltview' ).children.length,// the number of elements that actually animate inside the next itemanimElemsNextCount = nextItem.querySelector( '.tiltview' ).children.length,// keep track of the number of animations that are terminatedanimEndCurrentCnt = 0,animEndNextCnt = 0,// check function for the end of each animationisFinished = function(){
++cntAnims;
if( cntAnims === 2 ){
self.isAnimating = false;
}
}
,// function for the end of the current item animationonEndAnimationCurrentItem = function(){
++animEndCurrentCnt;
var endFn = function(){
classie.removeClass( currentItem,'hide' );
classie.removeClass( currentItem,'current' );
isFinished();
}
;
if( !isSupported ){
endFn();
}
else if( animEndCurrentCnt === animElemsCurrentCount ){
currentItem.removeEventListener( animEndEventName,onEndAnimationCurrentItem );
endFn();
}
}
,// function for the end of the next item animationonEndAnimationNextItem = function(){
++animEndNextCnt;
var endFn = function(){
classie.removeClass( nextItem,'show' );
classie.addClass( nextItem,'current' );
isFinished();
}
;
if( !isSupported ){
endFn();
}
else if( animEndNextCnt === animElemsNextCount ){
nextItem.removeEventListener( animEndEventName,onEndAnimationNextItem );
endFn();
}
}
;
classie.addClass( currentItem,'hide' );
classie.addClass( nextItem,'show' );
if( isSupported ){
currentItem.addEventListener( animEndEventName,onEndAnimationCurrentItem );
nextItem.addEventListener( animEndEventName,onEndAnimationNextItem );
}
else{
onEndAnimationCurrentItem();
onEndAnimationNextItem();
}
}
// add to global namespacewindow.TiltSlider = TiltSlider;
}
)( window );
CSS代码(demo.css):
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);@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;-moz-box-sizing:border-box;box-sizing:border-box;}
.clearfix:before,.clearfix:after{content:'';display:table;}
.clearfix:after{clear:both;}
body{background:#fff;color:#4b5f5a;font-size:100%;line-height:1.25;font-family:'Lato',Arial,sans-serif;}
a{color:#9baaa7;text-decoration:none;outline:none;}
a:hover,a:focus{color:#e88565;}
code{opacity:0.7;white-space:nowrap;padding:0 7px;background:rgba(0,0,0,0.08);}
.codrops-header{margin:0 auto;padding:2em 2em 0;text-align:center;}
.codrops-header h1{margin:0;font-weight:300;font-size:2.5em;padding-top:0.2em;}
.codrops-header h1 span{display:block;padding:0 0 0.6em 0.1em;font-size:0.6em;opacity:0.7;}
/* To Navigation Style */
.codrops-top{width:100%;text-transform:uppercase;font-weight:700;font-size:0.69em;line-height:2.2;text-align:center;}
.codrops-top a{display:block;padding:0 1em;text-decoration:none;letter-spacing:1px;}
.codrops-icon:before{margin:0 4px;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";}
.codrops-icon-prev:before{content:"\e004";}
/* Related demos */
.related{padding:6em 2em;text-align:center;}
.related p{font-size:1.5em;}
.related > a{border:3px solid #8d9a97;display:inline-block;text-align:center;margin:20px 10px;padding:25px;color:#8d9a97;-webkit-transition:color 0.3s,border-color 0.3s;transition:color 0.3s,border-color 0.3s;}
.related a:hover{color:#4b5f5a;border-color:#4b5f5a;}
.related a img{max-width:100%;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;}
.related a:hover img,.related a:active img{opacity:1;}
.related a h3{margin:0;padding:0.5em 0 0.3em;max-width:300px;text-align:left;}
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
分享到微博
微信扫一扫
