抛撒廉价珠子（box-shadow创意）
<style>#papa {
left: -214px;
width: 1024px;
height: 600px;
box-shadow: 3px 3px 30px #000;
overflow: hidden;
position: relative;
}
#ball {
position: absolute;
left: 50%;
bottom: -20px;
width: 20px;
height: 20px;
border-radius: 50%;
transition: box-shadow 5s ease;
}
</style>
<div id="papa">
<div id="ball"></div>
</div>
<script>
let flag = 0;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
setInterval(() => {
flag == 0 ? (ball.style.boxShadow = explode(num(50,200)), flag = 1) : (ball.style.boxShadow = 'none', flag = 0);
},5000);
function explode(total) {
let str = '';
Array.from({length: total}).forEach((ele) => {
str += `${num(-500,500)}px ${num(-600,-100)}px 0 rgb(${num(0,255)}, ${num(0,255)}, ${num(0,255)}),`;
});
str = str.substring(0,str.length - 1);
return str;
}
</script>
代码：（珠子原理请到后院查阅）
<style>
#papa {
left: -214px;
width: 1024px;
height: 600px;
box-shadow: 3px 3px 30px #000;
overflow: hidden;
position: relative;
}
#ball {
position: absolute;
left: 50%;
bottom: -20px;
width: 20px;
height: 20px;
border-radius: 50%;
transition: box-shadow 5s ease;
}
</style>
<div id="papa">
<div id="ball"></div>
</div>
<script>
let flag = 0;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
setInterval(() => {
flag == 0 ? (ball.style.boxShadow = explode(num(50,200)), flag = 1) : (ball.style.boxShadow = 'none', flag = 0);
},5000);
function explode(total) {
let str = '';
Array.from({length: total}).forEach((ele) => {
str += `${num(-500,500)}px ${num(-600,-100)}px 0 rgb(${num(0,255)}, ${num(0,255)}, ${num(0,255)}),`;
});
str = str.substring(0,str.length - 1);
return str;
}
</script>
定时器设为5秒，每5秒运行一次 #ball 选择器的 box-shadow 设置，期间，抛撒和“收回”均独自运行，亦即，抛撒和收回用时10秒。 定时器对应于 #ball 的 transition 时间设定，这样一起一落看上去是衔接的 抛撒珠子的数量有一个区间，50-200，这意味着每一次抛撒的珠子数量是不相等的 珠子是阴影，不是实体元素，所以，即使布满整个帖子表层，也不会影响里面的其他元素的交互（但会遮挡）。 马黑黑 发表于 2022-7-16 18:13
抛撒珠子的数量有一个区间，50-200，这意味着每一次抛撒的珠子数量是不相等的
哇塞，珠宝那么多呀 这个黑黑是可以当底图效果？ 小辣椒 发表于 2022-7-16 21:17
这个黑黑是可以当底图效果？
我看可以 上海朝阳 发表于 2022-7-16 20:02
哇塞，珠宝那么多呀
假的{:4_170:} 老黑真是有钱人，随便一撒就出来这么多圆珠子。厉害了。{:4_199:} 加林森 发表于 2022-7-16 21:34
老黑真是有钱人，随便一撒就出来这么多圆珠子。厉害了。
这些都是一分钱不到的一粒 马黑黑 发表于 2022-7-16 21:35
这些都是一分钱不到的一粒
多来几下不就撒玩了。 加林森 发表于 2022-7-16 21:43
多来几下不就撒玩了。
{:4_196:}
页:
[1]