怎样用CSS3和JS做出上升的方块动态背景

我们知道css3是可以做出很多酷炫的动画的，那么如果css3和js结合起来使用那该有多么强大呢？今天教大家怎样用css和js制作出上升的方块的动态背景，一起来看一下。

HTML:

CSS:

* { margin: 0; padding: 0; border: none; outline: 0; }
 body{ width: 100vw; height: 100vh; background: url(img/bg.png) no-repeat; background-size: cover; }
 #F-dynamicbg-box { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; overflow: hidden; }
 #F-dynamicbg-box > div { z-index: -9999; background-color: rgba(255,255,255,.1); position: absolute; top: 105vh; animation: dynamicDiv 30s linear infinite; } 
#F-dynamicbg-box > div:nth-of-type(1) { animation-delay: 1s }
 #F-dynamicbg-box > div:nth-of-type(2) { animation-delay: 3s }
 #F-dynamicbg-box > div:nth-of-type(3) { animation-delay: 6s } 
#F-dynamicbg-box > div:nth-of-type(4) { animation-delay: 9s }
 #F-dynamicbg-box > div:nth-of-type(5) { animation-delay: 12s } 
#F-dynamicbg-box > div:nth-of-type(6) { animation-delay: 4s } 
#F-dynamicbg-box > div:nth-of-type(7) { animation-delay: 15s } 
#F-dynamicbg-box > div:nth-of-type(8) { animation-delay: 18s }
 #F-dynamicbg-box > div:nth-of-type(9) { animation-delay: 20s }
 #F-dynamicbg-box > div:nth-of-type(10) { animation-delay: 16s }
 @keyframes dynamicDiv { form { top: 105vh; transform: scale(1.2); } 
to { top: -13vh; transform: scale(1) rotate(60deg); } }
JS:( JS初始化div形态 )
var box = document.getElementById('F-dynamicbg-box'), div = box.getElementsByTagName('div'), math = [0,1];for (var i=0;i
所有的代码都在这里了，感兴趣的朋友可以自己动手操作一下，，更多精彩请关注php中文网其它相关文章！
相关阅读：
立即学习“前端免费学习笔记（深入）”；

							

								
								

									Quinvio AI
									
AI辅助下快速创建视频，虚拟代言人
								
								下载 
							
						
HTML里的最后一行文字显示不全怎么处理
CSS网页错位怎么处理
CSS3的loading特效怎么制作