首页
所有分类
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 3D位移translate效果实例介绍
May 03 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
什么是css原子化，有什么用？
Apr 24 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
公证书(45) 聘任书(31) 担保书(46) 广告词(105) 意向书(73) 承诺书(369) 竞聘书(31) 委托书(259) 检举信(8) 主持词(345)
You might like
如何把PHP转成EXE文件
2006/10/09 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
jQuery功能函数详解
2015/02/01 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
AngularJS 单元测试（二）详解
2016/09/21 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
详解Vue 换肤方案验证
2019/08/28 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
python实现字符串加密成纯数字
2019/03/19 Python
python分数表示方式和写法
2019/06/26 Python
Python通过Pillow实现图片对比
2020/04/29 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
django rest framework 过滤时间操作
2020/07/12 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
Java如何获得ResultSet的总行数
2016/09/03 面试题
护士求职推荐信范文
2013/11/23 职场文书
大学生就业意向书范文
2014/04/01 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
写给同事的离职感言
2015/08/04 职场文书