我在用着
#progressBar{
background-color: #247BA0;
width: 150px;
padding: 10px;
border-radius: 5px;
animation: progressBar 3s ease;
animation-fill-mode:both;
text-align: center;
box-sizing: content-box;
}
and
@keyframes progressBar {
0% { width: 0; }
100% { width: 280px; }
}
我想改变宽度数字@keyframeusing a JS多变的。我怎样才能做到这一点（没有 jQuery）？
您可以使用CSS 变量对于这个案例。
在页面根部定义两个变量并在关键帧中使用它们：
:root {
--my-start-width: 0;
--my-end-width: 280px;
}
...
@keyframes progressBar {
0% { width: var(--my-start-width); }
100% { width: var(--my-end-width); }
}
现在您可以使用以下函数在 js 中获取和设置此属性：
//set property:
document.documentElement.style
.setProperty('--my-variable-name', '100px');
//get property
getComputedStyle(document.documentElement)
.getPropertyValue('--my-variable-name'); // returns value
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
