canvas孫悟空腳踩白雲今年是猴年

-Advertisement-

效果查看：http://hovertree.com/texiao/html5/30/ 使用HTML5的canvas畫的孫悟空，CSS3畫的白雲飄飄。剛擒住了幾個妖又降住了幾個魔魑魅魍魎怎麼他就這麼多（嘿嘿！吃俺老孫一棒！）效果圖：代碼如下：轉自：http://hovertree.com/ ...

效果查看：
http://hovertree.com/texiao/html5/30/

使用HTML5的canvas畫的孫悟空，CSS3畫的白雲飄飄。

剛擒住了幾個妖

又降住了幾個魔

魑魅魍魎怎麼他就這麼多

（嘿嘿！吃俺老孫一棒！）

效果圖：

代碼如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>canvas孫悟空腳踩白雲今年是猴年 - 何問起</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}

html, body {
margin: 0;
}

@-webkit-keyframes STAR-MOVE {
from {
background-position: 0% 0%;
}

to {
background-position: 600% 0%;
}
}

@keyframes STAR-MOVE {
from {
background-position: 0% 0%;
}

to {
background-position: 600% 0%;
}
}

.wall {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

div#background {
background: black url('http://hovertree.com/texiao/html5/30/img/background.png') repeat-x 5% 0%;
background-size: cover;
-webkit-animation: STAR-MOVE 200s linear infinite;
-moz-animation: STAR-MOVE 200s linear infinite;
-ms-animation: STAR-MOVE 200s linear infinite;
animation: STAR-MOVE 200s linear infinite;
}

div#midground {
background: url('http://hovertree.com/texiao/html5/30/img/midground.png')repeat 20% 0%;
z-index: 1;
-webkit-animation: STAR-MOVE 100s linear infinite;
-moz-animation: STAR-MOVE 100s linear infinite;
-ms-animation: STAR-MOVE 100s linear infinite;
animation: STAR-MOVE 100s linear infinite;
}

div#foreground {
background: url('http://hovertree.com/texiao/html5/30/img/foreground.png')repeat 35% 0%;
z-index: 2;
-webkit-animation: STAR-MOVE 50s linear infinite;
-moz-animation: STAR-MOVE 50s linear infinite;
-ms-animation: STAR-MOVE 50s linear infinite;
animation: STAR-MOVE 50s linear infinite;
}#hovertreewk{position:absolute;z-index:9999;top:0px;bottom:0px;left:0px;right:0px;margin:auto;}
</style>
</head>
<body>
<div style="text-align:center;position:absolute;z-index:9;color:white"><h1>canvas孫悟空腳踩白雲今年是猴年</h1></div>
<div id="background" class="wall"></div>
<div id="midground" class="wall"></div>
<div id="foreground" class="wall"></div>
<canvas width="650" height="478" id="hovertreewk"></canvas>
<script src="http://hovertree.com/texiao/html5/30/js/hovertreewk.js"></script>
</body>
</html>

轉自：http://hovertree.com/h/bjaf/e1r8s4va.htm

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

h5上傳圖片及預覽

第一次做圖片上傳，記錄一些問題。 1，圖片的base64編碼就是可以將一副圖片數據編碼成一串字元串，使用該字元串代替圖像地址。而網頁上的每一個圖片，都是需要消耗一個http請求下載而來的，使用base64就不用請求http。 2，上傳圖片： 3，圖片轉base64（readAsDataURL方法用於 ...
JavaScript學習筆記 -- sort()的用法

關於排序問題，第一次看教程/書的時候都是迷迷糊糊的感覺，看完就忘記了。等到看第二遍的時候，才發現自己其實沒有掌握該知識點，其實這些在網上都能搜到，但是只有自己親自整理才會有比較深刻的印象。前面還有許多問題沒有寫在博客上，以後視情況添加。關於JS的sort()方法和reverse()方法是可以直接用 ...
詳解Bootstrap按鈕組件

按鈕組也是一個獨立的組件，所以可以找到相應的源碼文件： Less：buttons.less Sass:_buttons.scss Css:Bootstrap.css 3131行~3291行按鈕組和下拉菜單組件一樣，需要依賴於button.js插件才能正常運作。結構方面：使用一個類名為btn-gr ...
新增的querySelector、querySelectorAll測試

從IE9開始DOM開始支持支持CSS的選擇器了，DOM提供了兩個介面 querySelector 得到一個DOM querySelectorAll 得到一組DOM 一個個的解釋這些選擇器也沒有必要，我們結合前面的數組知識，寫一段代碼來說明。頁面上有一組元素，然後會依據我們數組中的預訂選擇值選擇相應元 ...
工欲善其事必先利其器——web調試工具firebug

一、Firebug工具簡介 firebug是firefox下的一款開發類插件。firebug集html查看和編輯，JavaScript控制台，網路狀況監視器於一體，是開發JavaScript，css，html和ajax的得力助手。 YSlow是插件。二、Firebug應用 1、禁用標簽下拉菜單啟 ...
javascript 不響應可能是引用外部javascript時，引用順序不對。

有相互引用關係的js,要最後執行的方法所在的js 先被引用。 a.js 中有function1 b.js 中有function2 function1 （） { function2（）{} } 要 <script src="b.js"></script> <script src="a.js"></sc ...
javascript面向對象編程筆記

對象：一切事物皆是對象。對象是一個整體，對外提供一些操作。比如說一個收音機是一個對象，我們不需要知道它的內部結構是什麼，只需要會使用外部的按鈕就可以使用收音機。面向對象：面向對象語言的標誌是他們都有類的概念，通過類可以創建任意多個具有相同屬性的方法的對象。任何對象都是某一類事物的實例，簡單的說就是 ...
移動web開發總結

讓網頁的寬度自適應屏幕<meta name="viewport" content="width=device-width"/> 1）html上加入<meta name="viewport" content=" initial-scale=1.0,user-scalable=no" /> 發確保網頁的 ...