Question

我正在尝试使用css＆amp;创建一个带有动画波形（是的，水波）的完整视口大小标题。 JavaScript的。一切都很好，除了波浪的集体宽度没有调整窗口的宽度，即使在codepen示例中我得到的片段不会调整大小。

它也存在溢出问题;每个淡蓝色条都是10px（根据我在js中的理解），并且在页面重新加载时总是有太多条形，创建一个水平滚动条。我试图隐藏溢出但它似乎没有做任何事情。我假设它必须通过js控制，但我只是不太熟悉javascript尚未修复。

有人有什么想法吗？

以下是codepen链接：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: hidden;

使用body

动画css / js波不会随窗口大小调整大小

1 个答案: