HTML5：可用來做自定義片頭的動畫效果,地理定位,時(shí)鐘,拖放,彩虹,畫布上面寫字,飄雪
前言：本期的內(nèi)容非常精彩，HTML5的動畫有時(shí)甚至可以媲美AE創(chuàng)作出來的動畫。我會用AE創(chuàng)作一些炫酷的片頭，但有時(shí)會用HTML5自定義地創(chuàng)作片頭動畫。喜歡的話，別忘了給up主的這篇專欄點(diǎn)個(gè)贊哦！
本期專欄內(nèi)容概覽：
H5拖放.html?
彩虹.html
地理定位.html
可以用來做自定義片頭的動畫效果.html
畫布上面寫字.html?
飄雪.html
時(shí)鐘.html
H5拖放.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#cart {
width: 200px;
height: 200px;
padding: 10px;
border: 10px solid #aaaaaa;
position: absolute;
left: 400px;
top: 300px;
}
</style>
<script>
function dg(e){
//將拖動的元素的id傳遞后面的事件函數(shù)中
//e.target指的是img標(biāo)簽
e.dataTransfer.setData("eid",e.target.id);
//e.dataTransfer.setData("msg","hello world");
}
function dro(e){
//獲取被拖動的元素的id
//var id = e.dataTransfer.getData("eid");
//阻止元素的默認(rèn)行為
e.preventDefault();
}
function drop(e){
e.preventDefault();
//獲取被拖動的元素的id
var id = e.dataTransfer.getData("eid");
//進(jìn)行dom操作
//e.target指的就是div
e.target.appendChild(document.getElementById(id));
//alert(e.dataTransfer.getData("msg"));
}
</script>
</head>
<body>
<img id="myImg" src="img/14.png" draggable="true" width="128"
height="128" ondragstart="dg(event);"/>
? ? <div id="cart" ondragover="dro(event);"
? ? ondrop="drop(event);"></div>
</body>
</html>
H5拖放.html END
彩虹.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var cv = document.getElementById('ctx');
var dw = cv.getContext('2d');
var colorArr = [
? ? 'red',
? ? 'orange',
? ? 'yellow',
? ? 'green',
? ? 'cyan',
? ? 'blue',
? ? 'violet'
];
var r = 320;
for(var i = 0;i < colorArr.length;i ++) {
? ? dw.beginPath();
dw.strokeStyle = colorArr[i];
dw.lineWidth = 10;
dw.arc(350,350,r,Math.PI * 7.0 / 6.0,Math.PI * 11.0 / 6.0);
dw.stroke();
r -= 10;
? ? dw.closePath();
}
}
</script>
</head>
<body>
<canvas id="ctx" width="800" height="500"></canvas>
</body>
</html>
彩虹.html END
地理定位.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
? ? body, html,#allmap {
? ? width: 100%;
? ? height: 100%;
? ? overflow: hidden;
? ? margin:0;
? ? font-family:"微軟雅黑";
? ? }
</style>
<script type="text/javascript" srcc="http://api.map.baidu.com/api?v=2.0&ak=NhDTGeni3RxqCA3mQPTfDpb1"></script>
<script>
//檢測是否支持地理定位
function getLocation(){
if(navigator.geolocation) {
//獲取當(dāng)前的地理位置
navigator.geolocation.getCurrentPosition(function(pos){
alert('你當(dāng)前的地理位置，緯度：' + pos.coords.latitude +
? ? '，經(jīng)度：' + pos.coords.longitude);
// 百度地圖API功能
var map = new BMap.Map("allmap");? ? // 創(chuàng)建Map實(shí)例
map.centerAndZoom(new BMap.Point(pos.coords.longitude,pos.coords.latitude), 15);? // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級別
map.addControl(new BMap.MapTypeControl());? ?//添加地圖類型控件
//map.setCurrentCity("長沙");? ? ? ? ? // 設(shè)置地圖顯示的城市
map.enableScrollWheelZoom(true);
})
} else {
alert('你的瀏覽器不支持地理定位！');
}
}
getLocation();
</script>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
推薦：
https://www.cnblogs.com/beileixinqing/p/7988770.html
<!DOCTYPE html>
<html>?
<head>?
? ? <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">?
? ? <title>前端定位模塊</title>?
? ? <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? border: 0;
? ? ? ? }
? ? ? ? body {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? text-align: center;
? ? ? ? }
? ? ? ? #pos-area {
? ? ? ? ? ? background-color: #009DDC;
? ? ? ? ? ? margin-bottom: 10px;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? overflow: scroll;
? ? ? ? ? ? text-align: left;
? ? ? ? ? ? color: white;
? ? ? ? }
? ? ? ? #demo {
? ? ? ? ? ? padding: 8px;
? ? ? ? ? ? font-size: small;
? ? ? ? }
? ? ? ? #btn-area {
? ? ? ? ? ? height: 100px;
? ? ? ? }
? ? ? ? button {
? ? ? ? ? ? margin-bottom: 10px;
? ? ? ? ? ? padding: 12px 8px;
? ? ? ? ? ? width: 42%;
? ? ? ? ? ? border-radius: 8px;
? ? ? ? ? ? background-color: #009DDC;
? ? ? ? ? ? color: white;
? ? ? ? }
? ? </style>
? ? <script type="text/javascript" srcc="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
</head>
<body>
? ? <div id="pos-area">
? ? ? ? <p id="demo">點(diǎn)擊下面的按鈕，獲得對應(yīng)信息：<br /></p>
? ? </div>
?
? ? <div id="btn-area">
? ? ? ? <button onClick="geolocation.getLocation(showPosition, showErr, options)">獲取精確定位信息</button>
? ? ? ? <button onClick="geolocation.getIpLocation(showPosition, showErr)">獲取粗糙定位信息</button>
? ? ? ? <button onClick="showWatchPosition()">開始監(jiān)聽位置</button>
? ? ? ? <button onClick="showClearWatch()">停止監(jiān)聽位置</button>
? ? </div>
? ? <script type="text/JavaScript">
? ? ? ? var geolocation = new qq.maps.Geolocation("OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77", "myapp");
?
? ? ? ? document.getElementById("pos-area").style.height = (document.body.clientHeight - 110) + 'px';
?
? ? ? ? var positionNum = 0;
? ? ? ? var options = {timeout: 8000};
? ? ? ? function showPosition(position) {
? ? ? ? ? ? positionNum ++;
? ? ? ? ? ? document.getElementById("demo").innerHTML += "序號：" + positionNum;
? ? ? ? ? ? document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = JSON.stringify(position, null, 4);
? ? ? ? ? ? document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
? ? ? ? };
?
? ? ? ? function showErr() {
? ? ? ? ? ? positionNum ++;
? ? ? ? ? ? document.getElementById("demo").innerHTML += "序號：" + positionNum;
? ? ? ? ? ? document.getElementById("demo").appendChild(document.createElement('p')).innerHTML = "定位失??！";
? ? ? ? ? ? document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
? ? ? ? };
?
? ? ? ? function showWatchPosition() {
? ? ? ? ? ? document.getElementById("demo").innerHTML += "開始監(jiān)聽位置！<br /><br />";
? ? ? ? ? ? geolocation.watchPosition(showPosition);
? ? ? ? ? ? document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
? ? ? ? };
?
? ? ? ? function showClearWatch() {
? ? ? ? ? ? geolocation.clearWatch();
? ? ? ? ? ? document.getElementById("demo").innerHTML += "停止監(jiān)聽位置！<br /><br />";
? ? ? ? ? ? document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
? ? ? ? };
? ? </script>
</body>
</html>
地理定位.html END
可以用來做自定義片頭的動畫效果.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p {
height: 30px;
font-size: 30px;
position: absolute;
animation: move 5s infinite;
}
@keyframes move{
0%{
left: 0px;
top: 0px;
color: black;
}
25%{
left: 500px;
top: 0px;
color: red;
transform: skew(-45deg);
}
50%{
left: 500px;
top: 200px;
color: blue;
}
75%{
left: 300px;
top: 200px;
color: pink;
transform: rotateY(1440deg);
}
100%{
left: 400px;
top: 300px;
color: orange;
}
}
</style>
</head>
<body>
<p>詩書畫唱</p>
</body>
</html>
可以用來做自定義片頭的動畫效果.html END
畫布上面寫字.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#myCanvas {
display:block;
margin:0 auto;
border:1px solid #aaa;
}
</style>
<script>
window.onload = function(){
//獲取canvas元素
var cav = document.getElementById('myCanvas');
//獲取畫布的內(nèi)容面板
var ctx = cav.getContext('2d');
//設(shè)置canvas的高度和寬度
var w = 500;
var h = 500;
cav.width = w;
cav.height = h;
//畫外面的口字
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.lineWidth = 8;
ctx.moveTo(0,0);
ctx.lineTo(w,0);
ctx.lineTo(w,h);
ctx.lineTo(0,h);
ctx.lineTo(0,0);
ctx.stroke();
ctx.closePath();
//畫里面的米字
ctx.beginPath();
ctx.lineWidth = 1;
ctx.moveTo(0,0);
ctx.lineTo(w,h);
ctx.moveTo(w,0);
ctx.lineTo(0,h);
ctx.moveTo(w / 2,0);
ctx.lineTo(w / 2,h);
ctx.moveTo(0,h / 2);
ctx.lineTo(w,h / 2);
ctx.stroke();
ctx.closePath();
//按下鼠標(biāo)不動移動鼠標(biāo)就可以寫字
//定義一個(gè)全局變量存放鼠標(biāo)的坐標(biāo)
var los = {x:0,y:0};
var flag = false;//只有當(dāng)flag為true時(shí)才觸發(fā)移動事件中的代碼
//按下鼠標(biāo)時(shí)
cav.onmousedown = function(e){
e.preventDefault();
//獲取到鼠標(biāo)當(dāng)前的位置
var x = e.offsetX;
var y = e.offsetY;
los.x = x;
los.y = y;
flag = true;
}
//移動鼠標(biāo)時(shí)
cav.onmousemove = function(e){
e.preventDefault();
if(flag) {
//獲取鼠標(biāo)移動到了哪個(gè)地方
var loc = {
x:e.offsetX,
y:e.offsetY
};
//在los和loc之間畫一條線
ctx.beginPath();
ctx.moveTo(los.x,los.y);
ctx.lineTo(loc.x,loc.y);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.stroke();
ctx.closePath();
//移動的終點(diǎn)就變成起點(diǎn)了
los = loc;
}
}
//松開鼠標(biāo)時(shí)
cav.onmouseup = function(e){
e.preventDefault();
flag = false;
}
}
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
畫布上面寫字.html END
飄雪.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var cv = document.getElementById('cv');
//獲取畫布紙
var ctx = cv.getContext("2d");
//設(shè)置畫布跟屏幕的高度和寬度一致
var w = window.innerWidth - 30;
var h = window.innerHeight - 30;
cv.width = w;
cv.height = h;
//屏幕上的雪花的總數(shù)
var count = 500;
//雪花對象數(shù)組
var arr = [];
//在畫布上繪制雪花
for(var i = 0;i < count;i ++) {
//隨機(jī)生成雪花圓心的坐標(biāo)和雪花的半徑
//Math.random()會隨機(jī)產(chǎn)生一個(gè)0到1之間的數(shù)字
var snow = {
x: Math.random() * w,
y: Math.random() * h,
r: Math.random() * 20 + 1
};
//將生成的雪花對象放到數(shù)組中去
arr.push(snow);
}
//繪制雪花的方法
function drawSnow(){
//清除畫布上的所有的雪花
ctx.clearRect(0,0,w,h);
//設(shè)置雪花的填充顏色
ctx.fillStyle = 'white';
//開始繪制
ctx.beginPath();
for(var i = 0;i < count;i ++) {
//取出每個(gè)雪花對象
var snow = arr[i];
//繪制這片雪花
//畫筆移動到圓心的位置
ctx.moveTo(snow.x,snow.y);
ctx.arc(snow.x,snow.y,snow.r,0,2 * Math.PI,false);
}
//填充白色
ctx.fill();
//避免一筆畫
ctx.closePath();
//讓雪花飄落
fall();
}
//讓雪花飄落的方法
function fall(){
//讓雪花飄動其實(shí)就是改變圓心的坐標(biāo)
for(var i = 0;i < count;i ++) {
var snow = arr[i];
//圓心的坐標(biāo)隨機(jī)的移動1到10個(gè)像素
snow.x += Math.random() * 10 + 1;
//如果雪花的坐標(biāo)超過屏幕的高度或者寬度
if(snow.x > w) {
snow.x = 0;
}
snow.y += Math.random() * 10 + 1;
if(snow.y > h) {
snow.y = 0;
}
}
}
setInterval(drawSnow,100);
}
</script>
</head>
<body>
? ? ? ? <canvas id="cv" style="border: 1px solid black;background-color: black;"></canvas>
</body>
</html>
飄雪.html END
時(shí)鐘.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
background-color: #cfcfcf;
}
#clock {
width: 196px;
height: 196px;
border-radius: 50%;
border: 13px dashed #fff;
margin: 200px auto;
position: relative;
}
#circle {
width: 0.1px;
height: 0.1px;
border: 10px solid rosybrown;
border-radius: 50%;
margin: 82px auto;
position: relative;
}
#circle::after,#circle::before{
position: absolute;
content: "";
}
#circle::after {/*秒針*/
width: 80px;
height: 5px;
transform-origin: left;
background-color: yellow;
animation: miaozhen 1s linear infinite;
}
#circle::before {/*分針*/
width: 60px;
height: 5px;
transform-origin: left;
background-color: red;
animation: fenzhen 60s linear infinite;
}
/*定義分鐘的動畫效果*/
@keyframes fenzhen{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
/*定義秒針的效果*/
@keyframes miaozhen{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="clock">
<div id="circle"></div>
</div>
</body>
</html>
時(shí)鐘.html END
