translateX多次创建静态背景?



我有这个背景的想法,我想填充的视口。我已经创建了几个静态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)

最新更新