软件 聊天 安全 视频 浏览器 下载 系统 办公 教学 输入法
免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 PSD 矢量 网页 PPT 动画
美女 唯美 大生活 美图 风景 时尚艺
资讯 新闻 专题 热点
您的位置: 广信之家 > 免费资源 > 分享资源 > 文章正文

使用jQuery和CSS3创建一个全屏幕幻灯效果

时间:06-20 13:33 来源:gbin1.com 整理:广信小编 我要评论(0)
字号:T|T
内容提要:
  在今天这篇文章中,我们将介绍来自于tympanus的一个全屏幻灯特效教程,在这个教程中将介绍如何使用jQuery和CSS3来实现一个全屏的幻灯特效,你将看到每一个幻灯都从水平或者

使用jQuery和CSS3创建一个全屏幕幻灯效果

在今天这篇文章中,我们将介绍来自于tympanus的一个全屏幻灯特效教程,在这个教程中将介绍如何使用jQuery和CSS3来实现一个全屏的幻灯特效,你将看到每一个幻灯都从水平或者垂直中间断开然后消失,使用不同的data-attributes属性来定义类型,旋转和角度等幻灯属性,这样我们可以创建非常独特的幻灯效果。

我们将使用到如下的插件:

1.jQuery cond by Ben Alman:帮助你使用链式来书写if-then-else语句

2.jQuery Transit by Rico Sta. Cruz:帮助你更见简单快捷的使用CSS3动画

浏览器支持:

iefirefoxchromeoperasafari

主要代码

HTML代码:

<div class="container">
 <!-- Codrops top bar -->
 <div class="codrops-top">
  <a href="http://tympanus.net/Tutorials/CSS3BouncingBall/">
   <strong>&laquo; Previous Demo: </strong>3D Bouncing Ball with CSS3
  </a>
  <span class="right">
   <a href="http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/">
    <strong>Back to the Codrops Article</strong>
   </a>
  </span>
  <div class="clr"></div>
 </div><!--/ Codrops top bar -->
 <div class="ie-note">Not supported by your browser</div>
 
 <section id="sl-slider" class="sl-slider">
 
  <div class="sl-slide" data-orientation="horizontal" data-cut1-rotation="-25" data-cut2-rotation="-25" data-cut1-scale="2" data-cut2-scale="2">
   <div class="sl-deco" data-icon="6"></div>
   <h2>A bene placito</h2>
   <blockquote><p>You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.</p><cite>Ralph Waldo Emerson</cite></blockquote>
  </div>
  
  <div class="sl-slide sl-slide-dark" data-orientation="vertical" data-cut1-rotation="10" data-cut2-rotation="-15" data-cut1-scale="1.5" data-cut2-scale="1.5">
   <div class="sl-deco" data-icon="q"></div>
   <h2>Regula aurea</h2>
   <blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>
  </div>
  
  <div class="sl-slide sl-slide-color-1" data-orientation="horizontal" data-cut1-rotation="3" data-cut2-rotation="3" data-cut1-scale="2" data-cut2-scale="1">
   <div class="sl-deco" data-icon="O"></div>
   <h2>Dum spiro, spero</h2>
   <blockquote><p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite></blockquote>
  </div>
  
  <div class="sl-slide sl-slide-color-2" data-orientation="vertical" data-cut1-rotation="-5" data-cut2-rotation="25" data-cut1-scale="2" data-cut2-scale="1">
   <div class="sl-deco" data-icon="I"></div>
   <h2>Donna nobis pacem</h2>
   <blockquote><p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper M.D.</cite></blockquote>
  </div>
  
  <div class="sl-slide sl-slide-color-3" data-orientation="horizontal" data-cut1-rotation="-5" data-cut2-rotation="10" data-cut1-scale="2" data-cut2-scale="1">
   <div class="sl-deco" data-icon="t"></div>
   <h2>Acta Non Verba</h2>
   <blockquote><p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite></blockquote>
  </div> 
 </section> 
