首页
所有分类
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实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 HTML / CSS
html5调用app分享功能示例（WebViewJavascriptBridge）
Mar 21 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 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
面向接口(1) NFS(1) SeaTunnel(1) ElementTree(1) ftpserver(1) BeautifulSoup4(2) Odoo(1) tfx(1) tkFileDialog(1) OpenAI baselines(1)
You might like
深入理解PHP中的Streams工具
2015/07/03 PHP
通过js获取div的background-image属性
2013/10/15 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
四种参数传递的形式——URL，超链接，js，form表单
2015/07/24 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
vue中v-model的应用及使用详解
2018/06/27 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么
2014/06/20 DOTA
在Python中使用成员运算符的示例
2015/05/13 Python
Python标准库之itertools库的使用方法
2017/09/07 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
python队列Queue的详解
2019/05/10 Python
python tkinter窗口最大化的实现
2019/07/15 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
8种常用的Python工具
2020/08/05 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
VELTRA台湾：世界自由行专家
2017/08/15 全球购物
澳大利亚在线奢侈品时尚零售平台：Azura Runway
2021/01/13 全球购物
汽车装潢店创业计划书范文
2014/02/05 职场文书
护士长竞聘书
2014/03/31 职场文书
销售开票员岗位职责
2015/04/15 职场文书
有关西游记的读书笔记
2015/06/25 职场文书