html5简单图片幻灯片转换源码,HTML5特效库 炫酷幻灯片切换特效源码

效果图

各位叔叔阿姨，大哥大姐，弟弟妹妹，全国的老少爷们大家好！

今天给大家带来的HTML5特效 属于banner轮播的切换效果

前端源码免费分享裙581549454

废话不多说，上源码！

CSS源码：

@import

url(http://fonts.useso.com/css?family=Lato:300,400,700);

@font-face {

font-family: 'AnimalsNormal';

src: url('fonts/animals-webfont.eot');

src: url('fonts/animals-webfont.eot?#iefix')

format('embedded-opentype'),

url('fonts/animals-webfont.woff') format('woff'),

url('fonts/animals-webfont.ttf') format('truetype'),

url('fonts/animals-webfont.svg#AnimalsNormal') format('svg');

font-weight: normal;

font-style: normal;

}

html { height: 100%; }

*,

*:after,

*:before {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

padding: 0;

margin: 0;

}

.clearfix:after {

content: "";

display: table;

clear: both;

}

body {

font-family: 'Lato', Calibri, Arial, sans-serif;

background: #fff;

font-weight: 300;

font-size: 15px;

color: #333;

-webkit-font-smoothing: antialiased;

}

a {

color: #555;

text-decoration: none;

}

.container {

width: 100%;

position: relative;

}

.container.demo-1 {

height: 100%;

position: absolute;

}

.clr {

clear: both;

padding: 0;

height: 0;

margin: 0;

}

.main {

width: 90%;

margin: 0 auto;

position: relative;

}

.container > header,

.content-wrapper {

padding: 30px;

width: 80%;

max-width: 960px;

margin: 0 auto;

}

.content-wrapper p{

padding-top: 30px;

line-height: 26px;

}

.container > header h1 {

font-size: 34px;

line-height: 38px;

margin: 0;

font-weight: 700;

color: #333;

float: left;

}

.container > header h1 span {

display: block;

font-size: 20px;

font-weight: 300;

}

.codrops-top {

line-height: 24px;

font-size: 11px;

background: #fff;

background: rgba(255, 255, 255, 0.8);

text-transform: uppercase;

z-index: 9999;

position: relative;

font-family: Cambria, Georgia, serif;

box-shadow: 1px 0px 2px rgba(0,0,0,0.2);

}

.codrops-top a {

padding: 0px 10px;

letter-spacing: 1px;

color: #333;

display: inline-block;

}

.codrops-top a:hover {

background: rgba(255,255,255,0.6);

}

.codrops-top span.right {

float: right;

}

.codrops-top span.right a {

float: left;

display: block;

}

.codrops-demos {

float: right;

padding-top: 10px;

}

.demo-1 .codrops-demos {

position: absolute;

z-index: 2000;

top: 30px;

left: 30px;

}

.codrops-demos a {

display: inline-block;

margin: 10px;

color: #333;

font-weight: 700;

line-height: 30px;

border-bottom: 4px solid transparent;

}

.codrops-demos a:hover {

color: #883d59;

border-color: #883d59;

}

.codrops-demos a.current-demo,

.codrops-demos a.current-demo:hover {

color: #aaa;

border-color: #aaa;

}

CSS源码:

.sl-slider-wrapper {

width: 800px;

height: 400px;

margin: 0 auto;

position: relative;

overflow: hidden;

}

.sl-slider {

position: absolute;

top: 0;

left: 0;

}

.sl-slide,

.sl-slides-wrapper,

.sl-slide-inner {

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

}

.sl-slide {

z-index: 1;

}

.sl-content-slice {

overflow: hidden;

position: absolute;

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

background: #fff;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-o-backface-visibility: hidden;

-ms-backface-visibility: hidden;

backface-visibility: hidden;

opacity : 1;

}

.sl-slide-horizontal .sl-content-slice {

width: 100%;

height: 50%;

left: -200px;

-webkit-transform: translateY(0%) scale(1);

-moz-transform: translateY(0%) scale(1);

-o-transform: translateY(0%) scale(1);

-ms-transform: translateY(0%) scale(1);

transform: translateY(0%) scale(1);

}

.sl-slide-horizontal .sl-content-slice:first-child {

top: -200px;

padding: 200px 200px 0px 200px;

}

.sl-slide-horizontal .sl-content-slice:nth-child(2) {

top: 50%;

padding: 0px 200px 200px 200px;

}

.sl-slide-vertical .sl-content-slice {

width: 50%;

height: 100%;

top: -200px;

-webkit-transform: translateX(0%) scale(1);

-moz-transform: translateX(0%) scale(1);

-o-transform: translateX(0%) scale(1);

-ms-transform: translateX(0%) scale(1);

transform: translateX(0%) scale(1);

}

.sl-slide-vertical .sl-content-slice:first-child {

left: -200px;

padding: 200px 0px 200px 200px;

}

.sl-slide-vertical .sl-content-slice:nth-child(2) {

left: 50%;

padding: 200px 200px 200px 0px;

}

.sl-content-wrapper {

position: absolute;

}

.sl-content {

width: 100%;

height: 100%;

background: #fff;

}

.sl-slide-horizontal .sl-slide-inner {

background: #ddd;

}

.sl-slide-vertical .sl-slide-inner {

background: #ccc;

}