|
|

楼主 |
发表于 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>
|
评分
-
| 参与人数 1 | 威望 +30 |
金钱 +60 |
经验 +30 |
收起
理由
|
加林森
| + 30 |
+ 60 |
+ 30 |
赞一个! |
查看全部评分
|