炫酷霸气的HTML5/jQuery应用及源码

也许在5年前，HTML5还是一种很前卫的技术，大家还只是将它当做实验来看待，更别说产品应用了。但是现在HTML5已经非常流行，无论从PC端还是移动端，HTML5都扮演着非常重要的角色。今天我们要分享的一些应用就是基于HTML5和jQuery的，加上源代码的下载，你一定会觉得很受用的，赶紧分享吧。

HTML5线性图表 图表数据区域可着色

这是一款基于Canvas的HTML5图表应用，在图表数据初始化的时候伴随动画效果。

核心jQuery代码：

var myData = {

  labels : ["Mo","Di","Mi","Do","Fr","Sa","So"],

  datasets : [

    {

      fillColor : "rgba(220,220,220,.5)",

      strokeColor : "rgba(220,220,220,1)",

      pointColor : "rgba(220,220,220,1)",

      pointStrokeColor : "#fff",

      data : [65,59,90,81,56,55,40]

    },

    {

      fillColor : "rgba(90,190,90,.5)",

      strokeColor : "rgba(90,190,90,1)",

      pointColor : "rgba(90,190,90,1)",

      pointStrokeColor : "#fff",

      data : [40,48,40,40,90,27,90]

    }

  ]

}



new Chart(document.getElementById("canvas").getContext("2d")).Line(myData)

View Code

在线演示        源码下载

HTML5/CSS3仿Facebook登录表单

这是一款利用CSS3实现的创意表单，它的外观是模仿Facebook的。

核心CSS代码：

