我試著在一條2px的實線上制作影片，從中心到末端填充白色，但失敗了，因為它只是從右到左填充，沒有從反方向獲得。 誰能告訴我如何創建這樣的影片。 這只是一個結構。2px的高度和100px的寬度，從點 開始，從中心到兩端等長地填充顏色，完成這種型別的影片。希望我已經詳細地解釋了我的問題。
[---------- ----------]
[--------- ---------]
[-------- --------]
[------- -------]
[------ ------]
[----- -----]
[---- ----]
[--- ---]
[-- --]
[- -]
[ ]
uj5u.com熱心網友回復：
如下所示：
。span class="hljs-selector-class">.line {
width: 100px;
height:2px。
background: linear-gradient(red 0 0) center/0% 100% no repeat;
animation:l 2s linear infinite alternate;
}
@keyframes l {
to {background-size:100% 100%}< div class="line"></div> uj5u.com熱心網友回復：
這里從中間到左邊的技巧是在影片中減少margin-left
HTML:<div class="wrapper"/span>>
<div id="inner-left"/span>> </div>>
<div id="inner-right"/span>> </div>>
</div>
CSS:
.wrapper {
position: relative;
width: 200px;
height: 2px;
background-color: #000000。
}
#inner-right,
#inner-left {
width: 0;
height: 100%;
background: white;
}
#inner-left {
margin-left: 50%;
animation: centerToLeft 2000ms ease forwards infinite;
}
#inner-right {
position: absolute;
top: 0;
left: 50%;
animation: centerToRight 2000ms ease forwards infinite;
}
@keyframes centerToRight {
to {
width: 50%;
}
}
@keyframes centerToLeft {
to {
margin-left: 0;
width: 50%。
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/319378.html
標籤：