怎樣用CSS3和JS做出上升的方塊動態背景
- php中世界最好的语言原創
- 2017-11-25 15:34:192390瀏覽
我們知道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中文網其它相關文章！
相關閱讀：
以上是怎樣用CSS3和JS做出上升的方塊動態背景的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn