精心挑选的HTML5/CSS3应用及源码

澳门新葡亰娱乐在线 7

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

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

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

  • 炫酷霸气的HTML5/jQuery应用及源码
  • 干货分享
    超炫丽的HTML5/jQuery应用及代码
  • 绚丽而实用的jQuery/CSS3应用及源码

澳门新葡亰娱乐在线 1

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

在线演示澳门新葡亰娱乐在线,源码下载

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>

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

在线演示 
   
  源码下载

发表评论

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

相关文章

网站地图xml地图