炫酷霸气的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)

在线演示        源码下载

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;
}

在线演示        源码下载

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
});

在线演示        源码下载

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;
}

在线演示        源码下载

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);
});

在线演示        源码下载

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;
}

在线演示        源码下载

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);

在线演示        源码下载

时间： 2024-08-25 00:37:28

炫酷霸气的HTML5/jQuery应用及源码的相关文章

js炫酷小球沿着直线跑动导航条特效源码分享

在线预览特效地址: http://www.zuidaima.com/html/2251669926857728/index.html 最近一直在做企业的网站,今天分享一个前端的demo主要想分享的就是js. 主要的效果,先上图吧.如下: 哈~ 盗了一下最代码的logo,大牛不要怪罪我啊. 这里因为没有部署到网上,我就描述一下主要的动画效果吧! 第一个效果:里面有个小球的 会沿着红色的线条跑,遇到圆就会绕一圈然后接着跑直线,遇到圆又绕着圆跑,直到把直线都跑完为止,然后重新开始跑,这是第一个动画效果

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

这段时间我已经为大家分享了不少关于HTML5应用和jQuery插件了,先来回顾一下: 炫酷霸气的HTML5/jQuery应用及源码 干货分享 超炫丽的HTML5/jQuery应用及代码 绚丽而实用的jQuery/CSS3应用及源码 今天我们继续来介绍一些新鲜的HTML5/CSS3应用及源码,希望大家会喜欢.HTML5是WEB的未来,我们需要不断学习. HTML5 3D骨牌图片特效 很不错的HTML5 3D图片动画特效,图片也不再是平面的了. 核心CSS代码: figure { margin: 0

超炫酷的jQuery/HTML5应用效果及源码

jQuery非常强大,我们之前也用jQuery分享过很多实用的插件.HTML5可以让网页变得更加绚丽多彩,将HTML5和jQuery结合使用那将发挥更棒的效果. 今天向大家收集了一些关于HTML5和jQuery的应用及其源码,一起来看看. HTML5动感的火焰燃烧动画特效 这又是一款基于HTML5的超炫动画特效,是一款动感的火焰燃烧动画效果.这款HTML5动画火焰燃烧非常逼真. 核心jQuery代码: $( document ).ready(function() { // Set canvas

转:精美jQuery插件及源码 前端开发福利

原文来自于:http://www.html5tricks.com/pretty-jquery-plugin.html jQuery是一个非常不错的javascript框架,很多前端开发者喜欢的原因不仅是因为jQuery使用起来方便,更重要的是因为它的插件很多,我们可以将这些插件应用到自己的项目中去.下面这些精美的jQuery插件提供源代码下载,希望对你有所帮助. 1.jQuery自定义下拉框选择列表 5款炫酷样式 这是一款基于jQuery的自定义下拉框选择列表插件,利用这款jQuery插件我们可

9款让你眼前一亮的HTML5/CSS3示例及源码

1.HTML5 3D点阵列波浪翻滚动画 今天我们要再分享一款基于HTML5 3D的点阵列波浪翻滚动画特效,同样是非常的壮观. 在线演示 源码下载 2.HTML5小球弹跳动画 很不错的3D小球 今天我要向大家分享一款很逼真的HTML5动画特效,它是3个色彩各异的弹跳小球,每一个小球在弹跳的时候都会有变化的小球投影,让整个动画更加逼真,而且具有3D的视觉效果. 在线演示 源码下载 3.纯CSS3纸片层叠而成的庙宇动画 今天要分享的这款纯CSS3动画非常特别,动画主体的原型是一座庙宇的屋顶,它用3张纸

jQuery之Deferred源码剖析

一.前言 大约在夏季,我们谈过ES6的Promise(详见here),其实在ES6前jQuery早就有了Promise,也就是我们所知道的Deferred对象,宗旨当然也和ES6的Promise一样,通过链式调用,避免层层嵌套,如下: //jquery版本大于1.8 function runAsync(){ var def = $.Deferred(); setTimeout(function(){ console.log('I am done'); def.resolve('whatever'

Jquery.cookie.js 源码和使用方法

jquery.cookie.js源码和使用方法 jQuery操作cookie的插件,大概的使用方法如下 $.cookie(‘the_cookie’); //读取Cookie值$.cookie(’the_cookie’, ‘the_value’); //设置cookie的值$.cookie(’the_cookie’, ‘the_value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true});//新建一个cookie 包括有效

Jquery之isPlainObject源码分析

今天对Jquery中 isPlainObject 源码分析. 1.  isPlainObject 方法的作用: 用来判断传入参数,是否是对象. 2. 源码分析:isPlainObject: function( obj ) { // 1. jQuery.type( obj ): 通过 juery 封装的类型判断方法,如果不是 Object类型,返回false // 2. obj.nodeType : 用来判断是否是dom 节点, 如果是,返回 false // 3. jQuery.isWindow

基于WebGL的炫酷元素背景水波涟漪jQuery特效

jquery.ripples是一款基于WebGL的效果非常炫酷的元素背景水波涟漪jQuery特效插件.该jQuery插件通过强大的WebGL,可以在指定的元素上添加一个水波层,制作出水波涟漪的炫酷效果,并且可以使用鼠标来和它进行互动. WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以