js/jq 花朵下落动画
html:
<div class="float-box" id="float-box">
<li style=""><img
class="not-js-style" src="https://img.haomeiwen.com/i6517590/354f700a5039648f.png"></li>
<li style=""><img
class="not-js-style" src="https://img.haomeiwen.com/i6517590/354f700a5039648f.png"></li>
<li style=""><img
class="not-js-style" src="https://img.haomeiwen.com/i6517590/354f700a5039648f.png"></li>
<li style=""><img
class="not-js-style" src="https://img.haomeiwen.com/i6517590/354f700a5039648f.png"></li>
<li style=""><img
class="not-js-style" src="https://img.haomeiwen.com/i6517590/354f700a5039648f.png"></li>
<li style=""><img
class="not-js-style" src="https://img.haomeiwen.com/i6517590/354f700a5039648f.png"></li>
<li style=""><img
class="not-js-style" src="https://img.haomeiwen.com/i6517590/354f700a5039648f.png"></li>
<li style=""><img
class="not-js-style" src="https://img.haomeiwen.com/i6517590/354f700a5039648f.png"></li>
<li style=""><img
class="not-js-style" src="https://img.haomeiwen.com/i6517590/354f700a5039648f.png"></li>
<li style=""><img
class="not-js-style" src="https://img.haomeiwen.com/i6517590/354f700a5039648f.png"></li>
</div>
css:
/*页面漂浮物*/
.float-box li {
position:fixed;
top: -20%;
list-style:none;
display:block;
width:3rem;
animation:downFloat 10s infinite;
-webkit-transition-timing-function:linear;
transition-timing-function:linear;
z-index:10;
}
.float-box li img {
width:100%;
}
@keyframes downFloat {
0% {
top: -20%;
-webkit-transform:translateY(0);
transform:translateY(0)
}
100% {
top:110%;
-webkit-transform:rotate(600deg);
transform:rotate(600deg)
}
}
@keyframes upFloat {
0% {
-webkit-transform:translateY(0);
transform:translateY(0)
}
100% {
-webkit-transform:translateY(-2000px)rotate(600deg);
transform:translateY(-2000px)rotate(600deg)
}
}
js实现:
function playFloatBox(content, type) {
var bom = type === 1 ? '<span><i class="fa fa-' + content + '"></i></span>' : '<img class="not-js-style" src="' + content + '">';
for (var i = 0; i < 10; i++) {
var floatId = document.getElementById("float-box")
var p2 = document.createElement('li')
p2.innerHTML = bom
floatId.appendChild(p2)
}
var param = {
delay: [400, 12000],
left: [0, 90],
duration: [2000, 20000],
width: [2, 5]
};
document.querySelectorAll(".float-box li").forEach(function (item,index) {
var i = index + 1;
item.setAttribute("id", i)
var delay = Math.floor(param.delay[0] + Math.random() * (param.delay[1] - param.delay[0])) + Math.floor(200 + Math.random() * (200 - 50));
var left = Math.floor(param.left[0] + Math.random() * (param.left[1] - param.left[0]));
var duration = Math.floor(param.duration[0] + Math.random() * (param.duration[1] - param.duration[0])) + Math.floor(1000 + Math.random() * (1000 - 200));
var width = Math.floor(param.width[0] + Math.random() * (param.width[1] - param.width[0]));
var oDiv = document.getElementById(i);
function setStyle(obj,json){------
for(var i in json)
{
obj.style[i]=json[i];
}
}
setStyle(oDiv, {left: left + '%', animationDelay: delay + "ms", animationDuration: duration + "ms", width: width + 'rem',fontSize: width + 'rem'});
});
}
playFloatBox("https://img.haomeiwen.com/i6517590/354f700a5039648f.png", 1)
jq实现：
function playFloatBox(content, type) {
var bom = type === 1 ? '<span><i class="fa fa-' + content + '"></i></span>' : '<img class="not-js-style" src="' + content + '">';
for (var i = 0; i < 10; i++) {
$('.float-box').append('<li>' + bom + '</li>')
}
var param = {
delay: [400, 12000],
left: [0, 90],
duration: [2000, 20000],
width: [2, 5]
};
$('.float-box li').each(function (index) {
var i = index + 1;
var delay = Math.floor(param.delay[0] + Math.random() * (param.delay[1] - param.delay[0])) + Math.floor(200 + Math.random() * (200 - 50));
var left = Math.floor(param.left[0] + Math.random() * (param.left[1] - param.left[0]));
var duration = Math.floor(param.duration[0] + Math.random() * (param.duration[1] - param.duration[0])) + Math.floor(1000 + Math.random() * (1000 - 200));
var width = Math.floor(param.width[0] + Math.random() * (param.width[1] - param.width[0]));
$('.float-box li:nth-child(' + i + ')').css({
left: left + '%',
animationDelay: delay + "ms",
animationDuration: duration + "ms",
width: width + 'rem',
fontSize: width + 'rem'
});
});
}
playFloatBox("https://img.haomeiwen.com/i6517590/354f700a5039648f.png", 2)