.login-form-wrap {

  background: #5170ad;

  background: -moz-radial-gradient(center, ellipse cover, #5170ad 0%, #355493 100%);

  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #5170ad), color-stop(100%, #355493));

  background: -webkit-radial-gradient(center, ellipse cover, #5170ad 0%, #355493 100%);

  background: -o-radial-gradient(center, ellipse cover, #5170ad 0%, #355493 100%);

  background: -ms-radial-gradient(center, ellipse cover, #5170ad 0%, #355493 100%);

  background: radial-gradient(ellipse at center, #5170ad 0%, #355493 100%);

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5170ad', endColorstr='#355493',GradientType=1 );

  border: 1px solid #2d416d;

  box-shadow: 0 1px #5670a4 inset, 0 0 10px 5px rgba(0, 0, 0, 0.1);

  border-radius: 5px;

  position: relative;

  width: 360px;

  height: 380px;

  margin: 10px auto 20px auto;

  padding: 50px 30px 0 30px;

  text-align: center;

}

.login-form-wrap:before {

  background: url(http://i.imgur.com/0vLxyVB.png);

  display: block;

  content: '';

  width: 58px;

  height: 19px;

  top: 10px;

  left: 10px;

  position: absolute;

}

.login-form-wrap > h1 {

  margin: 0 0 50px 0;

  padding: 0;

  font-size: 26px;

  color: #fff;

}

.login-form-wrap > h5 {

  margin-top: 40px;

}

.login-form-wrap > h5 > a {

  font-size: 14px;

  color: #fff;

  text-decoration: none;

  font-weight: 400;

}



.login-form input[type="email"], .login-form input[type="password"] {

  width: 100%;

  border: 1px solid #314d89;

  outline: none;

  padding: 12px 20px;

  color: #afafaf;

  font-weight: 400;

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

  cursor: pointer;

}

.login-form input[type="email"] {

  border-bottom: none;

  border-radius: 4px 4px 0 0;

  padding-bottom: 13px;

  box-shadow: 0 -1px 0 #e0e0e0 inset, 0 1px 2px rgba(0, 0, 0, 0.23) inset;

}

.login-form input[type="password"] {

  border-top: none;

  border-radius: 0 0 4px 4px;

  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.23) inset, 0 1px 2px rgba(255, 255, 255, 0.1);

}

.login-form input[type="submit"] {

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

  font-weight: 400;

  background: #e0e0e0;

  background: -moz-linear-gradient(top, #e0e0e0 0%, #cecece 100%);

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e0e0e0), color-stop(100%, #cecece));

  background: -webkit-linear-gradient(top, #e0e0e0 0%, #cecece 100%);

  background: -o-linear-gradient(top, #e0e0e0 0%, #cecece 100%);

  background: -ms-linear-gradient(top, #e0e0e0 0%, #cecece 100%);

  background: linear-gradient(to bottom, #e0e0e0 0%, #cecece 100%);

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#cecece',GradientType=0 );

  display: block;

  margin: 20px auto 0 auto;

  width: 100%;

  border: none;

  border-radius: 3px;

  padding: 8px;

  font-size: 17px;

  color: #636363;

  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);

  font-weight: 700;

  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.17), 0 1px 0 rgba(255, 255, 255, 0.36) inset;

}

.login-form input[type="submit"]:hover {

  background: #DDD;

}

.login-form input[type="submit"]:active {

  padding-top: 9px;

  padding-bottom: 7px;

  background: #C9C9C9;

}

View Code

在线演示        源码下载

HTML5/CSS3超酷进度条 不同进度多种颜色

这是一款很酷的HTML5进度条插件，有不错的动画效果。

核心jQuery代码：

var Loader = function () {    

  var loader = document.querySelector('.loader-container'),

      meter = document.querySelector('.meter'),

      k, i = 1,

      counter = function () {

        if (i <= 100) {   

          meter.innerHTML = i.toString();

          i++;

        } else {

          window.clearInterval(k);

        }

      };



    return {

      init: function (options) {

      options = options || {};

      var time = options.time ? options.time : 0,

            interval = time/100;

      

        loader.classList.add('run');

      k = window.setInterval(counter, interval); 

      setTimeout(function () {        

          loader.classList.add('done');

      }, time);

    },

  }

}();



Loader.init({

      // If you have changed the @time in LESS, update this number to the corresponding value. Measured in miliseconds.

      time: 10000

});

View Code

在线演示        源码下载

CSS3 3D发光切换按钮 模拟效果很逼真

这款CSS3 3D开关切换按钮效果还是很不错的。

核心CSS代码：

.switch input {

  top: 0; 

  right: 0; 

  bottom: 0; 

  left: 0;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  filter: alpha(opacity=0);

  -moz-opacity: 0;

  opacity: 0;

  z-index: 100;

  position: absolute;

  width: 100%;

  height: 100%;

  cursor: pointer;

}



.switch {

    width: 180px;

    height: 55px;

    position: relative;

    margin: 100px auto;

}



.switch label {

    display: block;

    width: 80%;

    height: 100%;

    position: relative;

    background: #1F2736; /*#121823*/

    background: linear-gradient(#121823, #161d2b);

    border-radius: 30px 30px 30px 30px;

    box-shadow:

        inset 0 3px 8px 1px rgba(0,0,0,0.5),

        inset 0 1px 0 rgba(0,0,0,0.5),

        0 1px 0 rgba(255,255,255,0.2);

        -webkit-transition: all .5s ease;

transition: all .5s ease;



}



.switch input ~ label i {

    display: block;

    height: 51px;

    width: 51px;

    position: absolute;

    left: 2px;

    top: 2px;

    z-index: 2;

    border-radius: inherit;

    background: #283446; /* Fallback */

    background: linear-gradient(#36455b, #283446);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,0.2),

        0 0 8px rgba(0,0,0,0.3),

        0 12px 12px rgba(0,0,0,0.4);

    -webkit-transition: all .5s ease;

transition: all .5s ease;

}





.switch label + span {

    content: "";

    display: inline-block;

    position: absolute;

    right: 0px;

    top: 17px;

    width: 18px;

    height: 18px;

    border-radius: 10px;

    background: #283446; 

background: gradient-gradient(#36455b, #283446);

box-shadow:

          inset 0 1px 0 rgba(0,0,0,0.2),

          0 1px 0 rgba(255,255,255,0.1),

          0 0 10px rgba(185,231,253,0),

  inset 0 0 8px rgba(0,0,0,0.9),

  inset 0 -2px 5px rgba(0,0,0,0.3),

  inset 0 -5px 5px rgba(0,0,0,0.5);

     -webkit-transition: all .5s ease;

    transition: all .5s ease;

    z-index: 2;

}



 /* Toggle */

.switch input:checked ~ label + span { 

    content: "";

    display: inline-block;

    position: absolute;

    width: 18px;

    height: 18px;

    border-radius: 10px;

    -webkit-transition: all .5s ease;

    transition: all .5s ease;

    z-index: 2;

    background: #b9f3fe; 

background: gradient-gradient(#ffffff, #77a1b9);

box-shadow:        

          inset 0 1px 0 rgba(0,0,0,0.1),

          0 1px 0 rgba(255,255,255,0.1),

          0 0 10px rgba(100,231,253,1),

          inset 0 0 8px rgba( 61,157,247,0.8),

  inset 0 -2px 5px rgba(185,231,253,0.3),

  inset 0 -3px 8px rgba(185,231,253,0.5);



 }



.switch input:checked ~ label i {

    left: auto;

    left: 63%;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,0.2),

        0 0 8px rgba(0,0,0,0.3),

        0 8px 8px rgba(0,0,0,0.3),

        inset -1px 0 1px #b9f3fe;



    -webkit-transition: all .5s ease;

transition: all .5s ease;

}

View Code

在线演示        源码下载

CSS3/SVG质感背景小图标 镂空效果图标按钮

在线演示        源码下载

HTML5/CSS3弹出提示框 内置功能按钮

这款HTML5 教程非常实用，是一款带有动画特效的弹出提示框，样式也很不错。

核心jQuery代码：

function closeMessage(el) {

  el.addClass('is-hidden');

}



$('.js-messageClose').on('click', function(e) {

  closeMessage($(this).closest('.Message'));

});



$('#js-helpMe').on('click', function(e) {

  alert('Help you we will, young padawan');

  closeMessage($(this).closest('.Message'));

});



$('#js-authMe').on('click', function(e) {

  alert('Okelidokeli, requesting data transfer.');

  closeMessage($(this).closest('.Message'));

});



$('#js-showMe').on('click', function(e) {

  alert("You're off to our help section. See you later!");

  closeMessage($(this).closest('.Message'));

});



$(document).ready(function() {

  setTimeout(function() {

    closeMessage($('#js-timer'));

  }, 5000);

});

View Code

在线演示        源码下载

HTML5柱状图表 可合并多张图表的数据

又是一款HTML5图表应用，外观很普通，但是其合并功能十分强大。

在线演示        源码下载

HTML5/CSS3提示框Tooltip动画

一款基于CSS3的Tooltip工具，带有淡入淡出动画。

核心CSS代码：

.tooltip p { font-family: sans-serif;

             font-size:14px;

  font-weight:300;}



.tooltip { width:120px;

           padding:10px;

           border-radius:3px;

           position:absolute;

           box-shadow:1px 1px 10px 0 #ccc;

           margin: -500px 0 0 -20px;

           background:#fff;

           -webkit-transition:margin .5s ease-in-out;

          -moz-transition:margin .5s ease-in-out;}



.item:hover  {  background:#6d643b;}



.item:hover .tooltip {

           margin:-145px 0 0 -20px;

           -webkit-transition: margin .15s ease-in-out;

  -moz-transition: margin .15s ease-in-out;}



.arrow {

  position:absolute;

  margin:10px 0 0 50px;

    width: 0; 

    height: 0; 

    border-left: 10px solid transparent;

    border-right: 10px solid transparent;

    border-top: 10px solid #fff;

}

View Code

在线演示        源码下载

HTML5/CSS3图片分割遮罩滑块动画

该应用可以将任意元素遮盖在图片上方，并且指定遮住的部分。

核心jQuery代码：

(function($){

$(function(){



    $('.code-wrapper').on( "mousemove", function(e) {

      var offsets = $(this).offset();

      var fullWidth = $(this).width();

      var mouseX = e.pageX - offsets.left;



      if (mouseX < 0) { mouseX = 0; }

      else if (mouseX > fullWidth) { mouseX = fullWidth }





      $(this).parent().find('.divider-bar').css({

        left: mouseX,

        transition: 'none'

      });

      $(this).find('.design-wrapper').css({

        transform: 'translateX(' + (mouseX) + 'px)',

        transition: 'none'

      });

      $(this).find('.design-image').css({

        transform: 'translateX(' + (-1*mouseX) + 'px)',

        transition: 'none'

      });

    });

    $('.divider-wrapper').on( "mouseleave", function() {

      $(this).parent().find('.divider-bar').css({

        left: '50%',

        transition: 'all .3s'

      });

      $(this).find('.design-wrapper').css({

        transform: 'translateX(50%)',

        transition: 'all .3s'

      });

      $(this).find('.design-image').css({

        transform: 'translateX(-50%)',

        transition: 'all .3s'

      });

    });

  

}); // end of document ready

})(jQuery);

View Code

在线演示        源码下载