我的网站上有只利润率股利，并在页面加载时，我想电路的影响（我的电池重叠在DIV），所以从正端子，色电路变成黄色，然后黄色继续进入负极。这可能与CSS我不完全确定的CSS的力量。
这是我的div标签的代码。
#circuit {
width: 80%;
border: 10px solid navy;
margin: 25px;
height: 80%;
margin-left: auto;
margin-right: auto;
}
html,
body {
height: 100%;
margin: 0;
}<div id="circuit"></div>一系列关键帧动画可以完成这项工作。您需要修改持续时间和累计延迟才能获得所需的速度。
html, body {
height: 100%;
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
.circuit-outer {
position: relative;
width: 80vw;
height: 80vh;
margin: 5% 10% 0;
padding: 3px;
background: #eee;
border: 1px solid #ddd;
overflow: hidden;
}
.circuit-inner {
position: absolute;
top: 3px;
bottom: 3px;
left: 3px;
right: 3px;
background: #fff;
border: 1px solid #ddd;
}
.current {
background: orange;
position: absolute;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.current.bottom-left {
bottom: 0;
right: 80%;
width: 20%;
height: 3px;
-webkit-animation-name: zap1;
-webkit-animation-duration: .2s;
animation-name: zap1;
animation-duration: .2s;
}
.current.left {
bottom: 0;
left: 0;
width: 3px;
height: 0;
-webkit-animation-name: zap2;
-webkit-animation-delay: .2s;
-webkit-animation-duration: .5s;
animation-name: zap2;
animation-delay: .2s;
animation-duration: .5s;
}
.current.top {
top: 0;
width: 0;
height: 3px;
-webkit-animation-name: zap3;
-webkit-animation-delay: .7s;
-webkit-animation-duration: 1s;
animation-name: zap3;
animation-delay: .7s;
animation-duration: 1s;
}
.current.right {
top: 0;
right: 0;
width: 3px;
height: 0;
-webkit-animation-name: zap2;
-webkit-animation-delay: 1.7s;
-webkit-animation-duration: .5s;
animation-name: zap2;
animation-delay: 1.7s;
animation-duration: .5s;
}
.current.bottom-right {
bottom: 0;
right: 0;
width: 0%;
height: 3px;
-webkit-animation-name: zap4;
-webkit-animation-delay: 2.2s;
-webkit-animation-duration: .8s;
animation-name: zap4;
animation-delay: 2.2s;
animation-duration: .8s;
}
@-webkit-keyframes zap1 {
0% {
width: 0;
}
100% {
width: 20%;
}
}
@keyframes zap1 {
0% {
width: 0;
}
100% {
width: 20%;
}
}
@-webkit-keyframes zap2 {
0% {
height: 0;
}
100% {
height: 100%;
}
}
@keyframes zap2 {
0% {
height: 0;
}
100% {
height: 100%;
}
}
@-webkit-keyframes zap3 {
0% {
width: 0;
}
100% {
width: 100%;
}
}
@keyframes zap3 {
0% {
width: 0;
}
100% {
width: 100%;
}
}
@-webkit-keyframes zap4 {
0% {
width: 0;
}
100% {
width: 80%;
}
}
@keyframes zap4 {
0% {
width: 0;
}
100% {
width: 80%;
}
}<div class="circuit-outer">
<div class="current bottom-left"></div>
<div class="current left"></div>
<div class="current top"></div>
<div class="current right"></div>
<div class="current bottom-right"></div>
<div class="circuit-inner"></div>
</div>像这样的事情？它创建背景并为悬停的位置设置动画。您可以在页面加载时轻松应用特殊课程。
#circuit {
width: 80%;
border: 10px solid navy;
margin: 25px;
height: 80%;
margin-left: auto;
margin-right: auto;
background: linear-gradient(to right, yellow 50%, blue 50%);
background-size: 200% 100%;
background-position:right bottom;
transition:all 2s ease;
}
html,
body {
height: 100%;
margin: 0;
}
#circuit:hover {
background-position:left bottom;
}<div id="circuit"></div>类似的东西，但我希望这种效果发生在不在div块内的MARGIN上：/抱歉有混淆。 – Indigo
也许这是你在找什么：
#circuit {
position:relative;
width: 450px;
height: 150px;
margin: 10% auto;
border:1px solid;
background: linear-gradient(to right, yellow 50%, blue 50%);
background-size: 200% 100%;
background-position:right bottom;
transition:all 2s ease;
}
html,
body {
height: 100%;
margin: 0;
}
#circuit:hover {
background-position:left bottom;
}
.inner{
background:white;
position:absolute;
top:15%;
left:5%;
bottom:15%;
right:5%;
}<div id="circuit"><div class='inner'></div></div>它越来越接近我想要的东西我更新了我的文章（主页），我希望黄色从+ ve终端到-ve终端 – Indigo
还挺从+流动的电流的影响已经到-ve（我知道其实电子从-ve移动到雾化+ ve，但我不关心，在这个网站） – Indigo
这里只有边界吗？ –
为了简单，我删除了电池和电阻 – Indigo