几秒钟后，我自动生成的“点”会粘在屏幕的底部。
几秒钟后，我自动生成的“点”会粘在屏幕的底部。
提问于 2017-02-02 05:59:57
所以我有了这个网站(http://mc.wordquest.nl/green/dots.html)，我想让圆点从页面底部漂浮到空中。在最初的几秒钟内，它工作得很好。但在一秒或五秒后，点就会留在它们的位置上。Click here for the picture (of the problem)
这些点应该漂浮到页面底部以上的100px。我通过使用CSS动画(可能不是最好的方式，但我可以使用它…)来做到这一点。
我在页面中使用的代码如下：
window.setInterval(function() {
randomSquare();
}, 100);
var i = 0;
function randomSquare() {
//Set window height
var w = window.innerWidth;
var h = window.innerHeight;
//Set dot x-position
var x = Math.floor((Math.random() * w) + 1);
var y = Math.floor((Math.random() * h) + 1);
// Add a dot to follow the cursor
dot = document.createElement('div');
dot.className = "dot";
dot.style.left = x + "px";
dot.style.bottom = 10 + "px";
i++;
//Random color
var COLOURS = ['#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423'];
// var color = "blue";
var color = COLOURS[Math.floor(Math.random() * COLOURS.length)];
dot.style.backgroundColor = color;
if (y < h * 0.97 && x < w * 0.97) {
document.body.appendChild(dot);
}
}; body {
height: 80%;
width: 90%;
font-family: Arial;
font-weight: Bold;
}
.dot {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
color: white;
z-index: 1px;
border-radius: 50%;
animation: dots 2s linear;
}
@keyframes dots {
0% {
width: 20px;
height: 20px;
opacity: 1;
bottom: 0px;
}
100% {
/* opacity: 0; */
width: 0px;
height: 0px;
bottom: 100px;
}
}<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
</style>
</head>
<body>
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-02-02 06:28:38
问题是，在达到100%后，你在关键帧中定义的属性将不会继续应用于你的动画。为此，您需要设置animation-fill-mode: forwards;。更重要的是，需要注意的是，您可以无限地向DOM添加元素。这是一个内存泄漏。相反，在一段时间后(动画完成)，您应该删除该元素。(或者可能有固定数量的点，并重复使用它们)考虑以下代码片段，请注意有
setTimeout(function(){
dot.remove();
}, 2000)此外，您忘记向dot变量添加var关键字，从而使其成为全局变量。
window.setInterval(function() {
randomSquare();
}, 100);
var i = 0;
function randomSquare() {
//Set window height
var w = window.innerWidth;
var h = window.innerHeight;
//Set dot x-position
var x = Math.floor((Math.random() * w) + 1);
var y = Math.floor((Math.random() * h) + 1);
// Add a dot to follow the cursor
var dot = document.createElement('div');
dot.className = "dot";
dot.style.left = x + "px";
dot.style.bottom = 10 + "px";
i++;
//Random color
var COLOURS = ['#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423'];
// var color = "blue";
var color = COLOURS[Math.floor(Math.random() * COLOURS.length)];
dot.style.backgroundColor = color;
if (y < h * 0.97 && x < w * 0.97) {
document.body.appendChild(dot);
}
setTimeout(function(){
dot.remove();
}, 2000)
};body {
height: 80%;
width: 90%;
font-family: Arial;
font-weight: Bold;
}
.dot {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
color: white;
z-index: 1px;
border-radius: 50%;
animation: dots 2s linear;
-webkit-animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes dots {
0% {
width: 20px;
height: 20px;
opacity: 1;
bottom: 0px;
}
100% {
width: 0px;
height: 0px;
bottom: 100px;
}
}<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</body>
</html>
Stack Overflow用户
发布于 2017-02-02 06:23:18
要使元素在动画结束时保持其样式，请添加：
.dot {
animation-fill-mode: forwards;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41990593
复制相关文章
相似问题
腾讯云开发者
