首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果

Posted in HTML / CSS onApril 26, 2016

使用HTML5的canvas画的孙悟空，CSS3画的白云飘飘。

效果图：

HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果

代码如下：

CSS Code复制内容到剪贴板
  1. <!doctype html>   
  2. <html>   
  3. <head>   
  4. <meta charset="utf-8">   
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">   
  6. <meta name="description" content="">   
  7. <meta name="viewport" content="width=device-width, initial-scale=1">   
  8. <title>HTML5+CSS3实现齐天大圣腾云驾雾</title>   
  9. <style type="text/css">   
  10. * {   
  11. margin: 0;   
  12. padding: 0;   
  13. border: 0;   
  14. }   
  15. html, body {   
  16. margin: 0;   
  17. }   
  18. @-webkit-keyframes STAR-MOVE {   
  19. from {   
  20. background-position: 0% 0%;   
  21. }   
  22. to {   
  23. background-position: 600% 0%;   
  24. }   
  25. }   
  26. @keyframes STAR-MOVE {   
  27. from {   
  28. background-position: 0% 0%;   
  29. }   
  30. to {   
  31. background-position: 600% 0%;   
  32. }   
  33. }   
  34. .wall {   
  35. position: absolute;   
  36. top: 0;   
  37. left: 0;   
  38. bottombottom: 0;   
  39. rightright: 0;   
  40. }   
  41. div#background {   
  42. background: black url('http://hovertree.com/texiao/html5/30/img/background.png') repeat-x 5% 0%;   
  43. background-size: cover;   
  44. -webkit-animation: STAR-MOVE 200s linear infinite;   
  45. -moz-animation: STAR-MOVE 200s linear infinite;   
  46. -ms-animation: STAR-MOVE 200s linear infinite;   
  47. animation: STAR-MOVE 200s linear infinite;   
  48. }   
  49. div#midground {   
  50. background: url('http://hovertree.com/texiao/html5/30/img/midground.png')repeat 20% 0%;   
  51. z-index: 1;   
  52. -webkit-animation: STAR-MOVE 100s linear infinite;   
  53. -moz-animation: STAR-MOVE 100s linear infinite;   
  54. -ms-animation: STAR-MOVE 100s linear infinite;   
  55. animation: STAR-MOVE 100s linear infinite;   
  56. }   
  57. div#foreground {   
  58. background: url('http://hovertree.com/texiao/html5/30/img/foreground.png')repeat 35% 0%;   
  59. z-index: 2;   
  60. -webkit-animation: STAR-MOVE 50s linear infinite;   
  61. -moz-animation: STAR-MOVE 50s linear infinite;   
  62. -ms-animation: STAR-MOVE 50s linear infinite;   
  63. animation: STAR-MOVE 50s linear infinite;   
  64. }#hovertreewk{position:absolute;z-index:9999;top:0px;bottombottom:0px;left:0px;rightright:0px;margin:auto;}   
  65. </style>   
  66. </head>   
  67. <body>   
  68. <div style="text-align:center;position:absolute;z-index:9;color:white"><h1>齐天大圣腾云驾雾</h1></div>   
  69. <div id="background" class="wall"></div>   
  70. <div id="midground" class="wall"></div>   
  71. <div id="foreground" class="wall"></div>   
  72. <canvas width="650" height="478" id="hovertreewk"></canvas>   
  73. <script src="http://hovertree.com/texiao/html5/30/js/hovertreewk.js"></script>   
  74. </body>   
  75. </html>  

关于HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾的代码就给大家介绍完毕，希望对大家有所帮助！

HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
萌新HTML5 入门指南（二）
Nov 09 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 #HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 #HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 #HTML / CSS
HTML5移动端手机网站开发流程
Apr 25 #HTML / CSS
基于html5绘制圆形多角图案
Apr 21 #HTML / CSS
浅析border-radius如何兼容IE
Apr 19 #HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 #HTML / CSS
访问日志(2) UV(1) 进程假死(1) 连接数(1) PV(1) 弱口令(1) jenkins(1) ipv6(1) 线程(1) 内存(1)
You might like
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现从百度API获取天气的方法
2015/03/11 Python
Python3处理文件中每个词的方法
2015/05/22 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
Python configparser模块应用过程解析
2020/08/14 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
《藤野先生》教学反思
2014/02/19 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
工作试用期自我评价
2015/03/10 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
教您：房贷工资收入证明应该怎么写？
2019/08/19 职场文书