炫酷霸气的HTML5/jQuery应用及源码
也许在5年前,HTML5还是一种很前卫的技术,大家还只是将它当做实验来看待,更别说产品应用了。但是现在HTML5已经非常流行,无论从PC端还是移动端,HTML5都扮演着非常重要的角色。今天我们要分享的一些应用就是基于HTML5和jQuery的,加上源代码的下载,你一定会觉得很受用的,赶紧分享吧。
HTML5线性图表 图表数据区域可着色
这是一款基于Canvas的HTML5图表应用,在图表数据初始化的时候伴随动画效果。
核心jQuery代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.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代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.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代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.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代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
(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);