JQuery动态背景案例

代码的实现

• 创建50个盛放背景元素的Div盒子

for (let i = 0; i < 50; i++) {var box = document.createElement(\"div\");box.className = \"case\";console.log();$(\".main\").append(box);}$(\"<div class=item ></div>\").appendTo($(\".case\"));

• JS控制随机样式

$(\".item\").each(function (index, value) {var size = Math.random() * 50 + 10;var topRandom = Math.random() * $(\".main\").height();var leftRandom = Math.random() * $(\".main\").width();$(value).css({top: topRandom + \"px\",left: leftRandom + \"px\",width: size + \"px\",height: size + \"px\",backgroundColor: `hsla(${Math.random() * 360},50% ,70% ,${Math.random() + 0.2})`,});});

• case盒子控制下落动画

@keyframes caseMove {0% {transform: translateY(-100px);}100% {transform: translateY(700px);}}

• item盒子左右移动动画

@keyframes itemMove {0% {}50% {transform: translateX(-50px);}100% {}}

• JS控制case盒子和item元素的移动

var index = 0;var timer = setInterval(function () {// index = Math.floor(Math.random() * $(\".item\").length);$(\".case\").eq(index).css({animation: \"caseMove 9s linear infinite\",})$(\".item\").eq(index).css({animation: \"itemMove 5s linear infinite\",})index++;console.log(index);}, 50)

• 当所有小球动起来后终止定时函数

if (index >= $(\".case\").length) {clearInterval(timer);timer = null;}

效果图