首页 > 代码库 > 【CSS3 + 原生JS】上升的方块动态背景
【CSS3 + 原生JS】上升的方块动态背景
GIF图有点大，网速慢的或将稍等片刻或可浏览本人的制作的demo。
Demo : 点击查看
HTML:
<!DOCTYPE html><html lang="en"><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]; var width = document.documentElement.clientWidth || document.body.clientWidth; var height = document.documentElement.clientHeight || document.body.clientHeight; 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)‘; }
【CSS3 + 原生JS】上升的方块动态背景
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。