所以我发现了这个效果，我试图修改它以将其加载到 DIV myeffect 中，例如:
<html>
<head></head>
<body>
<div class="myeffect"></div>
</body>
</html>
我尝试更改一些变量，但我不是 JavaScript 专家，我无法让它在 DIC 中工作。效果从上到下覆盖整个屏幕。
代码在 Codepen 上，可以在这里找到:https://codepen.io/emilykarp/pen/bVqxRm
欢迎帮助。
最佳答案
希望对你有帮助
var speeds = [];
var count = 1;
var colors = ['#bf1e2e', '#ee4037', '#dc5323', '#e1861b', '#e1921e', '#f7ac40', '#f7e930', '#d1da22', '#8bc43f', '#38b349', '#008d42', '#006738', '#29b473', '#00a69c', '#26a9e1', '#1a75bb', '#2a388f', '#262161', '#652d90', '#8e2792', '#9e1f64', '#d91c5c', '#ed297b', '#d91c5c', '#db1e5e', '#bf1e2e', '#f6931e', '#f05a28', '#f6931e', '#fbaf41']
var width = parseInt($('html').css('width'), 10);
var random = function(mult, add) {
return Math.floor((Math.random()*mult) + add);
};
var drop = function(n, height, color) {
$('.myeffect').append('<div class="drop" style="left:'+
n*15+'px;height:'+
height+'vh;background-color:'+
color+';"></div>');
};
var createDrops = function(space) {
for (var i=speeds.length; i < space/10; i++) {
speeds.push(random(3000, 2000));
drop(i, random(70, 30), colors[count]);
if (count < colors.length-1) { count++; }
else { count = 0; }
}
};
var animateDrops = function(startingN) {
for (var i=startingN; i<speeds.length; i++) {
$('.drop:nth-child('+i+')').slideDown(speeds[i]);
}
};
createDrops(width);
animateDrops(0);.drop {
width: 16px;
height: 200px;
display: none;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
position: absolute;
top: 0;
-webkit-box-shadow: inset -4px -8px 16px -6px rgba(0,0,0,0.47);
-moz-box-shadow: inset -4px -8px 16px -6px rgba(0,0,0,0.47);
box-shadow: inset -4px -8px 16px -6px rgba(0,0,0,0.47);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myeffect" ></div>关于javascript - 在 DIV 元素中加载 javascript 效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45306469/