javascript - 动画 css/js 波浪不随窗口大小调整大小

Question

我正在尝试使用 css 和 javascript 创建一个带有动画波浪(是的，水波)的完整视口(viewport)大小标题。一切都很好，除了波浪的集体宽度不随窗口宽度调整大小之外，即使在 codepen 示例中，我从中得到的片段也不会调整大小。

它还存在溢出问题；每个浅蓝色条都是 10px(根据我在 js 中的理解)，并且在页面重新加载时总是有 1 太多的条，创建一个水平滚动条。我尝试过 overflow hidden ，但似乎没有任何作用。我假设它必须通过 js 来控制，但我对 javascript 不太熟悉，还没有修复。

大家有什么想法吗？

这是代码笔链接:https://codepen.io/loktar00/pen/kfrKC

还有 JavaScript:

var ocean = document.getElementById("ocean"),
waveWidth = 10,
waveCount = Math.floor(window.innerWidth/waveWidth),
docFrag = document.createDocumentFragment();

for(var i = 0; i < waveCount; i++){
var wave = document.createElement("div");
wave.className += " wave";
docFrag.appendChild(wave);
wave.style.left = i * waveWidth + "px";
wave.style.webkitAnimationDelay = (i/100) + "s";}

ocean.appendChild(docFrag);

编辑:只是想澄清一下 codepen 片段不是我的，找不到作者

Answer 1

这能解决您的问题吗？

var myFunc = function() {
// make some waves.
var ocean = document.getElementById("ocean"),
    waveWidth = 10,
    waveCount = Math.floor(window.innerWidth/waveWidth),
    docFrag = document.createDocumentFragment();

for(var i = 0; i < waveCount; i++){
  var wave = document.createElement("div");
  wave.className += " wave";
  docFrag.appendChild(wave);
  wave.style.left = i * waveWidth + "px";
  wave.style.webkitAnimationDelay = (i/100) + "s";
}

ocean.appendChild(docFrag);

}
myFunc();
$(window).resize(myFunc);

要消除滚动条，请使用 overflow: hide; 作为 body