在CSS代码中的::before伪元素中,我想根据在React组件中选择的颜色动态更改盒子阴影的颜色。
React部分
我在尝试使用React时遇到了一个错误,当我尝试将样式作为根元素发送时。
React部分
<>
<div className="card">
<div className="percent">
<div
className="dot"
style={{
transform: `rotate(${3.6 * off}deg)`,
}}
></div>
<svg>
<circle cx={70} cy={70} r={70}></circle>
<circle
cx={70}
cy={70}
r={70}
style={{
stroke: colors,
strokeDasharray: 440,
strokeDashoffset: 440 - (440 * off) / 100,
}}
></circle>
</svg>
</div>
</div>
</>
css部分
.dot {
position: absolute;
inset: 5px;
z-index: 10;
animation: anmationdot 2s linear forwards;
}
@keyframes anmationdot {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(calc(3.6 * 85));
}
}
.dot::before {
content: "";
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: aqua;
box-shadow: 0 0 10px aqua, 0 0 30px aqua;
}
我在尝试使用React时遇到了一个错误,当我尝试将样式作为根元素发送时。
style
属性传递它。让你的CSS类期望一个同名的变量。 - undefinedoff
变量是什么? - undefinedstrokeDashoffset
一起来设置数值。 - undefined