澳门新浦京手机版HTML5 3D书本翻页动画

本文由码农网 –
小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

这是一款十分炫酷的HTML5
3D书本翻页动画,效果相对比较简单,拖拽鼠标模拟用手翻页,更漂亮的是翻页过程中,呈现出逼真的3D立体效果。书本中的文字和图片也会3D展示,非常酷。

这段时间我已经为大家分享了不少关于HTML5应用和jQuery插件了,先来回顾一下:

这是一款十分炫酷的HTML5
3D书本翻页动画,效果相对比较简单,拖拽鼠标模拟用手翻页,更漂亮的是翻页过程中,呈现出逼真的3D立体效果。书本中的文字和图片也会3D展示,非常酷。

在线演示 源码下载

  • 澳门新浦京手机版,炫酷霸气的HTML5/jQuery应用及源码
  • 干货分享
    超炫丽的HTML5/jQuery应用及代码
  • 绚丽而实用的jQuery/CSS3应用及源码

澳门新浦京手机版 1

          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum nisl quis nulla eleifend dignissim. Curabitur varius lobortis tincidunt. Maecenas gravida, nulla quis luctus imperdiet, ipsum nibh consectetur ante, in sodales massa tortor eget neque. Donec porta ligula massa, id sagittis est. Ut nisl tellus, faucibus nec feugiat ut, laoreet iaculis felis. Suspendisse ultrices mauris vel tellus suscipit commodo. Integer vitae tortor erat. Pellentesque non tempor nisi.   

.book { width: 300px; height: 300px; margin-top: -150px; position: absolute; left: 50%; top: 50%; -webkit-transform: rotateX; -moz-transform: rotateX; -ms-transform: rotateX; -o-transform: rotateX; transform: rotateX; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}.page { width: 300px; height: 300px; padding: 1em; position: absolute; left: 0; top: 0; text-indent: 2em;}.front { background-color: #d93e2b;}.back { background-color: #fff;}.front-cover { cursor: move; -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: rotateY; -moz-transform: rotateY; -ms-transform: rotateY; -o-transform: rotateY; transform: rotateY;}.front-cover .back { background-image: url; background-repeat: no-repeat; background-position: 50% 50%; -webkit-transform: translateZ; -moz-transform: translateZ; -ms-transform: translateZ; -o-transform: translateZ; transform: translateZ;}.back-cover .back { -webkit-transform: translateZ; -moz-transform: translateZ; -ms-transform: translateZ; -o-transform: translateZ; transform: translateZ; }.p3d { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d;}.flip { -webkit-transform: rotateY; -moz-transform: rotateY; -ms-transform: rotateY; -o-transform: rotateY; transform: rotateY;}.dino,.shadow { width: 196px; height: 132px; position: absolute; left: 60px; top: 60px; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%;}.dino { background: url no-repeat;}.shadow { background: url no-repeat;}

今天我们继续来介绍一些新鲜的HTML5/CSS3应用及源码,希望大家会喜欢。HTML5是WEB的未来,我们需要不断学习。

在线演示源码下载

JavaScript代码

HTML5 3D骨牌图片特效

很不错的HTML5 3D图片动画特效,图片也不再是平面的了。

核心CSS代码:

澳门新浦京手机版 2澳门新浦京手机版 3

figure { 
  margin: 0;
  width: 100%;
  height: 29.5vw;
  background: url("winter-hat.jpg");
    background-size: 100%; 
    transform-origin: center bottom;
    transform-style: preserve-3d;
    transition: 1s transform;
 }
figure figcaption { 
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
        url("winter-hat.jpg");
    background-size: 100%; height: 50px;
    background-repeat: no-repeat;
  background-position: bottom;
  color: #fff; 
    position: relative; top: 29.5vw;
    transform-origin: center top;
    transform: rotateX(-89.9deg);
    font-size: 1.2vw;
  font-family: Montserrat, Arial, sans-serif;
  text-align: center;
    line-height: 3;
}
figure:before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
    box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.1), inset 0 0 250px 250px rgba(0, 0, 0, 0.1);
    transition: 1s;
    transform: rotateX(95deg) translateZ(-80px) scale(0.75);
    transform-origin: inherit;
}
div:hover figure { 
  transform: rotateX(75deg) translateZ(5vw); 
}
div:hover figure:before {
    box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5), inset 0 0 250px 250px rgba(0, 0, 0, 0.5);
    transform: rotateX(-5deg) translateZ(-80px) scale(1);
    }

@media screen and (max-width: 800px) {
  div { width: 50%; } 
  figure { height: 45vw; } 
  figure figcaption { 
    top: 45vw;
    font-size: 2vw;
  } 
}

@media screen and (max-width: 500px) {
  div { 
    width: 80%; 
    margin-top: 1rem; 
  } 
  figure { 
    height: 70vw;
  } 
  figure figcaption { 
    top: 70vw;
    font-size: 3vw;
  } 
}

View Code

澳门新浦京手机版 4

在线演示 
      源码下载

HTML代码

