So erstellen Sie mit CSS3 und JS einen dynamischen Hintergrund aus aufsteigenden Blöcken-CSS-Tutorial-php.cn

So erstellen Sie mit CSS3 und JS einen dynamischen Hintergrund aus aufsteigenden Blöcken

php中世界最好的语言

Freigeben： 2017-11-25 15:34:19

Original

2391 Leute haben es durchsucht

Wir wissen, dass CSS3 viele coole Animationen erstellen kann. Wie leistungsstark wäre es also, wenn CSS3 und JS kombiniert würden? Heute werde ich Ihnen beibringen, wie Sie mit CSS und JS einen dynamischen Hintergrund aus aufsteigenden Blöcken erstellen.

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>

Nach dem Login kopieren

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;; }

Nach dem Login kopieren

Alle Codes sind hier, interessierte Freunde können es selbst machen, und noch aufregender. Bitte achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

Wie man mit der unvollständigen Anzeige der letzten Textzeile in HTML umgeht

CSS, wie man mit der Fehlausrichtung von Webseiten umgeht

So erstellen Sie CSS3-Ladeeffekte

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit CSS3 und JS einen dynamischen Hintergrund aus aufsteigenden Blöcken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!