马黑黑 发表于 2022-3-16 12:55

无缝动态背景

<style>

.myBox {
        --w: 760px;
        width: var(--w);
        height: 200px;
        background-image: linear-gradient(90deg, green, olive, transparent, tomato, green);
        background-size: var(--w) 100px;
        background-position: var(--w) 0;
        border: 1px solid;
        animation: chgc 2s linear infinite;
}
@keyframes chgc {
        from { background-position: var(--w) 0; }
        to { background-position: 0 0; }
}
</style>

<div class="myBox"></div>

马黑黑 发表于 2022-3-16 13:04

参考代码：

一、CSS部分



<style>
.myBox {
        --w: 760px;
        width: var(--w);
        height: 200px;
        background-image: linear-gradient(90deg, green, olive, transparent, tomato, green);
        background-size: var(--w) 100px;
        background-position: var(--w) 0;
        border: 1px solid;
        animation: chgc 2s linear infinite;
}
@keyframes chgc {
        from { background-position: var(--w) 0; }
        to { background-position: 0 0; }
}
</style>

这里，用了一个CSS变量 var(--w) 并在开头赋值，这样省事，修改盒子宽度时只需修改开头的 --w: 760px; 这一句的值。我发现我太聪明了。

还有一个技巧：background-image 的设置，这里用线性渐变，头尾颜色一致，都用了green，背景的无缝变化就靠它。如果使用图片，图片最好能左右一致或相近，这样“无缝”的效果才能出来。

二、HTML部分：就一句，没什么可解释的——

<div class="myBox"></div>



加林森 发表于 2022-3-16 13:09

谢谢老黑的指点。{:4_190:}

马黑黑 发表于 2022-3-16 13:16

加林森 发表于 2022-3-16 13:09
谢谢老黑的指点。

{:5_108:}

加林森 发表于 2022-3-16 13:21

马黑黑 发表于 2022-3-16 13:16


{:5_108:}

红影 发表于 2022-3-16 13:45

马黑黑 发表于 2022-3-16 13:04
参考代码：

一、CSS部分


你设置了height: 200px;再设置background-size: var(--w) 100px; 前面的200就没用了吧？

红影 发表于 2022-3-16 13:51

--w: 760px有了这个，动画里就不需要设置成负值了么？

马黑黑 发表于 2022-3-16 18:21

红影 发表于 2022-3-16 13:51
--w: 760px有了这个，动画里就不需要设置成负值了么？

看你要什么方向，这里的效果是从右向左。如果需要从左向右，则这么写动画的相应代码：

from { background-position: -var(--w) 0; }

马黑黑 发表于 2022-3-16 18:23

红影 发表于 2022-3-16 13:45
你设置了height: 200px;再设置background-size: var(--w) 100px; 前面的200就没用了吧？

有用的，height是高度。我这个演示例子，变量仅针对元素的宽度以及与宽度一致的背景尺寸，高度值在本例中无需改变，是固定的。

红影 发表于 2022-3-16 19:57

马黑黑 发表于 2022-3-16 18:21
看你要什么方向，这里的效果是从右向左。如果需要从左向右，则这么写动画的相应代码：

from { backgr ...

哦 哦，只要再这个代数前面加个符号就行了，还真是挺方便。聪明{:4_199:}

红影 发表于 2022-3-16 20:03

马黑黑 发表于 2022-3-16 18:23
有用的，height是高度。我这个演示例子，变量仅针对元素的宽度以及与宽度一致的背景尺寸，高度值在本例中 ...

嗯嗯，知道了{:4_187:}

马黑黑 发表于 2022-3-16 20:05

红影 发表于 2022-3-16 20:03
嗯嗯，知道了
变量的作用在这里其实只是为了改变元素宽度时只改一个数字，方便。当然，如果需要配合JS使用，那它的用处就大了去

红影 发表于 2022-3-17 15:46

马黑黑 发表于 2022-3-16 20:05
变量的作用在这里其实只是为了改变元素宽度时只改一个数字，方便。当然，如果需要配合JS使用，那它的用处 ...

变量的使用这么重要的，嗯嗯，学习了{:4_187:}

马黑黑 发表于 2022-3-17 18:16

红影 发表于 2022-3-17 15:46
变量的使用这么重要的，嗯嗯，学习了

CSS用到的变量不多。它也挺可怜，声明变量只能酱紫：

var(--varName);

红影 发表于 2022-3-17 19:32

马黑黑 发表于 2022-3-17 18:16
CSS用到的变量不多。它也挺可怜，声明变量只能酱紫：

var(--varName);

少点的好，清晰，尤其对我这样不熟的人来说{:4_173:}

马黑黑 发表于 2022-3-17 22:11

红影 发表于 2022-3-17 19:32
少点的好，清晰，尤其对我这样不熟的人来说

最初，设计CSS的时候，人们没想到，将来它也可以编程

红影 发表于 2022-3-17 23:11

马黑黑 发表于 2022-3-17 22:11
最初，设计CSS的时候，人们没想到，将来它也可以编程

这个东西会越来越强{:4_204:}

马黑黑 发表于 2022-3-18 07:26

红影 发表于 2022-3-17 23:11
这个东西会越来越强

也不能太强大了，它毕竟是制定样式的，根据需要来

红影 发表于 2022-3-18 13:56

马黑黑 发表于 2022-3-18 07:26
也不能太强大了，它毕竟是制定样式的，根据需要来

我现在已经觉得它很强大了呢{:4_173:}

马黑黑 发表于 2022-3-18 15:13

红影 发表于 2022-3-18 13:56
我现在已经觉得它很强大了呢

还行
页: [1]
查看完整版本: 无缝动态背景