ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3 と JS を使用して上昇するブロックの動的な背景を作成する方法

CSS3 と JS を使用して上昇するブロックの動的な背景を作成する方法

php中世界最好的语言
php中世界最好的语言オリジナル
2017-11-25 15:34:192364ブラウズ

CSS3 で多くのクールなアニメーションを作成できることはわかっていますが、CSS3 と JS を組み合わせるとどれほど強力になるでしょうか?今日は CSS と JS を使用して、上昇するブロックの動的な背景を作成する方法を説明します。見てみましょう。

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

すべてのコードはここにあります。興味のある方は自分で実行してください。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。


関連書籍:

HTML のテキストの最後の行が不完全に表示される場合の対処方法

CSS Web ページの位置がずれている場合の対処方法

CSS3 の読み込み効果を作成する方法

以上がCSS3 と JS を使用して上昇するブロックの動的な背景を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。