也许在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:;
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:;
}
.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:;
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:;
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:;
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:;
right:;
bottom:;
left:;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity:;
opacity:;
z-index:;
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:;
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:;
}
/* 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:;
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:;}
.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:;
height:;
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);