关键词：
html5 canvas首屏自适应背景动画循环效果的插入方法：1、demo.html代码如下：
<html lang="en" class="no-js"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>html5 canvas首屏自适应背景动画循环效果代码</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/component.css">
<!--[if IE]>
<script src="js/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container demo-1">
<div class="content">
<div id="large-header" class="large-header" style="height: 185px;">
<canvas id="demo-canvas" width="1304" height="185"></canvas>
<h1 class="main-title">Connect <span class="thin">Three</span></h1>
</div>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Demo 1</a>
</nav>
</div>
</div><!-- /container -->
<script src="js/TweenLite.min.js"></script>
<script src="js/EasePack.min.js"></script>
<script src="js/rAF.js"></script>
<script src="js/demo-1.js"></script>
<div class="sogoutip" style="z-index: 2147483645; visibility: hidden; display: none;"></div><div class="sogoubottom" id="sougou_bottom" style="display: none;"></div><div id="ext_stophi" style="z-index: 2147483647;"><div class="extnoticebg"></div><div class="extnotice"><h2>关闭提示 <a href="#" title="关闭提示" id="closenotice" class="closenotice">关闭</a></h2><p id="sogouconfirmtxt"></p> <a id="sogouconfirm" href="#" class="extconfirm">确 认</a> <a id="sogoucancel" href="#" class="extconfirm">取 消</a></div></div><div id="ext_overlay" class="ext_overlayBG" style="display: none; z-index: 2147483646;"></div><iframe class="sogou_sugg_feedbackquan" frameborder="0" scrolling="no" src="http://ht.www.sogou.com/websearch/features/yun6.jsp?pid=sogou-brse-d2a452edff079ca6&w=1366&v=7400&st=1465483516429&od=6612&ls=1465482970132&lc=&lk=1463925952631&sd=72&cd=0&kd=0&u=1450532590172818&y=EC8B5B0919EDD514D2F1263AA4A58EF6&query=html5%20canvas%E9%A6%96%E5%B1%8F%E8%87%AA%E9%80%82%E5%BA%94%E8%83%8C%E6%99%AF%E5%8A%A8%E7%94%BB%E5%BE%AA%E7%8E%AF%E6%95%88%E6%9E%9C%E4%BB%A3%E7%A0%81|http%3A%2F%2Fwww.777moban.com%2FPreview%2F35_196%2Findex.html&r=http%3A%2F%2Fwww.777moban.com%2FPreview%2F35_196%2Findex2.html" style="border: none; display: none; z-index: 2147483645; background: transparent;"></iframe><script src="http://pb.sogou.com/pv.gif?hintbl=-1&uigs_productid=webext&type=ext_sugg&uigs_t=1465483517392<=212&ie=0&v=7400&y=EC8B5B0919EDD514D2F1263AA4A58EF6&query=html5%20canvas%E9%A6%96%E5%B1%8F%E8%87%AA%E9%80%82%E5%BA%94%E8%83%8C%E6%99%AF%E5%8A%A8%E7%94%BB%E5%BE%AA%E7%8E%AF%E6%95%88%E6%9E%9C%E4%BB%A3%E7%A0%81|http%3A%2F%2Fwww.777moban.com%2FPreview%2F35_196%2Findex.html"></script>
</body>
</html>
2、css样式如下：
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summarydisplay:block;audio,canvas,videodisplay:inline-block;audio:not([controls])display:none;height:0;[hidden]display:none;htmlfont-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;bodymargin:0;a:focusoutline:thin dotted;a:active,a:hoveroutline:0;h1font-size:2em;margin:0.67em 0;abbr[title]border-bottom:1px dotted;b,strongfont-weight:bold;dfnfont-style:italic;hr-moz-box-sizing:content-box;box-sizing:content-box;height:0;markbackground:#ff0;color:#000;code,kbd,pre,sampfont-family:monospace,serif;font-size:1em;prewhite-space:pre-wrap;qquotes:"\201C" "\201D" "\2018" "\2019";smallfont-size:80%;sub,supfont-size:75%;line-height:0;position:relative;vertical-align:baseline;suptop:-0.5em;subbottom:-0.25em;imgborder:0;svg:not(:root)overflow:hidden;figuremargin:0;fieldsetborder:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;legendborder:0;padding:0;button,input,select,textareafont-family:inherit;font-size:100%;margin:0;button,inputline-height:normal;button,selecttext-transform:none;button,html input[type="button"],input[type="reset"],input[type="submit"]-webkit-appearance:button;cursor:pointer;button[disabled],html input[disabled]cursor:default;input[type="checkbox"],input[type="radio"]box-sizing:border-box;padding:0;input[type="search"]-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration-webkit-appearance:none;button::-moz-focus-inner,input::-moz-focus-innerborder:0;padding:0;textareaoverflow:auto;vertical-align:top;tableborder-collapse:collapse;border-spacing:0; 参考技术A
以demo为例
<!--必要样式--><link rel="stylesheet" type="text/css" href="css/component.css" />
<!--[if IE]>
<script src="js/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container demo-4">
<div class="content">
<div id="large-header" class="large-header">
<canvas id="demo-canvas"></canvas>
<h1 class="main-title">Morning Light</span></h1>
</div>
<nav class="codrops-demos">
<a href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a class="current-demo" href="index4.html">Demo 4</a>
</nav>
</div>
</div><!-- /container -->
<script src="js/rAF.js"></script>
<script src="js/demo-4.js"></script>
只要有必要的CSS样式文件 和相应的div再有JS文件就可以了
123456789101112131415161718192021222324<!--必要样式--><link rel="stylesheet" type="text/css" href="css/component.css" /> <!--[if IE]> <script src="js/html5.js"></script><![endif]--></head><body><div class="container demo-4"> <div class="content"> <div id="large-header" class="large-header"> <canvas id="demo-canvas"></canvas> <h1 class="main-title">Morning Light</span></h1> </div> <nav class="codrops-demos"> <a href="index.html">Demo 1</a> <a href="index2.html">Demo 2</a> <a href="index3.html">Demo 3</a> <a class="current-demo" href="index4.html">Demo 4</a> </nav> </div></div><!-- /container --><script src="js/rAF.js"></script><script src="js/demo-4.js"></script>
只要有必要的CSS样式文件 和相应的div再有JS文件就可以了 参考技术C 可不可以具体点？
背景图片全屏自适应关键css代码
html,body{ width:100%; height:100%;}body{ /*background-repeat:no-repeat;*/ background-size:100%100%;} 这个非常关键，不知道网上为什么完全搜不到，就好像没有这个知识点，搜到的都是些瞎扯淡的东西。我一开始不知道很烦恼，原来要设置html和bod... 查看详情
背景图片居中全屏自适应显示
.bg{background-size:cover;background-image:url(../assets/images/sunshine.png);background-repeat:no-repeat;background-position:center;background-attachment:fixed;} 查看详情
使用html5canvas创建动态粒子网格动画
最近看到一个粒子网格动画挺炫的，自己也就做了一个，当背景挺不错的。CSDN不能上传超过2M的图片，所以就简单截了一个静态图片：可以点击这里查看动画.下面就开始说怎么实现这个效果吧：首先当然是添加一个canvas了：<c... 查看详情
[js高手之路]html5canvas动画教程-下雪效果
利用canvas，实现一个下雪的效果，我们先预览下效果： //我们先分析下这个效果：1，随机产生雪花2，雪花的产生不是同时产生，而是有先后顺序的3，雪花怎么表示4，怎么源源不断的下雪5，雪花有大有小搞清楚上面几... 查看详情
基于html5canvas实现的文字动画特效
前言文字是网页中最基本的元素，一般我们在网页上都是展示的静态文字，但是就效果来说，还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用，如果有某些关键的文字，可以通过这种动态的效果来提醒用户阅读。动... 查看详情
七款炫酷的页面特效
1、HTML5Canvas粒子模拟效果这是一款利用HTML5 Canvas模拟出来的30000个粒子动画，当你用鼠标在canvas画布上移动时，鼠标周围的一些粒子就会跟着你移动，并形成一定的图案，就像你在玩沙画一样，效果非常不错。这里，我们应... 查看详情
修改安卓首屏画面与加载动画
参考技术A1.替换首屏LOGO找到logo分区dd复制出来LOGO分区是一个[头+JFIF]图像组合的图片先提取头我这个设备是偏移0x2000保存然后制作一张图片转成JFIF格式把刚才的头与这个进行合成另外把多余的空白字节补上，就是总大小一致。2.... 查看详情
前端特效demo|值得收藏的6个html5canvas实用案例
...相关的动画特效制作视频，这次给大家带来6款超炫酷的HTML5canvas动画的demo，一起来看看吧~ 文内附有时钟效果代码demo下载地址，感兴趣的小伙伴们可以收藏一下。1超绚丽的HTML5地图分布动画 这是一款基于HTML5的地图应用... 查看详情
常用一屏自适应布局(代码片段)
在web开发的时候，有时候会遇见一些自适应布局，而且是一屏内自适应，特别是写一些后台管理系统界面，都是一屏显示，而且显示内容布局有固定的，也有不固定的，如果用css3的弹性盒子来解决的话，... 查看详情
html5canvas核心技术图形动画与游戏开发学习总结
save和restore函数的应用 保存canvas和恢复canvas clip函数的应用 文字的绘制 背景图片的绘制 离屏canvas 基于时间的运动 查看详情
c#winform技巧十:winfrom全屏自适应屏幕分辨率
Rectanglerect=newRectangle();rect=Screen.GetWorkingArea(this);this.Width=rect.Width;//屏幕宽this.Height=rect.Height;//屏幕高this.ControlBox=false;//设置不出现关闭按钮this.FormBorderStyle=FormBorderStyle.None;//无边框 查看详情
jquery-自适应全屏背景轮播动画
实时自适应浏览器窗口大小的全屏背景轮播动画1<!DOCTYPEhtml>2<html>3<head>4<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5<title></title>6<metacharset="utf-8"/>7&l 查看详情
html5canvas绘制雪花飘落动画（需求分析知识点程序编写分布详解）
看到网上很多展示html5雪花飞动的效果，确实非常引人入胜，我相信大家也跟我一样看着心动的同时，也很好奇，想研究下代码如何实现；虽然哦很多地方也能下载这些源码，不过也不知道别人制作此类动画时的思路及难点分析... 查看详情
动画背景颜色，脉冲效果
】动画背景颜色，脉冲效果【英文标题】：Animatingbackgroundcolor,pulseeffect【发布时间】：2015-03-2017:07:15【问题描述】：我制作了一个脚本，用于在将鼠标悬停在其中的a元素上后为菜单li元素设置动画。一切正常，但我想要别的东西... 查看详情
html5canvas元素有啥用
参考技术A这个主要用来做游戏动画，现在的h5游戏，基本是用canvas开发出来的。可以代替原来的flash做的动画效果 查看详情
canvas动画循环
...圆周运动通过三角函数改变球的x，y的值有时候我们需要背景视图滚动的效果，例如微信的打飞机我们绘制图片一定要预加载最后效果： 查看详情
css3圆圈动画放大缩小循环动画效果
代码如下：<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>CSS3圆圈动画放大缩小循环动画效果</title><style>.dot{margin:150pxauto; 查看详情
我怎样才能避免这个css3背景循环跳转？
】我怎样才能避免这个css3背景循环跳转？【英文标题】：howcanIavoidthiscss3backgroundloopjump?【发布时间】：2012-08-0905:30:31【问题描述】：我最近一直在尝试一些css3。我正在尝试做的是让背景图像向左滑动并无缝重复以提供无限背景... 查看详情