Home > Article > Web Front-end > How to use CSS3 and JS to create a dynamic background of rising blocks

How to use CSS3 and JS to create a dynamic background of rising blocks

php中世界最好的语言Original: 2017-11-25 15:34:192383browse

We know that CSS3 can make many cool animations, so how powerful would it be if CSS3 and JS were combined? Today I will teach you how to use CSS and JS to create a dynamic background of rising blocks. Let’s take a look.

HTML:

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8">
  <title>Glunefish</title>
  <link rel="stylesheet" href="css/style.css">
 </head>
   <body> 
   <div id="F-dynamicbg-box"> 
    <div> </div> 
    <div></div> 
    <div></div>
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
  </div>
 </body>
</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(&#39;F-dynamicbg-box&#39;), div = box.getElementsByTagName(&#39;div&#39;), math = [0,1];for (var i=0;i<div.length;i++) { math[1] = F_getSJS(100,40,9) F_getSJS 请移步博客之前的取随机数了解if(math[1] != math[2]){ div[i].style.width = math[1] + &#39;px&#39;; div[i].style.height = math[1] + &#39;px&#39;; math[2] = math[1]; } } for(var i=0;i<div.length;i++){ div[i].style.left = F_getSJS(85,15,8) + &#39;vw&#39;; div[i].style.transform = &#39;rotate(&#39; + F_getSJS(360,5,9) + &#39;deg)&#39;; }

All the codes are here. Interested friends can do it themselves. For more exciting content, please pay attention to php Chinese Other related articles online!

How to use CSS3 and JS to create a dynamic background of rising blocks

Related articles