Maison > Article > interface Web > Comment utiliser CSS3 et JS pour créer un arrière-plan dynamique de blocs montants
Comment utiliser CSS3 et JS pour créer un arrière-plan dynamique de blocs montants
- php中世界最好的语言original
- 2017-11-25 15:34:192314parcourir
Nous savons que CSS3 peut créer de nombreuses animations sympas, alors quelle serait sa puissance si CSS3 et JS étaient combinés ? Aujourd'hui, je vais vous apprendre à utiliser CSS et JS pour créer un arrière-plan dynamique de blocs montants.
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)'; }Tous les codes sont ici, les amis intéressés peuvent le faire eux-mêmes, et plus excitant Veuillez faire attention aux autres articles sur le site php chinois !
Lecture connexe :
Comment gérer l'affichage incomplet de la dernière ligne de texte en HTML
CSS Comment gérer le désalignement des pages Web
Comment créer des effets de chargement CSS3
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!