</div>

Javascript代码

(function( $, undefined ) {
 
 /*
 * smartresize: debounced resize event for jQuery
 *
 * latest version and complete README available on Github:
 * https://github.com/louisremi/jquery.smartresize.js
 *
 * Copyright 2011 @louis_remi
 * Licensed under the MIT license.
 */
 var $event = $.event, resizeTimeout;

 $event.special.smartresize  = {
  setup: function() {
   $(this).bind( "resize", $event.special.smartresize.handler );
  },
  teardown: function() {
   $(this).unbind( "resize", $event.special.smartresize.handler );
  },
  handler: function( event, execAsap ) {
   // Save the context
   var context = this,
    args  = arguments;

   // set correct event type
   event.type = "smartresize";

   if ( resizeTimeout ) { clearTimeout( resizeTimeout ); }
   resizeTimeout = setTimeout(function() {
    jQuery.event.handle.apply( context, args );
   }, execAsap === "execAsap"? 0 : 100 );
  }
 };

 $.fn.smartresize   = function( fn ) {
  return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] );
 };
 
 $.Slitslider    = function( options, element ) {
 
  this.$slider = $( element );
  this._init( options );
  
 };
 
 $.Slitslider.defaults  = {
  speed  : 1000,  // transitions speed
  autoplay : false, // slideshow on / off
  interval : 4000,   // time between transitions
  optOpacity : false, // if true the slides's cuts will also animate its opacity
  translateF : 230,  // amount (%) to translate both cut1 and cut2 - adjust as necessary
  maxAngle : 25,  // maximum possible angle
  maxScale : 2   // maximum possible scale
 };
 
 $.Slitslider.prototype  = {
  _init    : function( options ) {
   
   // the options
   this.options = $.extend( true, {}, $.Slitslider.defaults, options );
   // the slider
   this.$slides = this.$slider.children( '.sl-slide' ).hide();
   // total slides
   this.slidesCount= this.$slides.length;
   // current slide
   this.current = 0;
   // allow to navigate
   this.isAnimating= false;
   // get window size
   this._getWinSize();
   // layout
   this._layout();
   // load some events
   this._loadEvents();
   // slideshow
   if( this.options.autoplay ) {
   
    this._startSlideshow();
   
   }
   
  },
  // gets the current window width & height
  _getWinSize   : function() {
   
   var $win = $( window );
   
   this.windowProp = {
    width : $win.width(),
    height : $win.height()
   };
  
  },
  _layout    : function() {
   
   this.$slideWrapper = $( '<div class="sl-slides-wrapper" />' );
   // wrap the slides in sl-slides-wrapper
   this.$slides.wrapAll( this.$slideWrapper ).each( function( i ) {
    
    var $slide   = $( this ),
     // vertical || horizontal
     orientation  = $slide.data( 'orientation' );
     
    $slide.addClass( 'sl-slide-' + orientation )
       .children()
       .wrapAll( '<div class="sl-content-wrapper" />' )
       .wrapAll( '<div class="sl-content" />' );
   
   } );
   
   // set the right size of the slider / slides for the current window size
   this._setSize();
   // show first slide
   this.$slides.eq( this.current ).show();
   // add navigation
   if( this.slidesCount > 1 ) {
    
    this.$slider.append(
     '<nav><span class="sl-prev">Previous</span><span class="sl-next">Next</span></nav>'
    );
    
   }
   
  },
  _setSize   : function() {
  
   // the slider and content wrappers will have the window's width and height
   var css = {
    width : this.windowProp.width,
    height : this.windowProp.height
   };
   
   this.$slider.css( css ).find( 'div.sl-content-wrapper' ).css( css );
  
  },
  _loadEvents   : function() {
   
   var _self = this;
   
   if( this.slidesCount > 1 ) {
   
    // navigate "in" or "out"
    this.$slider.find( 'nav > span.sl-prev' ).on( 'click.slitslider', function( event ) {
     
     if( _self.options.autoplay ) {
     
      clearTimeout( _self.slideshow );
      _self.options.autoplay = false;
     
     }
     _self._navigate( 'out' );
    
    } ).end().find( 'nav > span.sl-next' ).on( 'click.slitslider', function( event ) {
     
     if( _self.options.autoplay ) {
     
      clearTimeout( _self.slideshow );
      _self.options.autoplay = false;
     
     }
     _self._navigate( 'in' );
    
    } );
   
   }
   
   $( window ).on( 'smartresize.slitslider', function( event ) {
    
    // update window size
    _self._getWinSize();
    _self._setSize();
    
   } );
  
  },
  _navigate   : function( dir ) {
   
   // return if currently navigating / animating
   if( this.isAnimating ) {
   
    return false;
   
   }
   
   var _self = this;
   // while isAnimating is true we can't navigate..
   this.isAnimating = true;
   // the current slide
   var $currentSlide = this.$slides.eq( this.current ), css;
   // set new current
   ( dir === 'in' ) ?
    ( ( this.current < this.slidesCount - 1 ) ? ++this.current : this.current = 0 ) :
    ( ( this.current > 0 ) ? --this.current : this.current = this.slidesCount - 1 );
   
    // next slide to be shown
   var $nextSlide  = this.$slides.eq( this.current ).show(),
    // the slide we want to cut and animate
    $movingSlide = ( dir === 'in' ) ? $currentSlide : $nextSlide,
    // the following are the data attrs set for each slide
    orientation  = $movingSlide.data( 'orientation' ) || 'horizontal',
    cut1angle  = $movingSlide.data( 'cut1Rotation' ) || 0,
    cut1scale  = $movingSlide.data( 'cut1Scale' ) || 1,
    cut2angle  = $movingSlide.data( 'cut2Rotation' ) || 0,
    cut2scale  = $movingSlide.data( 'cut2Scale' ) || 1;
    
   this._validateValues( cut1angle, cut2angle, cut1scale, cut2scale, orientation );
   
   if( orientation === 'vertical' ) {
   
    css = { marginLeft : -this.windowProp.width / 2 };
   
   }
   else if( orientation === 'horizontal' ) {
   
    css = { marginTop : -this.windowProp.height / 2 };
   
   }
   
   var // default slide's cuts style
    resetStyle  = ( orientation === 'horizontal' ) ? { x : '0%', y : '0%', rotate : 0, scale : 1, opacity : 1 } : { x : '0%', y : '0%', rotate : 0, scale : 1, opacity : 1 },
    // cut1 style
    cut1Style = ( orientation === 'horizontal' ) ? { y : '-' + this.options.translateF + '%', rotate : cut1angle, scale : cut1scale } : { x : '-' + this.options.translateF + '%', rotate : cut1angle, scale : cut1scale },
    // cut2 style
    cut2Style = ( orientation === 'horizontal' ) ? { y : this.options.translateF + '%', rotate : cut2angle, scale : cut2scale } : { x : this.options.translateF + '%', rotate : cut2angle, scale : cut2scale };
   
   if( this.options.optOpacity ) {
   
    cut1Style.opacity = 0;
    cut2Style.opacity = 0;
   
   }
   
   // we are adding the classes sl-trans-elems and sl-trans-back-elems to the slide that is either coming "in"
   // or going "out" according to the direction.
   // the idea is to make it more interesting by giving some animations to the respective slide's elements
   ( dir === 'in' ) ? $nextSlide.addClass( 'sl-trans-elems' ) : $currentSlide.addClass( 'sl-trans-back-elems' );
   
   $currentSlide.removeClass( 'sl-trans-elems' );
   
   // add the 2 cuts and animate them ( we are using the jquery.transit plugin : http://ricostacruz.com/jquery.transit/ to add transitions to the elements )
   $movingSlide.css( 'z-index', this.slidesCount )
      .find( 'div.sl-content-wrapper' )
      .wrap( '<div class="sl-content-cut" />' )
      .parent()
      .cond(
       dir === 'out',
       function() {
       
        this.css( cut1Style )
         .transition( resetStyle, _self.options.speed, dir );
          
       },
       function() {
        
        this.transition( cut1Style, _self.options.speed, dir )
      
       }
      )
      .clone()
      .appendTo( $movingSlide )
      .cond(
       dir === 'out',
       function() {
        
        var cut = this;
        cut.css( cut2Style )
         .transition( resetStyle, _self.options.speed, dir , function() {
    
          _self._onEndNavigate( cut, $currentSlide, dir );
        
         } )
      
       },
       function() {
        
        var cut = this;
        cut.transition( cut2Style, _self.options.speed, dir, function() {
         
         _self._onEndNavigate( cut, $currentSlide, dir );
        
        } )
        
       }
      )
      .find( 'div.sl-content-wrapper' )
      .css( css );
   
  },
  _validateValues  : function( cut1angle, cut2angle, cut1scale, cut2scale, orientation ) {
   
   // OK, so we are restricting the angles and scale values here.
   // This is to avoid the cuts wrong sides to be shown.
   // you can adjust these values as you wish but make sure you also ajust the
   // paddings of the slides and also the this.options.translateF and scale data attrs
   if( cut1angle > this.options.maxAngle || cut1angle < -this.options.maxAngle ) {
    
    cut1angle = this.options.maxAngle;
   
   }
   if( cut2angle > this.options.maxAngle  || cut2angle < -this.options.maxAngle ) {
    
    cut2angle = this.options.maxAngle;
   
   }
   if( cut1scale > this.options.maxScale || cut1scale <= 0 ) {
   
    cut1scale = this.options.maxScale;
   
   }
   if( cut2scale > this.options.maxScale || cut2scale <= 0 ) {
    
    cut2scale = this.options.maxScale;
   
   }
   if( orientation !== 'vertical' && orientation !== 'horizontal' ) {
   
    orientation = 'horizontal'
   
   }
   
  },
  _onEndNavigate  : function( $slice, $oldSlide, dir ) {
   
   // reset previous slide's style after next slide is shown
   var $slide    = $slice.parent(),
    removeClasses = 'sl-trans-elems sl-trans-back-elems';
   
   // remove second slide's cut
   $slice.remove();
   // unwrap..
   $slide.css( 'z-index', 1 )
      .find( 'div.sl-content-wrapper' )
      .unwrap();
   
   // hide previous current slide
   $oldSlide.hide().removeClass( removeClasses );
   $slide.removeClass( removeClasses );
   // now we can navigate again..
   this.isAnimating = false;
   
  },
  _startSlideshow  : function() {
  
   var _self = this;
   
   this.slideshow = setTimeout( function() {
    
    _self._navigate( 'in' );
    
    if( _self.options.autoplay ) {
    
     _self._startSlideshow();
    
    }
   
   }, this.options.interval );
  
  },
 };
 
 var logError    = function( message ) {
  if ( this.console ) {
   console.error( message );
  }
 };
 
 $.fn.slitslider   = function( options ) {
  
  if ( typeof options === 'string' ) {
   
   var args = Array.prototype.slice.call( arguments, 1 );
   
   this.each(function() {
   
    var instance = $.data( this, 'slitslider' );
    
    if ( !instance ) {
     logError( "cannot call methods on slitslider prior to initialization; " +
     "attempted to call method '" + options + "'" );
     return;
    }
    
    if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
     logError( "no such method '" + options + "' for slitslider instance" );
     return;
    }
    
    instance[ options ].apply( instance, args );
   
   });  
  }
  else {
  
   this.each(function() {
   
    var instance = $.data( this, 'slitslider' );
    if ( !instance ) {
     $.data( this, 'slitslider', new $.Slitslider( options, this ) );
    }
   });  
  }  
  return this;
  
 }; 
})( jQuery );

