Css 流动电路动画

我的网站有一个只有边距的div，当页面加载时，我想要一个电路的效果（我的电池重叠在div上），所以从正极端子开始，电路的颜色变为黄色，然后黄色继续转到负极端子。这是可能的CSS我不完全确定的权力CSS

这是我的div标签的代码

#电路{
宽度：80%；
边界：10px固体海军；
利润率：25px；
身高：80%；
左边距：自动；
右边距：自动；
}
html，
身体{
身高：100%；
保证金：0；
}

---

像这样的东西？它会创建背景并设置悬停位置的动画。您可以轻松地在页面加载上应用特殊类

#电路{
宽度：80%；
边界：10px固体海军；
利润率：25px；
身高：80%；
左边距：自动；
右边距：自动；
背景：线性梯度（向右，黄色50%，蓝色50%）；
背景大小：200%100%；
背景位置：右下角；
过渡：一切都很轻松；
}
html，
身体{
身高：100%；
保证金：0；
}
#电路：悬停{
背景位置：左下；
}

---

也许这就是你要找的：

#电路{
位置：相对位置；
宽度：450px；
高度：150像素；
利润率：10%自动；
边框：1px实心；
背景：线性梯度（向右，黄色50%，蓝色50%）；
背景大小：200%100%；
背景位置：右下角；
过渡：一切都很轻松；
}
html，
身体{
身高：100%；
保证金：0；
}
#电路：悬停{
背景位置：左下；
}
.内部{
背景：白色；
位置：绝对位置；
最高：15%；
左：5%；
底部：15%；
右：5%；
}

---

一系列关键帧动画完成了这项工作。您需要修改持续时间和累计延迟以获得所需的速度

html，正文{
身高：100%；
填充：0；
保证金：0；
}
* {
框大小：边框框；
}
.电路外部{
位置：相对位置；
宽度：80vw；
高度：80vh；
利润率：5%10%0；
填充：3倍；
背景：#eee；
边框：1px实心#ddd；
溢出：隐藏；
}
.电路内部{
位置：绝对位置；
顶部：3px；
底部：3px；
左：3px；
右：3px；
背景：#fff；
边框：1px实心#ddd；
}
.当前{
背景：橙色；
位置：绝对位置；
-webkit动画迭代计数：1；
-webkit动画计时功能：线性；
-webkit动画填充模式：正向；
动画迭代次数：1；
动画计时功能：线性；
动画填充模式：正向；
}
.current.bottom-left{
底部：0；
右：80%；
宽度：20%；
高度：3倍；
-webkit动画名称：zap1；
-webkit动画持续时间：.2s；
动画名称：zap1；
动画持续时间：.2s；
}
.现在，左边{
底部：0；
左：0；
宽度：3倍；
身高：0；
-webkit动画名称：zap2；
-webkit动画延迟：.2s；
-webkit动画持续时间：.5s；
动画名称：zap2；
动画延迟：.2s；
动画持续时间：.5s；
}
.current.top{
排名：0；
宽度：0；
高度：3倍；
-webkit动画名称：zap3；
-webkit动画延迟：.7s；
-webkit动画持续时间：1s；
动画名称：zap3；
动画延迟：.7s；
动画持续时间：1s；
}
.现在，对{
排名：0；
右：0；
宽度：3倍；
身高：0；
-webkit动画名称：zap2；
-webkit动画延迟：1.7s；
-webkit动画持续时间：.5s；
动画名称：zap2；
动画延迟：1.7秒；
动画持续时间：.5s；
}
.current.bottom-right{
底部：0；
右：0；
宽度：0%；
高度：3倍；
-webkit动画名称：zap4；
-webkit动画延迟：2.2s；
-webkit动画持续时间：.8s；
动画名称：zap4；
动画延迟：2.2s；
动画持续时间：.8s；
}
@-webkit关键帧zap1{
0% {
宽度：0；
}
100% {
宽度：20%；
}
}
@关键帧zap1{
0% {
宽度：0；
}
100% {
宽度：20%；
}
}
@-webkit关键帧zap2{
0% {
身高：0；
}
100% {
身高：100%；
}
}
@关键帧zap2{
0% {
身高：0；
}
100% {
身高：100%；
}
}
@-webkit关键帧zap3{
0% {
宽度：0；
}
100% {
宽度：100%；
}
}
@关键帧zap3{
0% {
宽度：0；
}
100% {
宽度：100%；
}
}
@-webkit关键帧zap4{
0% {
宽度：0；
}
100% {
宽度：80%；
}
}
@关键帧zap4{
0% {
宽度：0；
}
100% {
宽度：80%；
}
}

有点像电流从+ve流向-ve的效果（我知道电子实际上是从-ve流向+ve的，但我在这个网站上不关心这一点）这里只有边界？我移除了电池和电阻，用于简单的正电子终端？如果你看到图片，有一个+使其他人更容易理解：/类似的东西，但我希望这种效果发生在边距上，而不是在div块内：/抱歉混淆。它正接近我想要的。我更新了我的帖子（主页），我希望黄色从+ve终端转到-ve终端