精心挑选的HTML5/CSS3应用及源码
这段时间我已经为大家分享了不少关于HTML5应用和jQuery插件了，先来回顾一下：
今天我们继续来介绍一些新鲜的HTML5/CSS3应用及源码，希望大家会喜欢。HTML5是WEB的未来，我们需要不断学习。
HTML5 3D骨牌图片特效
很不错的HTML5 3D图片动画特效，图片也不再是平面的了。
核心CSS代码：
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; } }
jQuery UI滑杆插件 可Tooltip提示
这又是一款相当实用的jQuery插件，基于jQuery UI的，所以外观非常漂亮。
核心jQuery代码：
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 = $('<span class="ui-slider-pip"><span class="ui-slider-line"></span><span class="ui-slider-number">'+i+'</span></span>'); // 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 = [ $('<span class="ui-slider-tip">'+ this.options.values[0]+'</span>'), $('<span class="ui-slider-tip">'+ this.options.values[1]+'</span>') ]; // else if its just a normal slider } else { // create a tip element var $tip = $('<span class="ui-slider-tip">'+ this.options.value+'</span>'); } // 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'); });
CSS3个人资料表单 分两步骤表单
一款基于CSS3的表单应用，可以分步骤填写。
核心jQuery代码：
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(); });
核心CSS代码：
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; } }
HTML5/CSS3自定义浮动Select 超炫下拉菜单动画
一款很有特色的自定义Select下拉框，也是基于HTML5技术的，因为需要一些浮动动画。
核心jQuery代码：
$(document).ready(function(){ $(".dropdown").click(function(){ $(".menu").toggleClass("showMenu"); $(".menu > li").click(function(){ $(".dropdown > p").html($(this).html()); $(".menu").removeClass("showMenu"); }); }); });
HTML5/CSS3书本翻页3D动画
和第一个应用类似，这也是HTML5 3D动画，是一本3D的电子书，可以翻页。
核心CSS代码（略长）：
/* 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%; } }
CSS3开关切换按钮 可左右横向切换
这款开关切换按钮大家应该看到过了，类似的特效很多，实用性有待讨论，不过还是蛮漂亮的。
核心jQuery代码：
$('.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');
}
});
核心CSS代码：
.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; } }
CSS3华丽的Tab菜单 带小图标动画
这是一款带动画效果的Tab菜单，也是基于HTML5和CSS3的，相当酷。
核心jQuery代码：
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(); });
