Tất cả bài viết | Lập trình HTML5
Hướng dẫn tạo hiệu ứng tuyết rơi bằng HTML5 Canvas
Hướng dẫn tạo hiệu ứng tuyết rơi bằng HTML5 Canvas
Phần định nghĩa nội dung HTML cho trang web
Tạo hiệu ứng tuyết rơi bằng HTML5 Canvas
Phần định nghĩa CSS cho trang web
body {
background: #090b44;
/* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #090b44 0%, #00001c 100%);
/* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#090b44), color-stop(100%,#00001c));
/* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #090b44 0%,#00001c 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #090b44 0%,#00001c 100%);
/* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #090b44 0%,#00001c 100%);
/* IE10+ */
background: radial-gradient(ellipse at center, #090b44 0%,#00001c 100%);
/* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#090b44', endColorstr='#00001c',GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
padding: 0;
text-align: center;
font-family:Arial;
position: relative;
margin: 0;
height: 100%;
padding-bottom: 50px;
}
.wrapper {
height: auto !important;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
h1 {
margin-top: 100px;
color:#FFFFFF;
text-shadow: 0 1px 5px rgba(0,0,0,0.5);
margin-bottom: 5px;
font-size: 70px;
letter-spacing: -4px;
}
.main {
float: left;
width: 100%;
margin: 0 auto;
}
.header {
position: relative;
}
a {
text-decoration: none;
color:#1DF803;
}
.main h1 {
padding:20px 50px;
float: left;
width: 100%;
font-size: 40px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-weight: 100;
margin: 0;
padding-top: 25px;
font-family:Arial;
letter-spacing: 2px;
}
canvas {
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
}
canvas.flare
{
opacity: 0.5;
}
.snowWindPower {
padding: 10px;
width: 90px;
border: none;
border-radius: 3px;
font-size: 33px;
background: rgba(0, 0, 0, 0.31);
color: white;
}
Phần định nghĩa JQUERY
$(document).ready( function() {
$("canvas.flare").let_it_snow({
windPower: 0,
speed: 0,
color: "#392F52",
size:120,
opacity: 0.00000001,
count: 40,
interaction: false
});
$("canvas.snow").let_it_snow({
windPower: 4,
speed: 1,
count: 250,
size: 0
});
$(".snowWindPower").on("change", function () {
$("canvas.snow").trigger("letItSnow", ["windPower", parseInt($(this).val())]);
}); }
);
Lập trình HTML5 Xem (5454) Học thiết kế web giá rẻ
