以下是 弹性过渡效果的圆形幻灯片代码 的示例演示效果:
部分效果截图:
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>弹性过渡效果的圆形幻灯片代码</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.3.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel="stylesheet" type="text/css" href="css/component.css" />
</head>
<body>
<div class="container">
<div class="deco deco--title"></div>
<div id="slideshow" class="slideshow">
<div class="slide">
<h2 class="slide__title slide__title--preview">Macadamia Skin Oil <span class="slide__price">$39</span></h2>
<div class="slide__item">
<div class="slide__inner">
<img class="slide__img slide__img--small" src="img/small/1.png" alt="Some image" />
<button class="action action--open" aria-label="View details"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="slide__content">
<div class="slide__content-scroller">
<img class="slide__img slide__img--large" src="img/1.png" alt="Some image" />
<div class="slide__details">
<h2 class="slide__title slide__title--main">Macadamia Skin Oil</h2>
<p class="slide__description">Hydration for very dry skin</p>
<div>
<span class="slide__price slide__price--large">$39</span>
<button class="button button--buy">Add to cart</button>
</div>
</div><!-- /slide__details -->
</div><!-- slide__content-scroller -->
</div><!-- slide__content -->
</div>
<div class="slide">
<h2 class="slide__title slide__title--preview">Grapeseed Skin Oil <span class="slide__price">$19</span></h2>
<div class="slide__item">
<div class="slide__inner">
<img class="slide__img slide__img--small" src="img/small/2.png" alt="Some image" />
<button class="action action--open" aria-label="View details"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="slide__content">
<div class="slide__content-scroller">
<img class="slide__img slide__img--large" src="img/2.png" alt="Some image" />
<div class="slide__details">
<h2 class="slide__title slide__title--main">Grapeseed Skin Oil</h2>
<p class="slide__description">Moisture control for all skin types</p>
<div>
<span class="slide__price slide__price--large">$19</span>
<button class="button button--buy">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<h2 class="slide__title slide__title--preview">Jojoba Skin Oil <span class="slide__price">$35</span></h2>
<div class="slide__item">
<div class="slide__inner">
<img class="slide__img slide__img--small" src="img/small/3.png" alt="Some image" />
<button class="action action--open" aria-label="View details"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="slide__content">
<div class="slide__content-scroller">
<img class="slide__img slide__img--large" src="img/3.png" alt="Some image" />
<div class="slide__details">
<h2 class="slide__title slide__title--main">Jojoba Skin Oil</h2>
<p class="slide__description">Protection for sensitive skin</p>
<div>
<span class="slide__price slide__price--large">$35</span>
<button class="button button--buy">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<h2 class="slide__title slide__title--preview">Amaranth Skin Oil <span class="slide__price">$29</span></h2>
<div class="slide__item">
<div class="slide__inner">
<img class="slide__img slide__img--small" src="img/small/4.png" alt="Some image" />
<button class="action action--open" aria-label="View details"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="slide__content">
<div class="slide__content-scroller">
<img class="slide__img slide__img--large" src="img/4.png" alt="Some image" />
<div class="slide__details">
<h2 class="slide__title slide__title--main">Amaranth Skin Oil</h2>
<p class="slide__description">Rich hydration for mature skin</p>
<div>
<span class="slide__price slide__price--large">$29</span>
<button class="button button--buy">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<h2 class="slide__title slide__title--preview">Argan Skin Oil <span class="slide__price">$59</span></h2>
<div class="slide__item">
<div class="slide__inner">
<img class="slide__img slide__img--small" src="img/small/5.png" alt="Some image" />
<button class="action action--open" aria-label="View details"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="slide__content">
<div class="slide__content-scroller">
<img class="slide__img slide__img--large" src="img/5.png" alt="Some image" />
<div class="slide__details">
<h2 class="slide__title slide__title--main">Argan Skin Oil</h2>
<p class="slide__description">Moisture for problematic & dry skin</p>
<div>
<span class="slide__price slide__price--large">$59</span>
<button class="button button--buy">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<h2 class="slide__title slide__title--preview">Avocado Skin Oil <span class="slide__price">$39</span></h2>
<div class="slide__item">
<div class="slide__inner">
<img class="slide__img slide__img--small" src="img/small/6.png" alt="Some image" />
<button class="action action--open" aria-label="View details"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="slide__content">
<div class="slide__content-scroller">
<img class="slide__img slide__img--large" src="img/6.png" alt="Some image" />
<div class="slide__details">
<h2 class="slide__title slide__title--main">Avocado Skin Oil</h2>
<p class="slide__description">Deep repair for stressed skin</p>
<div>
<span class="slide__price slide__price--large">$39</span>
<button class="button button--buy">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
<button class="action action--close" aria-label="Close"><i class="fa fa-close"></i></button>
</div>
</div><!-- /container -->
<script src="js/classie.js"></script>
<script src="js/dynamics.min.js"></script>
<script src="js/main.js"></script>
<script>
(function() {
document.documentElement.className = 'js';
var slideshow = new CircleSlideshow(document.getElementById('slideshow'));
})();
</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 2016,Codrops * http://www.codrops.com */
;
(function(window){
'use strict';
var bodyEl = document.body,docElem = window.document.documentElement,// http://stackoverflow.com/a/1147768docWidth = Math.max(bodyEl.scrollWidth,bodyEl.offsetWidth,docElem.clientWidth,docElem.scrollWidth,docElem.offsetWidth),docHeight = Math.max(bodyEl.scrollHeight,bodyEl.offsetHeight,docElem.clientHeight,docElem.scrollHeight,docElem.offsetHeight);
function scrollY(){
return window.pageYOffset || docElem.scrollTop;
}
function extend( a,b ){
for( var key in b ){
if( b.hasOwnProperty( key ) ){
a[key] = b[key];
}
}
return a;
}
/** * Circle Slideshow */
function CircleSlideshow(el,options){
this.el = el;
this.options = extend({
}
,this.options );
extend( this.options,options );
// itemsthis.items = [].slice.call(this.el.querySelectorAll('.slide'));
// total itemsthis.itemsTotal = this.items.length;
if( this.itemsTotal < 2 ) return;
// content close controlthis.closeCtrl = this.el.querySelector('.action--close');
// index of current slidethis.current = 0;
// all items are closed initiallythis.isClosed = true;
this._init();
}
CircleSlideshow.prototype.options ={
}
;
CircleSlideshow.prototype._init = function(){
// add navigation ctrls and left & right circles to the DOMthis.navLeftCtrl = document.createElement('button');
this.navLeftCtrl.className = 'navbutton navbutton--next';
this.navLeftCtrl.setAttribute('aria-label','Next item');
this.navLeftCtrl.innerHTML = '<svg width="100px" height="30px" viewBox="0 0 100 30"><polyline class="navbutton__line" fill="none" stroke="#6CD84E" stroke-width="5" points="69.821,3.795 92.232,26.205 0,26.205"/></svg>';
this.navRightCtrl = document.createElement('button');
this.navRightCtrl.className = 'navbutton navbutton--prev';
this.navRightCtrl.setAttribute('aria-label','Previous item');
this.navRightCtrl.innerHTML = '<svg width="100px" height="30px" viewBox="0 0 100 30"><polyline class="navbutton__line" fill="none" stroke="#6CD84E" stroke-width="5" points="30.179,26.205 7.768,3.795 100,3.795"/></svg>';
this.el.insertBefore(this.navLeftCtrl,this.el.firstChild);
this.el.insertBefore(this.navRightCtrl,this.el.firstChild);
var leftCircle = document.createElement('div'),rightCircle = document.createElement('div');
leftCircle.className = 'deco deco--circle deco--circle-left';
rightCircle.className = 'deco deco--circle deco--circle-right';
this.el.insertBefore(leftCircle,this.el.firstChild);
this.el.insertBefore(rightCircle,this.el.firstChild);
this.circles ={
left:leftCircle,right:rightCircle}
;
dynamics.css(this.circles.left,{
scale:0.8}
);
dynamics.css(this.circles.right,{
scale:0.8}
);
// add the expander element per slide (.deco--expander)this.items.forEach(function(item){
var expanderEl = document.createElement('div');
expanderEl.className = 'deco deco--circle deco--expander';
var slideEl = item.querySelector('.slide__item');
slideEl.insertBefore(expanderEl,slideEl.firstChild);
}
);
// position current item:classie.add(this.items[this.current],'slide--current');
// event bindingthis._initEvents();
}
;
CircleSlideshow.prototype._initEvents = function(){
var self = this;
// slideshow navigationthis.navRightCtrl.addEventListener('click',function(){
self._navigate('left');
}
);
this.navLeftCtrl.addEventListener('click',function(){
self._navigate('right');
}
);
// opening itemsthis.items.forEach(function(item){
item.querySelector('.action--open').addEventListener('click',function(ev){
self._openContent(item);
ev.target.blur();
}
);
}
);
// closing itemsthis.closeCtrl.addEventListener('click',function(){
self._closeContent();
}
);
// keyboard navigation eventsdocument.addEventListener('keydown',function(ev){
var keyCode = ev.keyCode || ev.which;
switch (keyCode){
case 37:self._navigate('left');
break;
case 39:self._navigate('right');
break;
case 13:// enterif( self.isExpanded ) return;
self._openContent(self.items[self.current]);
break;
case 27:// escif( self.isClosed ) return;
self._closeContent();
break;
}
}
);
// swipe navigation// from http://stackoverflow.com/a/23230280this.el.addEventListener('touchstart',handleTouchStart,false);
this.el.addEventListener('touchmove',handleTouchMove,false);
var xDown = null;
var yDown = null;
function handleTouchStart(evt){
xDown = evt.touches[0].clientX;
yDown = evt.touches[0].clientY;
}
;
function handleTouchMove(evt){
if ( ! xDown || ! yDown ){
return;
}
var xUp = evt.touches[0].clientX;
var yUp = evt.touches[0].clientY;
var xDiff = xDown - xUp;
var yDiff = yDown - yUp;
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ){
/*most significant*/
if ( xDiff > 0 ){
/* left swipe */
if( !self.isExpanded ){
self._navigate('right');
}
}
else{
/* right swipe */
if( !self.isExpanded ){
self._navigate('left');
}
}
}
/* reset values */
xDown = null;
yDown = null;
}
;
}
;
CircleSlideshow.prototype._navigate = function(dir){
if( this.isExpanded ){
return false;
}
this._moveCircles(dir);
var self = this,itemCurrent = this.items[this.current],currentEl = itemCurrent.querySelector('.slide__item'),currentTitleEl = itemCurrent.querySelector('.slide__title');
// update new current valueif( dir === 'right' ){
this.current = this.current < this.itemsTotal-1 ? this.current + 1:0;
}
else{
this.current = this.current > 0 ? this.current - 1:this.itemsTotal-1;
}
var itemNext = this.items[this.current],nextEl = itemNext.querySelector('.slide__item'),nextTitleEl = itemNext.querySelector('.slide__title');
// animate the current element outdynamics.animate(currentEl,{
translateX:dir === 'right' ? -1*currentEl.offsetWidth:currentEl.offsetWidth,scale:0.7}
,{
type:dynamics.spring,duration:2000,friction:600}
);
// animate the current title outdynamics.animate(currentTitleEl,{
translateX:dir === 'right' ? -250:250,opacity:0}
,{
type:dynamics.bezier,points:[{
"x":0,"y":0,"cp":[{
"x":0.2,"y":1}
]}
,{
"x":1,"y":1,"cp":[{
"x":0.3,"y":1}
]}
],duration:450}
);
// set the right properties for the next element to come indynamics.css(itemNext,{
visibility:'visible'}
);
dynamics.css(nextEl,{
translateX:dir === 'right' ? nextEl.offsetWidth:-1*nextEl.offsetWidth,scale:0.7}
);
// animate the next element indynamics.animate(nextEl,{
translateX:0}
,{
type:dynamics.spring,duration:3000,friction:700,frequency:500,complete:function(){
self.items.forEach(function(item){
classie.remove(item,'slide--current');
}
);
classie.add(itemNext,'slide--current');
}
}
);
// set the right properties for the next title to come indynamics.css(nextTitleEl,{
translateX:dir === 'right' ? 250:-250,opacity:0}
);
// animate the next title indynamics.animate(nextTitleEl,{
translateX:0,opacity:1}
,{
type:dynamics.bezier,points:[{
"x":0,"y":0,"cp":[{
"x":0.2,"y":1}
]}
,{
"x":1,"y":1,"cp":[{
"x":0.3,"y":1}
]}
],duration:1000}
);
}
;
CircleSlideshow.prototype._moveCircles = function(dir){
var animProps ={
type:dynamics.easeIn,duration:100,complete:function(el){
dynamics.animate(el,{
translateX:0,scale:0.8}
,{
type:dynamics.spring,duration:1000,friction:300}
);
}
}
;
dynamics.animate(this.circles.right,{
translateX:dir === 'right' ? -this.circles.right.offsetWidth/3:this.circles.right.offsetWidth/3,scale:0.9}
,animProps);
dynamics.animate(this.circles.left,{
translateX:dir === 'right' ? -this.circles.left.offsetWidth/3:this.circles.left.offsetWidth/3,scale:0.9}
,animProps);
}
;
CircleSlideshow.prototype._openContent = function(item){
this.isExpanded = true;
this.isClosed = false;
this.expandedItem = item;
var self = this,expanderEl = item.querySelector('.deco--expander'),scaleVal = Math.ceil(Math.sqrt(Math.pow(docWidth,2) + Math.pow(docHeight,2)) / expanderEl.offsetWidth),smallImgEl = item.querySelector('.slide__img--small'),contentEl = item.querySelector('.slide__content'),largeImgEl = contentEl.querySelector('.slide__img--large'),titleEl = contentEl.querySelector('.slide__title--main'),descriptionEl = contentEl.querySelector('.slide__description'),priceEl = contentEl.querySelector('.slide__price'),buyEl = contentEl.querySelector('.button--buy');
// add slide--open class to the itemclassie.add(item,'slide--open');
// prevent scrollingbodyEl.style.top = -scrollY() + 'px';
classie.add(bodyEl,'lockscroll');
// position the content elements:// - image (large image)dynamics.css(largeImgEl,{
translateY:800,opacity:0}
);
// - titledynamics.css(titleEl,{
translateY:600,opacity:0}
);
// - descriptiondynamics.css(descriptionEl,{
translateY:400,opacity:0}
);
// - pricedynamics.css(priceEl,{
translateY:400,opacity:0}
);
// - buy buttondynamics.css(buyEl,{
translateY:400,opacity:0}
);
// animate (scale up) the expander elementdynamics.animate(expanderEl,{
scaleX:scaleVal,scaleY:scaleVal}
,{
type:dynamics.bezier,points:[{
"x":0,"y":0,"cp":[{
"x":0.5,"y":1}
]}
,{
"x":1,"y":1,"cp":[{
"x":0.5,"y":1}
]}
],duration:1700}
);
// animate the small image outdynamics.animate(smallImgEl,{
translateY:-600,opacity:0}
,{
type:dynamics.bezier,points:[{
"x":0,"y":0,"cp":[{
"x":0.2,"y":1}
]}
,{
"x":1,"y":1,"cp":[{
"x":0.3,"y":1}
]}
],duration:300,delay:75}
);
// animate the large image indynamics.animate(largeImgEl,{
translateY:0,opacity:1}
,{
type:dynamics.bezier,points:[{
"x":0,"y":0,"cp":[{
"x":0.2,"y":1}
]}
,{
"x":1,"y":1,"cp":[{
"x":0.3,"y":1}
]}
],duration:1000,delay:300}
);
// animate the title element indynamics.animate(titleEl,{
translateY:0,opacity:1}
,{
type:dynamics.bezier,points:[{
"x":0,"y":0,"cp":[{
"x":0.2,"y":1}
]}
,{
"x":1,"y":1,"cp":[{
"x":0.3,"y":1}
]}
],duration:1000,delay:400}
);
// animate the description element indynamics.animate(descriptionEl,{
translateY:0,opacity:1}
,{
type:dynamics.bezier,points:[{
"x":0,"y":0,"cp":[{
"x":0.2,"y":1}
]}
,{
"x":1,"y":1,"cp":[{
"x":0.3,"y":1}
]}
],duration:1000,delay:500}
);
// animate the price element indynamics.animate(priceEl,{
translateY:0,opacity:1}
,{
type:dynamics.bezier,points:[{
"x":0,"y":0,"cp":[{
"x":0.2,"y":1}
]}
,{
"x":1,"y":1,"cp":[{
"x":0.3,"y":1}
]}
],duration:1000,delay:600}
);
// animate the buy element indynamics.animate(buyEl,{
translateY:0,opacity:1}
,{
type:dynamics.bezier,points:[{
"x":0,"y":0,"cp":[{
"x":0.2,"y":1}
]}
,{
"x":1,"y":1,"cp":[{
"x":0.3,"y":1}
]}
],duration:1000,delay:700,complete:function(){
// add .noscroll to body and .scrollable to .slide__contentclassie.add(bodyEl,'noscroll');
classie.add(contentEl,'scrollable');
// force redraw (chrome)contentEl.style.display = 'none';
contentEl.offsetHeight;
contentEl.style.display = 'block';
// allow scrollingclassie.remove(bodyEl,'lockscroll');
}
}
);
}
;
CircleSlideshow.prototype._closeContent = function(){
this.isClosed = true;
var self = this,item = this.expandedItem,expanderEl = item.querySelector('.deco--expander'),smallImgEl = item.querySelector('.slide__img--small'),contentEl = item.querySelector('.slide__content'),largeImgEl = contentEl.querySelector('.slide__img--large'),titleEl = contentEl.querySelector('.slide__title--main'),descriptionEl = contentEl.querySelector('.slide__description'),priceEl = contentEl.querySelector('.slide__price'),buyEl = contentEl.querySelector('.button--buy');
// add slide--close class to the itemclassie.add(item,'slide--close');
// remove .noscroll from body and .scrollable from .slide__contentclassie.remove(bodyEl,'noscroll');
classie.remove(contentEl,'scrollable');
// animate the buy element outdynamics.stop(buyEl);
dynamics.animate(buyEl,{
translateY:400,opacity:0}
,{
type:dynamics.bezier,points:[{
"x":0,"y":0,"cp":[{
"x":0.2,"y":1}
]}
,{
"x":1,"y":1,"cp":[{
"x":0.3,"y":1}
]}
],duration:1000}
);
// animate the price element outdynamics.stop(priceEl);
dynamics.animate(priceEl,{
translateY:400,opacity:0}
,{
type:dynamics.bezier,points:[{
"x":0,"y":0,"cp":[{
"x":0.2,"y":1}
]}
,{
"x":1,"y":1,"cp":[{
"x":0.3,"y":1}
]}
],duration:1000}
);
// animate the description element outdynamics.stop(descriptionEl);
dynamics.animate(descriptionEl,{
translateY:400,opacity:0}
,{
type:dynamics.bezier,points:[{
"x":0,"y":0,"cp":[{
"x":0.2,"y":1}
]}
,{
"x":1,"y":1,"cp":[{
"x":0.3,"y":1}
]}
],duration:1000,delay:100}
);
// animate the title element outdynamics.stop(titleEl);
dynamics.animate(titleEl,{
translateY:600,opacity:0}
,{
type:dynamics.bezier,points:[{
"x":0,"y":0,"cp":[{
"x":0.2,"y":1}
]}
,{
"x":1,"y":1,"cp":[{
"x":0.3,"y":1}
]}
],duration:1000,delay:200}
);
// animate the large image outdynamics.animate(largeImgEl,{
translateY:800,opacity:0}
,{
type:dynamics.bezier,points:[{
"x":0,"y":0,"cp":[{
"x":0.2,"y":1}
]}
,{
"x":1,"y":1,"cp":[{
"x":0.3,"y":1}
]}
],duration:500,delay:300,complete:function(){
// remove slide--open class to the itemclassie.remove(item,'slide--open');
// remove slide--close class to the itemclassie.remove(item,'slide--close');
// allow scrollingclassie.remove(bodyEl,'lockscroll');
self.isExpanded = false;
}
}
);
// animate the small image indynamics.animate(smallImgEl,{
translateY:0,opacity:1}
,{
type:dynamics.bezier,points:[{
"x":0,"y":0,"cp":[{
"x":0.2,"y":1}
]}
,{
"x":1,"y":1,"cp":[{
"x":0.3,"y":1}
]}
],duration:700,delay:500}
);
// animate (scale down) the expander elementdynamics.animate(expanderEl,{
scaleX:1,scaleY:1}
,{
type:dynamics.bezier,points:[{
"x":0,"y":0,"cp":[{
"x":0.5,"y":1}
]}
,{
"x":1,"y":1,"cp":[{
"x":0.5,"y":1}
]}
],duration:700,delay:250}
);
}
;
window.CircleSlideshow = CircleSlideshow;
}
)(window);
CSS代码(demo.css):
@font-face{font-family:'codropsicons';font-weight:normal;font-style:normal;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{content:'';display:table;}
.clearfix:after{clear:both;}
body{font-family:'Avenir Next',Avenir,'Helvetica Neue',Helvetica,Arial,sans-serif;color:#414146;background:#f0f0f0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{text-decoration:none;color:#000;outline:none;}
a:hover,a:focus{color:#414146;}
.container{position:relative;overflow:hidden;width:100%;}
/* Header */
.codrops-header{position:relative;z-index:100;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;width:100%;padding:1em;}
.codrops-header h1{font-size:1em;line-height:1;margin:0;padding:0 1em;}
/* Top Navigation Style */
.codrops-links{position:relative;display:inline-block;text-align:center;white-space:nowrap;border:2px solid #414146;}
.codrops-links::after{content:'';position:absolute;top:50%;left:50%;width:2px;height:110%;margin-left:-1px;background:#414146;-webkit-transform:translateY(-50%) rotate3d(0,0,1,22.5deg);transform:translateY(-50%) rotate3d(0,0,1,22.5deg);}
.codrops-icon{display:inline-block;width:1.5em;margin:0.5em;padding:0em 0;text-decoration:none;}
.codrops-icon span{display:none;}
.codrops-icon:before{font-family:'codropsicons';font-weight:normal;font-style:normal;font-variant:normal;line-height:1;margin:0 5px;text-transform:none;-webkit-font-smoothing:antialiased;speak:none;}
.codrops-icon--drop:before{content:'\e001';}
.codrops-icon--prev:before{content:'\e004';}
/* Content */
.content{padding:3em 0;}
/* Related demos */
.content--related{font-weight:bold;padding:3em 1em 10em;text-align:center;}
.media-item{display:inline-block;padding:2em;vertical-align:top;-webkit-transition:color 0.3s;transition:color 0.3s;}
.media-item__img{max-width:100%;opacity:0.6;border-radius:50%;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;}
.media-item:hover .media-item__img,.media-item:focus .media-item__img{opacity:1;}
.media-item__title{font-size:1em;margin:0;padding:0.5em;}
@media screen and (max-width:40em){.codrops-header{-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:center;justify-content:center;text-align:center;}
.codrops-header h1{width:100%;padding:1em 0;}
}
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.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;}
*,*:after,*:before{-webkit-box-sizing:border-box;box-sizing:border-box;}
.clearfix:before,.clearfix:after{content:'';display:table;}
.clearfix:after{clear:both;}
body{color:#414146;background:#f0f0f0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{text-decoration:none;color:#000;outline:none;}
a:hover,a:focus{color:#414146;}
.container{position:relative;overflow:hidden;width:100%;}
.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 */
.htmleaf-header{position:relative;z-index:100;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;width:100%;padding:1em;}
.htmleaf-header h1{font-size:1em;line-height:1;margin:0;padding:0 1em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
/*nav*/
.htmleaf-demo a{color:#1d7db1;text-decoration:none;}
.htmleaf-demo{width:100%;padding-bottom:1.2em;}
.htmleaf-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #1d7db1;font-weight:700;}
.htmleaf-demo a:hover{opacity:0.6;}
.htmleaf-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.htmleaf-links{position:relative;display:inline-block;text-align:center;white-space:nowrap;border:2px solid #414146;}
.htmleaf-links::after{content:'';position:absolute;top:50%;left:50%;width:2px;height:110%;margin-left:-1px;background:#414146;-webkit-transform:translateY(-50%) rotate3d(0,0,1,22.5deg);transform:translateY(-50%) rotate3d(0,0,1,22.5deg);}
.htmleaf-icon{display:inline-block;width:1.5em;margin:0.5em;padding:0em 0;text-decoration:none;}
.htmleaf-icon span{display:none;}
.htmleaf-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 */
.htmleaf-footer{width:100%;padding-top:10px;}
.htmleaf-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{color:#fff;background:#494A5F;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-htmleaf-home-outline:before{content:"\e5000";}
.icon-htmleaf-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:40em){.htmleaf-header{-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:center;justify-content:center;text-align:center;}
.htmleaf-header h1{width:100%;padding:1em 0;}
}
分享到QQ
分享到微博
微信扫一扫
