首頁 > 開發者 > CSS

怎樣用CSS3和JS做出上升的方塊動態背景

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
我們知道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('F-dynamicbg-box'), div = box.getElementsByTagName('div'), 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] + 'px'; div[i].style.height = math[1] + 'px'; math[2] = math[1]; } } for(var i=0;i<div.length;i++){ div[i].style.left = F_getSJS(85,15,8) + 'vw'; div[i].style.transform = 'rotate(' + F_getSJS(360,5,9) + 'deg)'; }

所有的代碼都在這裡了，感興趣的朋友可以自己動手操作一下，，更多精彩請關注php中文網其它相關文章！


相關閱讀：

HTML裡的最後一行文字顯示不全怎麼處理

CSS網頁錯位怎麼處理

CSS3的loading特效怎麼製作

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css3 pdf css3 transition css3 text animation effects css3 missing manual css3 background image css3 animated buttons html5 css3 templates dreamweaver
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More