CSS

.sl-slider {
 position: absolute;
 top: 0;
 left: 0;
 font-family: 'Montserrat', Arial, sans-serif;
}

/* Navigation arrows */

.sl-slider nav span {
 position: fixed;
 z-index: 2000;
 top: 50%;
 width: 80px;
 height: 80px;
 border: 2px dashed #ddd;
 border: 2px dashed rgba(150,150,150,0.4);
 text-indent: -90000px;
 margin-top: -40px;
 cursor: pointer;
 
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
 
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

.sl-slider nav span:hover {
 border-color: rgba(150,150,150,0.9);
}

.sl-slider nav span.sl-prev {
 left: 60px;
 border-right: none;
 border-top: none;
}

.sl-slider nav span.sl-next {
 right: 60px;
 border-left: none;
 border-bottom: none;
}

/* Slide wrapper and slides */

.sl-slide, .sl-slides-wrapper {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 overflow: hidden;
}

.sl-slide {
 z-index: 1;
}

/* The duplicate parts/cuts */

.sl-content-cut {
 overflow: hidden;
 position: absolute;
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 background: #fff;
}

/* Horizontal cut */

.sl-slide-horizontal .sl-content-cut {
 width: 100%;
 height: 50%;
 left: -200px;
}

.sl-slide-horizontal .sl-content-cut:first-child {
 top: -200px;
 padding: 200px 200px 0px 200px;
}

.sl-slide-horizontal .sl-content-cut:nth-child(2) {
 top: 50%;
 padding: 0px 200px 200px 200px;
}

/* Vertical cut */

.sl-slide-vertical .sl-content-cut {
 width: 50%;
 height: 100%;
 top: -200px;
}

.sl-slide-vertical .sl-content-cut:first-child {
 left: -200px;
 padding: 200px 0px 200px 200px;
}

.sl-slide-vertical .sl-content-cut:nth-child(2) {
 left: 50%;
 padding: 200px 200px 200px 0px;
}

/* Content wrapper */
/* Width and height is set dynamically */
.sl-content-wrapper {
 position: absolute;
}

.sl-content {
 width: 100%;
 height: 100%;
 background: #fff;
}

/* Content elements */

.sl-deco{
 width: 260px;
 height: 260px;
 border: 2px dashed #ddd;
 border: 2px dashed rgba(150,150,150,0.4);
 border-radius: 50%;
 position: absolute;
 bottom: 50%;
 left: 50%;
 margin-left: -130px;
}

[data-icon]:after {
    content: attr(data-icon);
    font-family: 'AnimalsNormal';
    color: #000;
 text-shadow: 0 0 1px #000;
 position: absolute;
 width: 220px;
 height: 220px;
 line-height: 220px;
 text-align: center;
 font-size: 100px;
 top: 50%;
 left: 50%;
 margin: -110px 0 0 -110px;
 box-shadow: inset 0 0 0 10px #f7f7f7;
 border-radius: 50%;
}

.sl-slide h2 {
 color: #000;
 text-shadow: 0 0 1px #000;
 padding: 20px;
 position: absolute;
 font-size: 34px;
 font-weight: 300;
 letter-spacing: 13px;
 text-transform: uppercase;
 width: 80%;
 left: 10%;
 text-align: center;
 line-height: 50px;
 bottom: 50%;
 margin: 0 0 -120px 0;
}

.sl-slide blockquote {
 position: absolute;
 width: 30%;
 text-align: center;
 left: 35%;
 font-size: 13px;
 line-height: 20px;
 height: 70px;
 color: #8b8b8b;
 z-index: 2;
 bottom: 50%;
 margin: 0 0 -200px 0;
 padding: 0;
}

.sl-slide blockquote:before {
 color: #f0f0f0;
 color: rgba(244,244,244,0.65);
 font-family: "Bookman Old Style", Bookman, Garamond, serif;
 position: absolute;
 line-height: 60px;
 width: 75px;
 height: 75px;
 font-size: 200px;
 z-index: -1;
 left: -15px;
 top: 35px;
 content: '\201C';
}

.sl-slide blockquote cite {
 font-size: 10px;
 font-style: normal;
 text-transform: uppercase;
 letter-spacing: 4px;
}

/* Dark slides */
.sl-slide-dark .sl-content-cut,
.sl-slide-dark .sl-content {
 background: #000;
}

.sl-slide-dark [data-icon]:after,
.sl-slide-dark.sl-slide h2 {
 color: #fff;
}

.sl-slide-dark.sl-slide blockquote:before {
 color: #222;
}

/* Color 1 slides */
.sl-slide-color-1 .sl-content-cut,
.sl-slide-color-1 .sl-content {
 background: #8d0f39;
}

.sl-slide-color-1 [data-icon]:after {
 color: #e6a6bb;
 text-shadow: 0 0 1px #e6a6bb;
 box-shadow: inset 0 0 0 10px #e6a6bb;
}

.sl-slide-color-1.sl-slide h2,
.sl-slide-color-1.sl-slide blockquote{
 color: #fff;
}

.sl-slide-color-1.sl-slide blockquote:before {
 color: #7b0c31;
}

/* Color 2 slides */
.sl-slide-color-2 .sl-content-cut,
.sl-slide-color-2 .sl-content {
 background: #ade1f4;
}

.sl-slide-color-2 [data-icon]:after {
 text-shadow: 0 0 1px #8bc7dd;
 color: #8bc7dd;
}

.sl-slide-color-2.sl-slide h2,
.sl-slide-color-2.sl-slide blockquote{
 color: #fff;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

.sl-slide-color-2.sl-slide blockquote:before {
 color: #8bc7dd;
}

/* Color 3 slides */
.sl-slide-color-3 .sl-content-cut,
.sl-slide-color-3 .sl-content {
 background: #ffeb41;
}

.sl-slide-color-3.sl-slide h2,
.sl-slide-color-3.sl-slide blockquote{
 color: #000;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

.sl-slide-color-3.sl-slide blockquote:before {
 color: #ecd82c;
}

/* Animations for elements */

.sl-trans-elems .sl-deco{
 -webkit-animation: roll 1s ease-out both;
 -moz-animation: roll 1s ease-out both;
 -o-animation: roll 1s ease-out both;
 -ms-animation: roll 1s ease-out both;
 animation: roll 1s ease-out both;
}
.sl-trans-elems h2{
 -webkit-animation: moveUp 1s ease-in-out both;
 -moz-animation: moveUp 1s ease-in-out both;
 -o-animation: moveUp 1s ease-in-out both;
 -ms-animation: moveUp 1s ease-in-out both;
 animation: moveUp 1s ease-in-out both;
}
.sl-trans-elems blockquote{
 -webkit-animation: fadeIn 0.5s linear 0.5s both;
 -moz-animation: fadeIn 0.5s linear 0.5s both;
 -o-animation: fadeIn 0.5s linear 0.5s both;
 -ms-animation: fadeIn 0.5s linear 0.5s both;
 animation: fadeIn 0.5s linear 0.5s both;
}
@-webkit-keyframes roll{
 0% {-webkit-transform: translateX(500px) rotate(360deg); opacity: 0;}
 100% {-webkit-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-moz-keyframes roll{
 0% {-moz-transform: translateX(500px) rotate(360deg); opacity: 0;}
 100% {-moz-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-o-keyframes roll{
 0% {-o-transform: translateX(500px) rotate(360deg); opacity: 0;}
 100% {-o-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-ms-keyframes roll{
 0% {-ms-transform: translateX(500px) rotate(360deg); opacity: 0;}
 100% {-ms-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@keyframes roll{
 0% {transform: translateX(500px) rotate(360deg); opacity: 0;}
 100% {transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-webkit-keyframes moveUp{
 0% {-webkit-transform: translateY(40px);}
 100% {-webkit-transform: translateY(0px);}
}
@-moz-keyframes moveUp{
 0% {-moz-transform: translateY(40px);}
 100% {-moz-transform: translateY(0px);}
}
@-o-keyframes moveUp{
 0% {-o-transform: translateY(40px);}
 100% {-o-transform: translateY(0px);}
}
@-ms-keyframes moveUp{
 0% {-ms-transform: translateY(40px);}
 100% {-ms-transform: translateY(0px);}
}
@keyframes moveUp{
 0% {transform: translateY(40px);}
 100% {transform: translateY(0px);}
}
@-webkit-keyframes fadeIn{
 0% {opacity: 0;}
 100% {opacity: 1;}
}
@-moz-keyframes fadeIn{
 0% {opacity: 0;}
 100% {opacity: 1;}
}
@-o-keyframes fadeIn{
 0% {opacity: 0;}
 100% {opacity: 1;}
}
@-ms-keyframes fadeIn{
 0% {opacity: 0;}
 100% {opacity: 1;}
}
@keyframes fadeIn{
 0% {opacity: 0;}
 100% {opacity: 1;}
}

.sl-trans-back-elems .sl-deco{
 -webkit-animation: scaleDown 1s ease-in-out both;
 -moz-animation: scaleDown 1s ease-in-out both;
 -o-animation: scaleDown 1s ease-in-out both;
 -ms-animation: scaleDown 1s ease-in-out both;
 animation: scaleDown 1s ease-in-out both;
}
.sl-trans-back-elems h2{
 -webkit-animation: fadeOut 1s ease-in-out both;
 -moz-animation: fadeOut 1s ease-in-out both;
 -o-animation: fadeOut 1s ease-in-out both;
 -ms-animation: fadeOut 1s ease-in-out both;
 animation: fadeOut 1s ease-in-out both;
}
.sl-trans-back-elems blockquote{
 -webkit-animation: fadeOut 1s linear both;
 -moz-animation: fadeOut 1s linear both;
 -o-animation: fadeOut 1s linear both;
 -ms-animation: fadeOut 1s linear both;
 animation: fadeOut 1s linear both;
}
@-webkit-keyframes scaleDown{
 0% {-webkit-transform: scale(1);}
 100% {-webkit-transform: scale(0.5);}
}
@-moz-keyframes scaleDown{
 0% {-moz-transform: scale(1);}
 100% {-moz-transform: scale(0.5);}
}
@-o-keyframes scaleDown{
 0% {-o-transform: scale(1);}
 100% {-o-transform: scale(0.5);}
}
@-ms-keyframes scaleDown{
 0% {-ms-transform: scale(1);}
 100% {-ms-transform: scale(0.5);}
}
@keyframes scaleDown{
 0% {transform: scale(1);}
 100% {transform: scale(0.5);}
}
@-webkit-keyframes fadeOut{
 0% {opacity: 1;}
 100% {opacity: 0;}
}
@-moz-keyframes fadeOut{
 0% {opacity: 1;}
 100% {opacity: 0;}
}
@-o-keyframes fadeOut{
 0% {opacity: 1;}
 100% {opacity: 0;}
}
@-ms-keyframes fadeOut{
 0% {opacity: 1;}
 100% {opacity: 0;}
}
@keyframes fadeOut{
 0% {opacity: 1;}
 100% {opacity: 0;}
}

via tympanus

来源:http://www.gbin1.com/

    相关阅读:

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    免责申明:以上内容仅代表原创者观点,其内容未经本站证实,使用jQuery和CSS3创建一个全屏幕幻灯效果对以上内容的真实性、完整性不作任何保证或承诺,转载目的在于传递更多信息,由此产生的后果与使用jQuery和CSS3创建一个全屏幕幻灯效果无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

    登录 (请登录发言,并遵守 相关规定)
    如果你对广信之家有任何意见或建议,请到交流平台反馈。到留言板反馈