我有这个背景的想法,我想填充的视口。我已经创建了几个静态svg文件,但是对于较小的屏幕来说它们太大了(文档大小设置为4000x2200px),而且它们不是像素完美的,这在某些比例下会显示出来。我可以有一个切出(viewport-high)对角波浪线重复与translateX足够的时间来填充背景吗?
这是我手工制作的文件的最终效果。
我认为不需要动画。
例如,可以将线居中并将其在x轴上向左平移&右的同时,所以它填满了屏幕?
你正在寻找的是一个重复的背景图案,可以在CSS3中使用,而不是手动复制自己的图像。在你的CSS中使用:
html {
background: url(https://i.stack.imgur.com/Gowoj.png) repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
这样就可以得到那条弯弯曲曲的线的无限重复图案!如果你想让它少一些颗粒感,那就试着把方形图像变小一些,然后用图像所在位置的URL替换图像的URL(注意没有引号包围URL)