JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > 炫酷霸气的HTML5/jQuery应用及源码

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

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


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


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


核心jQuery代码:


  1. var myData = {
  2.   labels : ["Mo","Di","Mi","Do","Fr","Sa","So"],
  3.   datasets : [
  4.     {
  5.       fillColor : "rgba(220,220,220,.5)",
  6.       strokeColor : "rgba(220,220,220,1)",
  7.       pointColor : "rgba(220,220,220,1)",
  8.       pointStrokeColor : "#fff",
  9.       data : [65,59,90,81,56,55,40]
  10.     },
  11.     {
  12.       fillColor : "rgba(90,190,90,.5)",
  13.       strokeColor : "rgba(90,190,90,1)",
  14.       pointColor : "rgba(90,190,90,1)",
  15.       pointStrokeColor : "#fff",
  16.       data : [40,48,40,40,90,27,90]
  17.     }
  18.   ]
  19. }

  20. new Chart(document.getElementById("canvas").getContext("2d")).Line(myData)
复制代码

在线演示        源码下载


HTML5/CSS3仿Facebook登录表单


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


核心CSS代码:

  1. .login-form-wrap {
  2.   background: #5170ad;
  3.   background: -moz-radial-gradient(center, ellipse cover, #5170ad 0%, #355493 100%);
  4.   background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #5170ad), color-stop(100%, #355493));
  5.   background: -webkit-radial-gradient(center, ellipse cover, #5170ad 0%, #355493 100%);
  6.   background: -o-radial-gradient(center, ellipse cover, #5170ad 0%, #355493 100%);
  7.   background: -ms-radial-gradient(center, ellipse cover, #5170ad 0%, #355493 100%);
  8.   background: radial-gradient(ellipse at center, #5170ad 0%, #355493 100%);
  9.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5170ad', endColorstr='#355493',GradientType=1 );
  10.   border: 1px solid #2d416d;
  11.   box-shadow: 0 1px #5670a4 inset, 0 0 10px 5px rgba(0, 0, 0, 0.1);
  12.   border-radius: 5px;
  13.   position: relative;
  14.   width: 360px;
  15.   height: 380px;
  16.   margin: 10px auto 20px auto;
  17.   padding: 50px 30px 0 30px;
  18.   text-align: center;
  19. }
  20. .login-form-wrap:before {
  21.   background: url(http://i.imgur.com/0vLxyVB.png);
  22.   display: block;
  23.   content: '';
  24.   width: 58px;
  25.   height: 19px;
  26.   top: 10px;
  27.   left: 10px;
  28.   position: absolute;
  29. }
  30. .login-form-wrap > h1 {
  31.   margin: 0 0 50px 0;
  32.   padding: 0;
  33.   font-size: 26px;
  34.   color: #fff;
  35. }
  36. .login-form-wrap > h5 {
  37.   margin-top: 40px;
  38. }
  39. .login-form-wrap > h5 > a {
  40.   font-size: 14px;
  41.   color: #fff;
  42.   text-decoration: none;
  43.   font-weight: 400;
  44. }

  45. .login-form input[type="email"], .login-form input[type="password"] {
  46.   width: 100%;
  47.   border: 1px solid #314d89;
  48.   outline: none;
  49.   padding: 12px 20px;
  50.   color: #afafaf;
  51.   font-weight: 400;
  52.   font-family: 'Lato', sans-serif;
  53.   cursor: pointer;
  54. }
  55. .login-form input[type="email"] {
  56.   border-bottom: none;
  57.   border-radius: 4px 4px 0 0;
  58.   padding-bottom: 13px;
  59.   box-shadow: 0 -1px 0 #e0e0e0 inset, 0 1px 2px rgba(0, 0, 0, 0.23) inset;
  60. }
  61. .login-form input[type="password"] {
  62.   border-top: none;
  63.   border-radius: 0 0 4px 4px;
  64.   box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.23) inset, 0 1px 2px rgba(255, 255, 255, 0.1);
  65. }
  66. .login-form input[type="submit"] {
  67.   font-family: 'Lato', sans-serif;
  68.   font-weight: 400;
  69.   background: #e0e0e0;
  70.   background: -moz-linear-gradient(top, #e0e0e0 0%, #cecece 100%);
  71.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e0e0e0), color-stop(100%, #cecece));
  72.   background: -webkit-linear-gradient(top, #e0e0e0 0%, #cecece 100%);
  73.   background: -o-linear-gradient(top, #e0e0e0 0%, #cecece 100%);
  74.   background: -ms-linear-gradient(top, #e0e0e0 0%, #cecece 100%);
  75.   background: linear-gradient(to bottom, #e0e0e0 0%, #cecece 100%);
  76.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#cecece',GradientType=0 );
  77.   display: block;
  78.   margin: 20px auto 0 auto;
  79.   width: 100%;
  80.   border: none;
  81.   border-radius: 3px;
  82.   padding: 8px;
  83.   font-size: 17px;
  84.   color: #636363;
  85.   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  86.   font-weight: 700;
  87.   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.17), 0 1px 0 rgba(255, 255, 255, 0.36) inset;
  88. }
  89. .login-form input[type="submit"]:hover {
  90.   background: #DDD;
  91. }
  92. .login-form input[type="submit"]:active {
  93.   padding-top: 9px;
  94.   padding-bottom: 7px;
  95.   background: #C9C9C9;
  96. }
复制代码

在线演示        源码下载


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


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


核心jQuery代码:

  1. var Loader = function () {   
  2.   var loader = document.querySelector('.loader-container'),
  3.       meter = document.querySelector('.meter'),
  4.       k, i = 1,
  5.       counter = function () {
  6.         if (i <= 100) {   
  7.           meter.innerHTML = i.toString();
  8.           i++;
  9.         } else {
  10.           window.clearInterval(k);
  11.         }
  12.       };

  13.     return {
  14.       init: function (options) {
  15.       options = options || {};
  16.       var time = options.time ? options.time : 0,
  17.             interval = time/100;
  18.       
  19.         loader.classList.add('run');
  20.       k = window.setInterval(counter, interval);
  21.       setTimeout(function () {        
  22.           loader.classList.add('done');
  23.       }, time);
  24.     },
  25.   }
  26. }();

  27. Loader.init({
  28.       // If you have changed the @time in LESS, update this number to the corresponding value. Measured in miliseconds.
  29.       time: 10000
  30. });
复制代码

在线演示        源码下载


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


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


核心CSS代码:


  1. .switch input {
  2.   top: 0;
  3.   right: 0;
  4.   bottom: 0;
  5.   left: 0;
  6.   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  7.   filter: alpha(opacity=0);
  8.   -moz-opacity: 0;
  9.   opacity: 0;
  10.   z-index: 100;
  11.   position: absolute;
  12.   width: 100%;
  13.   height: 100%;
  14.   cursor: pointer;
  15. }

  16. .switch {
  17.     width: 180px;
  18.     height: 55px;
  19.     position: relative;
  20.     margin: 100px auto;
  21. }

  22. .switch label {
  23.     display: block;
  24.     width: 80%;
  25.     height: 100%;
  26.     position: relative;
  27.     background: #1F2736; /*#121823*/
  28.     background: linear-gradient(#121823, #161d2b);
  29.     border-radius: 30px 30px 30px 30px;
  30.     box-shadow:
  31.         inset 0 3px 8px 1px rgba(0,0,0,0.5),
  32.         inset 0 1px 0 rgba(0,0,0,0.5),
  33. 1px 0 rgba(255,255,255,0.2);
  34.         -webkit-transition: all .5s ease;
  35. transition: all .5s ease;

  36. }

  37. .switch input ~ label i {
  38.     display: block;
  39.     height: 51px;
  40.     width: 51px;
  41.     position: absolute;
  42.     left: 2px;
  43.     top: 2px;
  44.     z-index: 2;
  45.     border-radius: inherit;
  46.     background: #283446; /* Fallback */
  47.     background: linear-gradient(#36455b, #283446);
  48.     box-shadow:
  49.         inset 0 1px 0 rgba(255,255,255,0.2),
  50. 0 8px rgba(0,0,0,0.3),
  51. 12px 12px rgba(0,0,0,0.4);
  52.     -webkit-transition: all .5s ease;
  53. transition: all .5s ease;
  54. }


  55. .switch label + span {
  56.     content: "";
  57.     display: inline-block;
  58.     position: absolute;
  59.     right: 0px;
  60.     top: 17px;
  61.     width: 18px;
  62.     height: 18px;
  63.     border-radius: 10px;
  64.     background: #283446;
  65. background: gradient-gradient(#36455b, #283446);
  66. box-shadow:
  67.           inset 0 1px 0 rgba(0,0,0,0.2),
  68. 1px 0 rgba(255,255,255,0.1),
  69. 0 10px rgba(185,231,253,0),
  70.   inset 0 0 8px rgba(0,0,0,0.9),
  71.   inset 0 -2px 5px rgba(0,0,0,0.3),
  72.   inset 0 -5px 5px rgba(0,0,0,0.5);
  73.      -webkit-transition: all .5s ease;
  74.     transition: all .5s ease;
  75.     z-index: 2;
  76. }

  77. /* Toggle */
  78. .switch input:checked ~ label + span {
  79.     content: "";
  80.     display: inline-block;
  81.     position: absolute;
  82.     width: 18px;
  83.     height: 18px;
  84.     border-radius: 10px;
  85.     -webkit-transition: all .5s ease;
  86.     transition: all .5s ease;
  87.     z-index: 2;
  88.     background: #b9f3fe;
  89. background: gradient-gradient(#ffffff, #77a1b9);
  90. box-shadow:        
  91.           inset 0 1px 0 rgba(0,0,0,0.1),
  92. 1px 0 rgba(255,255,255,0.1),
  93. 0 10px rgba(100,231,253,1),
  94.           inset 0 0 8px rgba( 61,157,247,0.8),
  95.   inset 0 -2px 5px rgba(185,231,253,0.3),
  96.   inset 0 -3px 8px rgba(185,231,253,0.5);

  97. }

  98. .switch input:checked ~ label i {
  99.     left: auto;
  100.     left: 63%;
  101.     box-shadow:
  102.         inset 0 1px 0 rgba(255,255,255,0.2),
  103. 0 8px rgba(0,0,0,0.3),
  104. 8px 8px rgba(0,0,0,0.3),
  105.         inset -1px 0 1px #b9f3fe;

  106.     -webkit-transition: all .5s ease;
  107. transition: all .5s ease;
  108. }
复制代码

在线演示        源码下载


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



在线演示        源码下载


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


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


核心jQuery代码:


  1. function closeMessage(el) {
  2.   el.addClass('is-hidden');
  3. }

  4. $('.js-messageClose').on('click', function(e) {
  5.   closeMessage($(this).closest('.Message'));
  6. });

  7. $('#js-helpMe').on('click', function(e) {
  8.   alert('Help you we will, young padawan');
  9.   closeMessage($(this).closest('.Message'));
  10. });

  11. $('#js-authMe').on('click', function(e) {
  12.   alert('Okelidokeli, requesting data transfer.');
  13.   closeMessage($(this).closest('.Message'));
  14. });

  15. $('#js-showMe').on('click', function(e) {
  16.   alert("You're off to our help section. See you later!");
  17.   closeMessage($(this).closest('.Message'));
  18. });

  19. $(document).ready(function() {
  20.   setTimeout(function() {
  21.     closeMessage($('#js-timer'));
  22.   }, 5000);
  23. });
复制代码

在线演示        源码下载


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


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

在线演示        源码下载


HTML5/CSS3提示框Tooltip动画


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


核心CSS代码:


  1. .tooltip p { font-family: sans-serif;
  2.              font-size:14px;
  3.   font-weight:300;}

  4. .tooltip { width:120px;
  5.            padding:10px;
  6.            border-radius:3px;
  7.            position:absolute;
  8.            box-shadow:1px 1px 10px 0 #ccc;
  9.            margin: -500px 0 0 -20px;
  10.            background:#fff;
  11.            -webkit-transition:margin .5s ease-in-out;
  12.           -moz-transition:margin .5s ease-in-out;}

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

  14. .item:hover .tooltip {
  15.            margin:-145px 0 0 -20px;
  16.            -webkit-transition: margin .15s ease-in-out;
  17.   -moz-transition: margin .15s ease-in-out;}

  18. .arrow {
  19.   position:absolute;
  20.   margin:10px 0 0 50px;
  21.     width: 0;
  22.     height: 0;
  23.     border-left: 10px solid transparent;
  24.     border-right: 10px solid transparent;
  25.     border-top: 10px solid #fff;
  26. }
复制代码

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


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


核心jQuery代码:


  1. (function($){
  2. $(function(){

  3.     $('.code-wrapper').on( "mousemove", function(e) {
  4.       var offsets = $(this).offset();
  5.       var fullWidth = $(this).width();
  6.       var mou** = e.pageX - offsets.left;

  7.       if (mou** < 0) { mou** = 0; }
  8.       else if (mou** > fullWidth) { mou** = fullWidth }


  9.       $(this).parent().find('.divider-bar').css({
  10.         left: mou**,
  11.         transition: 'none'
  12.       });
  13.       $(this).find('.design-wrapper').css({
  14.         transform: 'translateX(' + (mou**) + 'px)',
  15.         transition: 'none'
  16.       });
  17.       $(this).find('.design-image').css({
  18.         transform: 'translateX(' + (-1*mou**) + 'px)',
  19.         transition: 'none'
  20.       });
  21.     });
  22.     $('.divider-wrapper').on( "mouseleave", function() {
  23.       $(this).parent().find('.divider-bar').css({
  24.         left: '50%',
  25.         transition: 'all .3s'
  26.       });
  27.       $(this).find('.design-wrapper').css({
  28.         transform: 'translateX(50%)',
  29.         transition: 'all .3s'
  30.       });
  31.       $(this).find('.design-image').css({
  32.         transform: 'translateX(-50%)',
  33.         transition: 'all .3s'
  34.       });
  35.     });
  36.   
  37. }); // end of document ready
  38. })(jQuery);
复制代码

在线演示        源码下载

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

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

2. 7个最新jQuery/HTML5应用及源码下载

3. 干货分享 超炫丽的HTML5/jQuery应用及代码

4. 7个经典创意jQuery应用插件及源码

5. 7个炫酷的jQuery动画插件及源码

6. 6款精美jQuery源码插件及源码

7. 7款很酷的JQuery动画和实用的JQuery应用

8. 9款完美体验的HTML5/jQuery应用

9. 7款很实用的jQuery/CSS3插件及源码下载

10. 超酷实用的jQuery焦点图赏析及源码

本文来源:https://www.51html5.com/a1321.html

点击展开全部

﹝炫酷霸气的HTML5/jQuery应用及源码﹞相关内容

「炫酷霸气的HTML5/jQuery应用及源码」相关专题

其它栏目

也许您还喜欢