//本HTML代码主要是制作一个变换云背景,利用了三张透明背景图进行穿插,
//加上蓝黑背景色营造出一种变换的效果。中间div穿插了一个时钟,是利用
//canvas画出来的,可以获取当前时间,加上背景的变幻莫测,整体别具一格。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#mycanvas{
position: absolute;
/*z-index: 1;*/
left: 50%;
margin-left: -250px;
}
.bg-color {
width: 100%;
height: 500px;
position: relative;
background-color: #007FD5;
animation:change-color 50s ease infinite;
}
@keyframes change-color{
0% {
background-color:#007fd5;
}
50% {
background-color:#000000;
}
100% {
background-color:#007fd5;
}
}
.cloud-one{
width: 300%;
height:500px ;
background-image: url(img/cloud_one.png);
position: absolute;
top: 0;
left: 0;
animation: cloudmoving1 70s linear infinite;
}
@keyframes cloudmoving1{
from{
left: 0px;
}
to{left: -200%;}
}
.cloud-two{
width: 300%;
height:500px ;
background-image: url(img/cloud_two.png);
position: absolute;
top: 0;
left: 0;
animation: cloudmoving2 100s linear infinite;
}
@keyframes cloudmoving2{
from{
left: 0px;
}
to{left: -200%;}
.cloud-three{
width: 300%;
height:500px ;
background-image: url(img/cloud_three.png);
position: absolute;
top: 0;
left: 0;
animation: cloudmoving3 120s linear infinite;
}
@keyframes cloudmoving3{
from{
left: 0px;
}
to{left: -200%;}
</style>
</head>
<body>
<!--
作者:offline
时间:2017-08-12
描述:canvas:html5新增的画布对象,可以在其中绘制任何的图像,以及线条效果,包括图片
canvas的尺寸应该通过属性进行设置,而不是使用样式进行设置!
-->
<div class="bg-color">
<canvas id="mycanvas" width="500px" height="500px">您的浏览器太low了,实现不了!</canvas>
<script type="text/javascript">
//获取画布对象
var mycanvas = document.getElementById('mycanvas');
//获取一个2d绘图环境(拿到一支画笔)
var ctx = mycanvas.getContext('2d');
function draw(){
//获取系统时间
var nowTime = new Date();
var hours = nowTime.getHours();
var minutes = nowTime.getMinutes();
var seconds = nowTime.getSeconds();
// console.info(hours+":"+minutes+":"+seconds);
//防止小时数超过12
hours = hours>12?hours-12:hours;
//精准的设置小时位置
hours = hours+minutes/60;
//清除画布(防止覆盖效果)
ctx.clearRect(0,0,500,500);
//初始化画笔的样式
ctx.lineWidth = 2; //设置线条的宽度
ctx.strokeStyle = '#fff'; //设置线条的颜色
ctx.beginPath(); //开始画图路径
//设置一个圆形路径
ctx.arc(250,250,150,0,360,false);
//绘制图形
ctx.stroke();
ctx.closePath(); //结束画图路径
//绘制刻度(时刻度)
for(var i=0;i<12;i++){
ctx.beginPath();
ctx.lineWidth=8;
//保存当前绘图环境
ctx.save();
//重置绘制的起始位置(将圆心位置重置为0.0)
ctx.translate(250,250);//转换画布的用户坐标系统
//旋转画布到一定的弧度 弧度=角度*PI/180
ctx.rotate(i*30*Math.PI/180);
//设置绘制线条的起始位置
ctx.moveTo(0,140);
//设置线条的结束位置
ctx.lineTo(0,150);
//绘制路劲
ctx.stroke();
//还原初始的绘图环境
ctx.restore();
ctx.closePath();
}
//绘制刻度(分刻度)
for(var i=0;i<60;i++){
ctx.beginPath();
ctx.lineWidth=3;
//保存当前绘图环境
ctx.save();
//重置绘制的起始位置(将圆心位置重置为0.0)
ctx.translate(250,250);//转换画布的用户坐标系统
//旋转画布到一定的弧度 弧度=角度*PI/180
ctx.rotate(i*6*Math.PI/180);
//设置绘制线条的起始位置
ctx.moveTo(0,140);
//设置线条的结束位置
ctx.lineTo(0,148);
//绘制路劲
ctx.stroke();
//还原初始的绘图环境
ctx.restore();
ctx.closePath();
}
//绘制时针
ctx.beginPath();
ctx.lineWidth=5;
//保存当前绘图环境
ctx.save();
//重置绘制的起始位置(将圆心位置重置为0.0)
ctx.translate(250,250);//转换画布的用户坐标系统
//旋转画布到一定的弧度 弧度=角度*PI/180
ctx.rotate(hours*30*Math.PI/180);
//设置绘制线条的起始位置
ctx.moveTo(0,10);
//设置线条的结束位置
ctx.lineTo(0,-100);
//绘制路劲
ctx.stroke();
//还原初始的绘图环境
ctx.restore();
ctx.closePath();
//绘制分针
ctx.beginPath();
ctx.lineWidth=3;
//保存当前绘图环境
ctx.save();
//重置绘制的起始位置(将圆心位置重置为0.0)
ctx.translate(250,250);//转换画布的用户坐标系统
//旋转画布到一定的弧度 弧度=角度*PI/180
ctx.rotate(minutes*6*Math.PI/180);
//设置绘制线条的起始位置
ctx.moveTo(0,10);
//设置线条的结束位置
ctx.lineTo(0,-120);
//绘制路劲
ctx.stroke();
//还原初始的绘图环境
ctx.restore();
ctx.closePath();
//绘制秒针
ctx.beginPath();
ctx.lineWidth=1;
ctx.strokeStyle='#f00';
//保存当前绘图环境
ctx.save();
//重置绘制的起始位置(将圆心位置重置为0.0)
ctx.translate(250,250);//转换画布的用户坐标系统
//旋转画布到一定的弧度 弧度=角度*PI/180
ctx.rotate(seconds*6*Math.PI/180);
//设置绘制线条的起始位置
ctx.moveTo(0,10);
//设置线条的结束位置
ctx.lineTo(0,-126);
//绘制路劲
ctx.stroke();
//还原初始的绘图环境
ctx.restore();
ctx.closePath();
}
setInterval(draw,1000);
</script>
<div class="cloud-one">
</div>
<div class="cloud-two">
</div>
<div class="cloud-three">
</div>
</div>
</body>
</html>