效果
代码
//html
<div id="test"></div>
复制代码
//css
div{
--p:1%;
--c:
height: 10px;
border: 1px solid;
border-radius: 10px;
background-image: linear-gradient(var(--c),var(--c));
background-repeat: no-repeat;
background-size: 0;
animation: move 1.5s linear;
/*animation: move 1.5s linear infinite;*/
/*animation-play-state:paused;*//*动画暂停*/
animate-delay:-1s;
--parent:90%;
animation-fill-mode:forwards; /*设定动画完成后的状态,默认是none 设为forwards 就可以在动画完成后定格在动画最后一帧*/
}
//定义动画
@keyframes move {
to{
background-size: var(--parent);
}
}
复制代码
//可以用js来更改自定义属性
document.getElementById('test').style.setProperty('--parent','100%');
复制代码