<div class="book p3d">
    <div class="back-cover p3d">
        <div class="page back flip"></div>
        <div class="page front p3d">
            <div class="shadow"></div>
            <div class="dino"></div>
        </div>
    </div>
    <div class="front-cover p3d">
        <div class="page front flip p3d">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum nisl quis nulla eleifend dignissim. Curabitur varius lobortis tincidunt. Maecenas gravida, nulla quis luctus imperdiet, ipsum nibh consectetur ante, in sodales massa tortor eget neque. Donec porta ligula massa, id sagittis est. Ut nisl tellus, faucibus nec feugiat ut, laoreet iaculis felis. Suspendisse ultrices mauris vel tellus suscipit commodo. Integer vitae tortor erat. Pellentesque non tempor nisi.</p>
        </div>
        <div class="page back"></div>
    </div>
</div>
(function  { var prefixes = ['Webkit', 'Moz', 'ms', 'O', ''], book = document.querySelectorAll[0], page = document.querySelectorAll[0], dino = document.querySelectorAll[0], shadow = document.querySelectorAll[0], hold = false, centerPoint = window.innerWidth / 2, pageSize = 300, clamp = function  { return Math.max(min, Math.min; }; page.onmousedown = function () { hold = true; }; window.onmouseup = function  { hold = false; } }; window.onresize = function () { centerPoint = window.innerWidth / 2; }; window.onmousemove = function  { return; } var angle = clamp((centerPoint - evt.pageX + pageSize) / pageSize * -90, -180, 0), i, j; for (i = 0, j = prefixes.length; i < j; i++) { book.style[prefixes[i] + 'Transform'] = 'rotateX + 'deg)'; page.style[prefixes[i] + 'Transform'] = 'rotateY'; dino.style[prefixes[i] + 'Transform'] = 'rotateX + 'deg)'; shadow.style[prefixes[i] + 'Transform'] = 'translateZ skewX + 'deg)'; } };});

jQuery UI滑杆插件 可Tooltip提示

这又是一款相当实用的jQuery插件,基于jQuery UI的,所以外观非常漂亮。

核心jQuery代码:

澳门新浦京手机版 5澳门新浦京手机版 6

var points = 20;

/* jquery slider pips plugin, version 0.1 */

    (function($) {

        var extensionMethods = {

            pips: function( settings ) {

                options = {

                    first:     "number",     // "pip" , false
                    last:     "number",     // "pip" , false
                    rest:     "pip"         // "number" , false

                };

                $.extend( options, settings );

                // get rid of all pips that might already exist.
                this.element.addClass('ui-slider-pips').find( '.ui-slider-pip' ).remove();

                // we need teh amount of pips to create.
                var pips = this.options.max - this.options.min;                    

                    // for every stop in the slider, we create a pip.
                    for( i=0; i<=pips; i++ ) {

                        // hold a span element for the pip
                        var s = $(''+i+'');

                        // add a class so css can handle the display
                        // we'll hide numbers by default in CSS, and show them if set.
                        // we'll also use CSS to hide the pip altogether.
                        if( 0 == i ) {
                            s.addClass('ui-slider-pip-first');
                            if( "number" == options.first ) { s.addClass('ui-slider-pip-number'); }
                            if( false == options.first ) { s.addClass('ui-slider-pip-hide'); }
                        } else if ( pips == i ) {
                            s.addClass('ui-slider-pip-last');
                            if( "number" == options.last ) { s.addClass('ui-slider-pip-number'); }
                            if( false == options.last ) { s.addClass('ui-slider-pip-hide'); }
                        } else {
                            if( "number" == options.rest ) { s.addClass('ui-slider-pip-number'); }
                            if( false == options.rest ) { s.addClass('ui-slider-pip-hide'); }
                        }


                        // if it's a horizontal slider we'll set the left offset,
                        // and the top if it's vertical.
                        if( this.options.orientation == "horizontal" ) 
                            s.css({ left: '' + (100/pips)*i + '%'  });
                        else
                            s.css({ top: '' + (100/pips)*i + '%'  });


                        // append the span to the slider.
                        this.element.append( s );

                    }

            }


        };

        $.extend(true, $['ui']['slider'].prototype, extensionMethods);


    })(jQuery);




(function($) {

        var extensionMethods = {

            float: function( settings ) {

                options = {};
                $.extend( options, settings );

                // add a class for the CSS
                this.element.addClass('ui-slider-float');


        // if this is a range slider
        if( this.options.values ) {

          var $tip = [
            $(''+ this.options.values[0]+''),
            $(''+ this.options.values[1]+'')
          ];


        // else if its just a normal slider
        } else {

          // create a tip element
          var $tip = $(''+ this.options.value+'');

        }

        // now we append it to all the handles
        this.element.find('.ui-slider-handle').each( function(k,v) {
          $(v).append($tip[k]);
        })

        // if this slider also has numbers, we'll make those into tips, too; by cloning and changing class.
        this.element.find('.ui-slider-number').each(function(k,v) {
          var $e = $(v).clone().removeClass('ui-slider-number').addClass('ui-slider-tip-number');
          $e.insertAfter($(v));
        });

        // when slider changes, update handle tip value.
        this.element.on('slidechange slide', function(e,ui) {
          $(ui.handle).find('.ui-slider-tip').text( ui.value );
        });

            }


        };

        $.extend(true, $['ui']['slider'].prototype, extensionMethods);


    })(jQuery);





/* ------------------------- */
/* demo stuff */

$(document).ready(function() {
  $('.slider, .slider2').slider({min:0,max:points,animate:true, value:3});
  $('.slider3').slider({min:0,max:points,animate:true,range:true, values:[2,18]});
  $('.slider').slider('pips');
  $('.slider2').slider('pips', {rest:'number'});
  $('.slider3').slider('pips', {first:'pip', last: 'pip'});

  $('.slider4').slider({min:0,max:points,animate:true,value:4});
  $('.slider6').slider({min:0,max:points,animate:true,range: true,values:[3,6] });

  $('.slider4').slider('pips');
  $('.slider4, .slider6').slider('float');
});

View Code

澳门新浦京手机版 7

在线演示 
   
  源码下载

CSS代码

.book {
    width: 300px;
    height: 300px;
    margin-top: -150px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: rotateX(60deg);
    -moz-transform: rotateX(60deg);
    -ms-transform: rotateX(60deg);
    -o-transform: rotateX(60deg);
    transform: rotateX(60deg);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.page {
    width: 300px;
    height: 300px;
    padding: 1em;
    position: absolute;
    left: 0;
    top: 0;
    text-indent: 2em;
}
.front {
    background-color: #d93e2b;
}
.back {
    background-color: #fff;
}
.front-cover {
    cursor: move;
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.front-cover .back {
    background-image: url(mdn.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-transform: translateZ(3px);
    -moz-transform: translateZ(3px);
    -ms-transform: translateZ(3px);
    -o-transform: translateZ(3px);
    transform: translateZ(3px);
}
.back-cover .back {
    -webkit-transform: translateZ(-3px);
    -moz-transform: translateZ(-3px);
    -ms-transform: translateZ(-3px);
    -o-transform: translateZ(-3px);
    transform: translateZ(-3px); 
}
.p3d {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.flip {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.dino,
.shadow {
    width: 196px;
    height: 132px;
    position: absolute;
    left: 60px;
    top: 60px;
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
.dino {
    background: url(dino.png) no-repeat;

}
.shadow {
    background: url(shadow.png) no-repeat;
}

以上就是HTML5
3D书本翻页动画的示例代码,希望对大家学习javascript程序设计有所帮助。

CSS3个人资料表单 分两步骤表单

一款基于CSS3的表单应用,可以分步骤填写。

核心jQuery代码:

澳门新浦京手机版 8澳门新浦京手机版 9

jQuery(document).ready(function(){
  function doStep(){
    // Next Button
    $('a.next-step').click(function(event){
      event.preventDefault();
      // Part 1
      if($('.alpha').hasClass("in")) {
        $('.alpha').removeClass("in");
      }
      $('.alpha').addClass("out");
      // Part 2
      if($('.beta').hasClass("out")) {
        $('.beta').removeClass("out");
      }
      $('.beta').addClass("in");
    });

    // Previous Button
    $('a.prev-step').click(function(event){
      event.preventDefault(); 
      $('.alpha').removeClass("out").addClass("in");
      $('.beta').removeClass("in").addClass("out");
    });

    // Submit & Complete
    $('.submit').click(function(event){
      event.preventDefault();
      // Part 1
      if($('.beta').hasClass("in")) {
        $('.beta').removeClass("in");
      }
      $('.beta').addClass("out");
      // Part 2
      if($('.charlie').hasClass("out")) {
        $('.charlie').removeClass("out");
      }
      $('.charlie').addClass("in");
    });
  }
  // Active Functions
  doStep();
});

View Code

核心CSS代码:

澳门新浦京手机版 10澳门新浦京手机版 11

form {
  float: left;
  display: block;
  width: 100%;
  position: relative;
}
form fieldset {
  float: left;
  position: absolute;
  width: 100%;
  padding: 20px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
  background: #fff;
  background: whitesmoke;
  background: -webkit-linear-gradient(0deg, #eeeeee 0%, whitesmoke 100%);
  background: -moz-linear-gradient(0deg, #eeeeee 0%, whitesmoke 100%);
  background: -o-linear-gradient(0deg, #eeeeee 0%, whitesmoke 100%);
  background: linear-gradient(0deg, #eeeeee 0%, whitesmoke 100%);
  /* W3C */
}
form fieldset legend {
  float: left;
  display: block;
  width: 100%;
  position: relative;
  border-bottom: 1px solid #dfdfdf;
  top: 0;
  left: 0;
  clear: both;
  margin-bottom: 20px;
  padding-bottom: 10px;
  line-height: 30px;
  color: #444;
  text-shadow: 0 1px 0 #fff;
}
form fieldset.beta, form fieldset.charlie {
  display: none;
}
form fieldset .frow {
  float: left;
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
form fieldset .frow:last-child {
  margin-bottom: 0px;
}
form fieldset input {
  float: left;
  width: 100%;
  padding: 12px 6px;
  font-size: 14px;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
  border: 1px solid #dedede;
  border-radius: 5px;
  box-shadow: 0 0 0 transparent, inset 0 0 5px #eee;
  -webkit-transition: all 0.2s ease-in-out;
}
form fieldset input::-webkit-input-placeholder {
  color: #ccc;
  opacity: 1;
  -webkit-transition: opacity 0.2s ease-in-out;
}
form fieldset input:focus {
  outline: none;
  border: 1px solid #27c1bf;
  box-shadow: 0 0 10px #27c1bf;
  -webkit-transition: all 0.2s ease-in-out;
}
form fieldset input:focus::-webkit-input-placeholder {
  opacity: 0.5;
}
form fieldset a.next-step,
form fieldset a.prev-step,
form fieldset input[type="submit"] {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0;
  background: #31dddb;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  font-size: 1.2em;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 400;
  color: #fff;
  border: 1px solid #27c1bf;
  border-radius: 4px;
  box-shadow: 0 0 0 transparent;
}
form fieldset a.prev-step {
  background: #4a76a8;
  border: 1px solid #1d5b90;
}

.out, .alpha.out, .beta.out {
  z-index: 0;
  opacity: 1;
  display: block;
  -webkit-animation: out 0.75s ease forwards;
  -moz-animation: out 0.75s ease forwards;
  -o-animation: out 0.75s ease forwards;
  animation: out 0.75s ease forwards;
}

@-webkit-keyframes out {
  0% {
    -webkit-transform: scale(1);
    opacity: 1;
  }

  25% {
    -webkit-transform: scale(1.05);
  }

  99% {
    -webkit-transform: scale(0.8);
  }

  100% {
    opacity: 0;
    display: none;
  }
}
@-moz-keyframes out {
  0% {
    -moz-transform: scale(1);
    opacity: 1;
  }

  25% {
    -moz-transform: scale(1.05);
  }

  99% {
    -moz-transform: scale(0.8);
  }

  100% {
    opacity: 0;
    display: none;
  }
}
@-o-keyframes out {
  0% {
    -o-transform: scale(1);
    opacity: 1;
  }

  25% {
    -o-transform: scale(1.05);
  }

  99% {
    -o-transform: scale(0.8);
  }

  100% {
    opacity: 0;
    display: none;
  }
}
@keyframes out {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  25% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  99% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

  100% {
    opacity: 0;
    display: none;
  }
}
.in, .beta.in {
  z-index: 30;
  display: block;
  opacity: 0;
  -webkit-animation: in 0.75s ease forwards 0.25s;
  -moz-animation: in 0.75s ease forwards 0.25s;
  -o-animation: in 0.75s ease forwards 0.25s;
  animation: in 0.75s ease forwards 0.25s;
}

@-webkit-keyframes in {
  0% {
    -webkit-transform: translate3d(150px, 0, 0);
    opacity: 0;
  }

  100% {
    -webkit-transform: translate3d(0px, 0, 0);
    opacity: 1;
  }
}
@-moz-keyframes in {
  0% {
    -moz-transform: translate3d(150px, 0, 0);
    opacity: 0;
  }

  100% {
    -moz-transform: translate3d(0px, 0, 0);
    opacity: 1;
  }
}
@-o-keyframes in {
  0% {
    -o-transform: translate3d(150px, 0, 0);
    opacity: 0;
  }

  100% {
    -o-transform: translate3d(0px, 0, 0);
    opacity: 1;
  }
}
@keyframes in {
  0% {
    -webkit-transform: translate3d(150px, 0, 0);
    -moz-transform: translate3d(150px, 0, 0);
    -o-transform: translate3d(150px, 0, 0);
    transform: translate3d(150px, 0, 0);
    opacity: 0;
  }

  100% {
    -webkit-transform: translate3d(0px, 0, 0);
    -moz-transform: translate3d(0px, 0, 0);
    -o-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
    opacity: 1;
  }
}
.alpha.in {
  z-index: 30;
  display: block;
  opacity: 0;
  -webkit-animation: in-prev 0.75s ease forwards 0.25s;
  -moz-animation: in-prev 0.75s ease forwards 0.25s;
  -o-animation: in-prev 0.75s ease forwards 0.25s;
  animation: in-prev 0.75s ease forwards 0.25s;
}

@-webkit-keyframes in-prev {
  0% {
    -webkit-transform: translate3d(-150px, 0, 0);
    opacity: 0;
  }

  100% {
    -webkit-transform: translate3d(0px, 0, 0);
    opacity: 1;
  }
}
@-moz-keyframes in-prev {
  0% {
    -moz-transform: translate3d(-150px, 0, 0);
    opacity: 0;
  }

  100% {
    -moz-transform: translate3d(0px, 0, 0);
    opacity: 1;
  }
}
@-o-keyframes in-prev {
  0% {
    -o-transform: translate3d(-150px, 0, 0);
    opacity: 0;
  }

  100% {
    -o-transform: translate3d(0px, 0, 0);
    opacity: 1;
  }
}
@keyframes in-prev {
  0% {
    -webkit-transform: translate3d(-150px, 0, 0);
    -moz-transform: translate3d(-150px, 0, 0);
    -o-transform: translate3d(-150px, 0, 0);
    transform: translate3d(-150px, 0, 0);
    opacity: 0;
  }

  100% {
    -webkit-transform: translate3d(0px, 0, 0);
    -moz-transform: translate3d(0px, 0, 0);
    -o-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
    opacity: 1;
  }
}
.charlie.in {
  z-index: 30;
  display: block;
  opacity: 0;
  -webkit-animation: in-charlie 0.75s ease-out forwards 0.25s;
  -moz-animation: in-charlie 0.75s ease-out forwards 0.25s;
  -o-animation: in-charlie 0.75s ease-out forwards 0.25s;
  animation: in-charlie 0.75s ease-out forwards 0.25s;
}

@-webkit-keyframes in-charlie {
  0% {
    -webkit-transform: translate3d(0, 150px, 0);
    opacity: 0;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-moz-keyframes in-charlie {
  0% {
    -moz-transform: translate3d(0, 150px, 0);
    opacity: 0;
  }

  100% {
    -moz-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-o-keyframes in-charlie {
  0% {
    -o-transform: translate3d(0, 150px, 0);
    opacity: 0;
  }

  100% {
    -o-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes in-charlie {
  0% {
    -webkit-transform: translate3d(0, 150px, 0);
    -moz-transform: translate3d(0, 150px, 0);
    -o-transform: translate3d(0, 150px, 0);
    transform: translate3d(0, 150px, 0);
    opacity: 0;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

View Code

澳门新浦京手机版 12

在线演示 
      源码下载

JavaScript代码

(function (window, document) {

    var prefixes = ['Webkit', 'Moz', 'ms', 'O', ''],
        book = document.querySelectorAll('.book')[0],
        page = document.querySelectorAll('.front-cover')[0],
        dino = document.querySelectorAll('.dino')[0],
        shadow = document.querySelectorAll('.shadow')[0],
        hold = false,
        centerPoint = window.innerWidth / 2,
        pageSize = 300,
        clamp = function (val, min, max) {
            return Math.max(min, Math.min(val, max));
        };

    page.onmousedown = function () {
        hold = true;
    };

    window.onmouseup = function () {
        if (hold) {
            hold = false;
        }
    };

    window.onresize = function () {
        centerPoint = window.innerWidth / 2;
    };

    window.onmousemove = function (evt) {
        if (!hold) {
            return;
        }

        var angle = clamp((centerPoint - evt.pageX + pageSize) / pageSize * -90, -180, 0),
            i, j;

        for (i = 0, j = prefixes.length; i < j; i++) {
            book.style[prefixes[i] + 'Transform'] = 'rotateX(' + (60 + angle / 8) + 'deg)';
            page.style[prefixes[i] + 'Transform'] = 'rotateY(' + angle + 'deg)';
            dino.style[prefixes[i] + 'Transform'] = 'rotateX(' + (angle / 2) + 'deg)';
            shadow.style[prefixes[i] + 'Transform'] = 'translateZ(1px) skewX(' + (angle / 8) + 'deg)';
        }
    };

})(window, document);

在线演示源码下载

以上就是HTML5
3D书本翻页动画的示例代码,有兴趣的朋友可以下载完整代码研究。

HTML5/CSS3自定义浮动Select 超炫下拉菜单动画

一款很有特色的自定义Select下拉框,也是基于HTML5技术的,因为需要一些浮动动画。

核心jQuery代码:

澳门新浦京手机版 13澳门新浦京手机版 14

$(document).ready(function(){

  $(".dropdown").click(function(){
    $(".menu").toggleClass("showMenu");
      $(".menu > li").click(function(){
        $(".dropdown > p").html($(this).html());
          $(".menu").removeClass("showMenu");
      });
  });

});

View Code

澳门新浦京手机版 15

在线演示 
      源码下载

HTML5/CSS3书本翻页3D动画

和第一个应用类似,这也是HTML5 3D动画,是一本3D的电子书,可以翻页。

核心CSS代码(略长):

澳门新浦京手机版 16澳门新浦京手机版 17

/*
    1. container
*/

.book {
    position: relative;
    width: 160px; 
    height: 220px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/*
    2. background & color
*/

/* HARDCOVER FRONT */
.hardcover_front li:first-child {
    background-color: #eee;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* reverse */
.hardcover_front li:last-child {
    background: #fffbec;
}

/* HARDCOVER BACK */
.hardcover_back li:first-child {
    background: #fffbec;
}

/* reverse */
.hardcover_back li:last-child {
    background: #fffbec;
}

.book_spine li:first-child {
    background: #eee;
}
.book_spine li:last-child {
    background: #333;
}

/* thickness of cover */

.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before,
.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before,
.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before,
.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before,
.book_spine li:first-child:after,
.book_spine li:first-child:before,
.book_spine li:last-child:after,
.book_spine li:last-child:before {
    background: #999;
}

/* page */

.page > li {
    background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
    background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
    background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
    background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
    box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
    border-radius: 0px 5px 5px 0px;
}

/*
    3. opening cover, back cover and pages
*/

.hardcover_front {
    -webkit-transform: rotateY(-34deg) translateZ(8px);
    -moz-transform: rotateY(-34deg) translateZ(8px);
    transform: rotateY(-34deg) translateZ(8px);
    z-index: 100;
}

.hardcover_back {
    -webkit-transform: rotateY(-15deg) translateZ(-8px);
    -moz-transform: rotateY(-15deg) translateZ(-8px);
    transform: rotateY(-15deg) translateZ(-8px);
}

.page li:nth-child(1) {
    -webkit-transform: rotateY(-28deg);
    -moz-transform: rotateY(-28deg);
    transform: rotateY(-28deg);
}

.page li:nth-child(2) {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg);
}

.page li:nth-child(3) {
    -webkit-transform: rotateY(-32deg);
    -moz-transform: rotateY(-32deg);
    transform: rotateY(-32deg);
}

.page li:nth-child(4) {
    -webkit-transform: rotateY(-34deg);
    -moz-transform: rotateY(-34deg);
    transform: rotateY(-34deg);
}

.page li:nth-child(5) {
    -webkit-transform: rotateY(-36deg);
    -moz-transform: rotateY(-36deg);
    transform: rotateY(-36deg);
}

/*
    4. position, transform & transition
*/

.hardcover_front,
.hardcover_back,
.book_spine,
.hardcover_front li,
.hardcover_back li,
.book_spine li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.hardcover_front,
.hardcover_back {
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}

.hardcover_front {
    -webkit-transition: all 0.8s ease, z-index 0.6s;
    -moz-transition: all 0.8s ease, z-index 0.6s;
    transition: all 0.8s ease, z-index 0.6s;
}

/* HARDCOVER front */
.hardcover_front li:first-child {
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-transform: translateZ(2px);
    -moz-transform: translateZ(2px);
    transform: translateZ(2px);
}

.hardcover_front li:last-child {
    -webkit-transform: rotateY(180deg) translateZ(2px);
    -moz-transform: rotateY(180deg) translateZ(2px);
    transform: rotateY(180deg) translateZ(2px);
}

/* HARDCOVER back */
.hardcover_back li:first-child {
    -webkit-transform: translateZ(2px);
    -moz-transform: translateZ(2px);
    transform: translateZ(2px);
}

.hardcover_back li:last-child {
    -webkit-transform: translateZ(-2px);
    -moz-transform: translateZ(-2px);
    transform: translateZ(-2px);
}

/* thickness of cover */
.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before,
.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before,
.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before,
.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before,
.book_spine li:first-child:after,
.book_spine li:first-child:before,
.book_spine li:last-child:after,
.book_spine li:last-child:before {
    position: absolute;
    top: 0;
    left: 0;
}

/* HARDCOVER front */
.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before {
    width: 4px;
    height: 100%;
}

.hardcover_front li:first-child:after {
    -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
    -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
    transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.hardcover_front li:first-child:before {
    -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
    -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
    transform: rotateY(90deg) translateZ(158px) translateX(2px);
}

.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before {
    width: 4px;
    height: 160px;
}

.hardcover_front li:last-child:after {
    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
}
.hardcover_front li:last-child:before {
    box-shadow: 0px 0px 30px 5px #333;
    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
}

/* thickness of cover */

.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before {
    width: 4px;
    height: 100%;
}

.hardcover_back li:first-child:after {
    -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
    -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
    transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}
.hardcover_back li:first-child:before {
    -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
    -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
    transform: rotateY(90deg) translateZ(158px) translateX(2px);
}

.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before {
    width: 4px;
    height: 160px;
}

.hardcover_back li:last-child:after {
    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
}

.hardcover_back li:last-child:before {
    box-shadow: 10px -1px 80px 20px #666;
    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
}

/* BOOK SPINE */
.book_spine {
    -webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
    -moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
    transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
    width: 16px;
    z-index: 0;
}

.book_spine li:first-child {
    -webkit-transform: translateZ(2px);
    -moz-transform: translateZ(2px);
    transform: translateZ(2px);
}

.book_spine li:last-child {
    -webkit-transform: translateZ(-2px);
    -moz-transform: translateZ(-2px);
    transform: translateZ(-2px);
}

/* thickness of book spine */
.book_spine li:first-child:after,
.book_spine li:first-child:before {
    width: 4px;
    height: 100%;
}

.book_spine li:first-child:after {
    -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
    -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
    transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.book_spine li:first-child:before {
    -webkit-transform: rotateY(-90deg) translateZ(-12px);
    -moz-transform: rotateY(-90deg) translateZ(-12px);
    transform: rotateY(-90deg) translateZ(-12px);
}

.book_spine li:last-child:after,
.book_spine li:last-child:before {
    width: 4px;
    height: 16px;
}

.book_spine li:last-child:after {
    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
}

.book_spine li:last-child:before {
    box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
}

.page,
.page > li {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.page {
    width: 100%;
    height: 98%;
    top: 1%;
    left: 3%;
    z-index: 10;
}

.page > li {
    width: 100%;
    height: 100%;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition-property: transform;
    -moz-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    transition-timing-function: ease;
}

.page > li:nth-child(1) {
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    transition-duration: 0.6s;
}

.page > li:nth-child(2) {
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    transition-duration: 0.6s;
}

.page > li:nth-child(3) {
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

.page > li:nth-child(4) {
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.page > li:nth-child(5) {
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    transition-duration: 0.6s;
}

/*
    5. events
*/

.book:hover > .hardcover_front {
    -webkit-transform: rotateY(-145deg) translateZ(0);
    -moz-transform: rotateY(-145deg) translateZ(0);
    transform: rotateY(-145deg) translateZ(0);
    z-index: 0;
}

.book:hover > .page li:nth-child(1) {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg);
    -webkit-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    transition-duration: 1.5s;
}

.book:hover > .page li:nth-child(2) {
    -webkit-transform: rotateY(-35deg);
    -moz-transform: rotateY(-35deg);
    transform: rotateY(-35deg);
    -webkit-transition-duration: 1.8s;
    -moz-transition-duration: 1.8s;
    transition-duration: 1.8s;
}

.book:hover > .page li:nth-child(3) {
    -webkit-transform: rotateY(-118deg);
    -moz-transform: rotateY(-118deg);
    transform: rotateY(-118deg);
    -webkit-transition-duration: 1.6s;
    -moz-transition-duration: 1.6s;
    transition-duration: 1.6s;
}

.book:hover > .page li:nth-child(4) {
    -webkit-transform: rotateY(-130deg);
    -moz-transform: rotateY(-130deg);
    transform: rotateY(-130deg);
    -webkit-transition-duration: 1.4s;
    -moz-transition-duration: 1.4s;
    transition-duration: 1.4s;
}

.book:hover > .page li:nth-child(5) {
    -webkit-transform: rotateY(-140deg);
    -moz-transform: rotateY(-140deg);
    transform: rotateY(-140deg);
    -webkit-transition-duration: 1.2s;
    -moz-transition-duration: 1.2s;
    transition-duration: 1.2s;
}

/*
    6. Bonus
*/

/* cover CSS */

.coverDesign {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.coverDesign::after {
    background-image: -webkit-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
    background-image: -moz-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
    background-image: linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.coverDesign h1 {
    color: #fff;
    font-size: 2.2em;
    letter-spacing: 0.05em;
    text-align: center;
    margin: 54% 0 0 0;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
}

.coverDesign p {
    color: #f8f8f8;
    font-size: 1em;
    text-align: center;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
}

.yellow {
    background-color: #f1c40f;
    background-image: -webkit-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
    background-image: -moz-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
    background-image: linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
}

.blue {
    background-color: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db 58%, #2a90d4 0%);
    background-image: -moz-linear-gradient(top, #3498db 58%, #2a90d4 0%);
    background-image: linear-gradient(top, #3498db 58%, #2a90d4 0%);
}

.grey {
    background-color: #f8e9d1;
    background-image: -webkit-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
    background-image: -moz-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
    background-image: linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
}

/* Basic ribbon */

.ribbon {
    background: #c0392b;
    color: #fff;
    display: block;
    font-size: 0.7em;
    position: absolute;
    top: 11px;
    right: 1px;
    width: 40px;
    height: 20px;
    line-height: 20px;
    letter-spacing: 0.15em; 
    text-align: center;
    -webkit-transform: rotateZ(45deg) translateZ(1px);
    -moz-transform: rotateZ(45deg) translateZ(1px);
    transform: rotateZ(45deg) translateZ(1px);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 10;
}

.ribbon::before,
.ribbon::after{
    position: absolute;
    top: -20px;
    width: 0;
    height: 0;
    border-bottom: 20px solid #c0392b;
    border-top: 20px solid transparent;
}

.ribbon::before{
    left: -20px;
    border-left: 20px solid transparent;
}

.ribbon::after{
    right: -20px;
    border-right: 20px solid transparent;
}

/* figcaption */

figcaption {
    padding-left: 40px;
    text-align: left;
    position: absolute;
    top: 0%;
    left: 160px;
    width: 310px;
}

figcaption h1 {
    margin: 0;
}

figcaption span {
    color: #16a085;
    padding: 0.6em 0 1em 0;
    display: block;
}

figcaption p {
    color: #63707d;
    line-height: 1.3;
}

/* Media Queries */
@media screen and (max-width: 37.8125em) {
    .align > li {
        width: 100%;
        min-height: 440px;
        height: auto;
        padding: 0;
        margin: 0 0 30px 0;
    }

    .book {
        margin: 0 auto;
    }

    figcaption {
        text-align: center;
        width: 320px;
        top: 250px;
        padding-left: 0;
        left: -80px;
        font-size: 90%;
    }
}

View Code

澳门新浦京手机版 18

在线演示 
      源码下载

CSS3开关切换按钮 可左右横向切换

这款开关切换按钮大家应该看到过了,类似的特效很多,实用性有待讨论,不过还是蛮漂亮的。

核心jQuery代码:

澳门新浦京手机版 19澳门新浦京手机版 20

$('.track').click( function() {
    $indicator = $('.indicator');
    if( $indicator.hasClass('switch-on') ) {
        $indicator.removeClass('switch-on').addClass('switch-off');
        }
    else {
        $indicator.removeClass('switch-off').addClass('switch-on');
    }
});

View Code

核心CSS代码:

澳门新浦京手机版 21澳门新浦京手机版 22

.track {
  position: relative;
  margin: 10em auto;
  /* padding: .2em; */
  background: #b7b7b7;
  width: 10em;
  height: 4em;
  border: .1em solid #575757;
  border-radius: 10em;
  box-shadow: inset 0 .5em .5em #666,
    inset 0 -.2em .5em #666;
  cursor: pointer;
}

.track:after {
  position: absolute;
  content: "";
  display: block;
  margin-top: -4.5em;
  margin-left: -.6em;
  width: 11em;
  height: 5em;
  border: .1em solid #979797;
  border-radius: 10em;
  box-shadow: inset 0 1em 1em #979797, inset 0 -1em 1em #e7e7e7, 0 .1em .2em #fff;
  z-index: -1;
}

.indicator {
  position: relative;
  background: #ddd;
  height: 100%;
  width: 40%;
  border-radius: 50%;
  border: .1em solid #666;
  box-shadow: inset 0 .5em .5em #f7f7f7,
    inset 0 -.3em .3em #666;
}

.indicator:after {
  content: "";
  display: block;
  margin: 1.2em auto;
  background: #ff3434;
  width: 1em;
  height: 1em;
  box-shadow: inset 0 .15em #499,
    0 .15em #faa;
  border-radius: 50%;
}

.indicator.switch-on {
  -webkit-animation:           switch-on .3s;
  -moz-animation:              switch-on .3s;
  -o-animation:                switch-on .3s;
  animation:                   switch-on .3s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode:    forwards;
  -o-animation-fill-mode:      forwards;
  animation-fill-mode:        forwards;
}

.indicator.switch-off {
  -webkit-animation:           switch-off .3s;
  -moz-animation:              switch-off .3s;
  -o-animation:                switch-off .3s;
  animation:                   switch-off .3s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode:    forwards;
  -o-animation-fill-mode:      forwards;
  -animation-fill-mode:        forwards;
}

@-webkit-keyframes switch-on {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: 60%;
  }
}
@-moz-keyframes switch-on {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: 60%;
  }
}
@-o-keyframes switch-on {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: 60%;
  }
}
@keyframes switch-on {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: 60%;
  }
}

@-webkit-keyframes switch-off {
  0% {
    margin-left: 60%;
  }
  100% {
    margin-left: 0;
  }
}
@-moz-keyframes switch-off {
  0% {
    margin-left: 60%;
  }
  100% {
    margin-left: 0;
  }
}
@-o-keyframes switch-off {
  0% {
    margin-left: 60%;
  }
  100% {
    margin-left: 0;
  }
}
@keyframes switch-off {
  0% {
    margin-left: 60%;
  }
  100% {
    margin-left: 0;
  }
}

.indicator.switch-on:after {
  -webkit-animation:           light-on .3s;
  -moz-animation:              light-on .3s;
  -o-animation:                light-on .3s;
  animation:                   light-on .3s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode:    forwards;
  -o-animation-fill-mode:      forwards;
  -animation-fill-mode:        forwards;
}

.indicator.switch-off:after {
  -webkit-animation:           light-off .3s;
  -moz-animation:              light-off .3s;
  -o-animation:                light-off .3s;
  animation:                   light-off .3s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode:    forwards;
  -o-animation-fill-mode:      forwards;
  -animation-fill-mode:        forwards;
}

@-webkit-keyframes light-on {
  0% {
    background: #fa3434;
    box-shadow: inset 0 .15em #499,
    0 .15em #faa;
  }

  100% {
    background: #0f0;
    box-shadow: inset 0 .15em #494,
    0 .15em #afa;
  }
}

@-moz-keyframes light-on {
  0% {
    background: #ff3434;
    box-shadow: inset 0 .15em #499,
    0 .15em #faa;
  }

  100% {
    background: #0f0;
    box-shadow: inset 0 .15em #494,
    0 .15em #afa;
  }
}

@-o-keyframes light-on {
  0% {
    background: #ff3434;
    box-shadow: inset 0 .15em #499,
    0 .15em #faa;
  }

  100% {
    background: #0f0;
    box-shadow: inset 0 .15em #494,
    0 .15em #afa;
  }
}

@keyframes light-on {
  0% {
    background: #ff3434;
    box-shadow: inset 0 .15em #499,
    0 .15em #faa;
  }

  100% {
    background: #0f0;
    box-shadow: inset 0 .15em #494,
    0 .15em #afa;
  }
}

@-webkit-keyframes light-off {
  0% {
    background: #0f0;
    box-shadow: inset 0 .15em #494,
    0 .15em #afa;
  }

  100% {
    background: #ff3434;
    box-shadow: inset 0 .15em #499,
    0 .15em #faa;
  }
}

@-moz-keyframes light-off {
  0% {
    background: #0f0;
    box-shadow: inset 0 .15em #494,
    0 .15em #afa;
  }

  100% {
    background: #ff3434;
    box-shadow: inset 0 .15em #499,
    0 .15em #faa;
  }
}

@-o-keyframes light-off {
  0% {
    background: #0f0;
    box-shadow: inset 0 .15em #494,
    0 .15em #afa;
  }

  100% {
    background: #ff3434;
    box-shadow: inset 0 .15em #499,
    0 .15em #faa;
  }
}

@keyframes light-off {
  0% {
    background: #0f0;
    box-shadow: inset 0 .15em #494,
    0 .15em #afa;
  }

  100% {
    background: #ff3434;
    box-shadow: inset 0 .15em #499,
    0 .15em #faa;
  }
}

View Code

澳门新浦京手机版 23

在线演示 
   
  源码下载

CSS3华丽的Tab菜单 带小图标动画

这是一款带动画效果的Tab菜单,也是基于HTML5和CSS3的,相当酷。

核心jQuery代码:

澳门新浦京手机版 24澳门新浦京手机版 25

var menuItems = $('.main-navigation li');

menuItems.on("click", function(event) {

  menuItems.removeClass("active");

  $(this).addClass("active");

  $(".main-content").css({
    "background": $(this).data("bg-color")
  });

  event.preventDefault();
});

View Code

澳门新浦京手机版 26

在线演示 
      源码下载

发表评论

电子邮件地址不会被公开。 必填项已用*标注