如何在 html 中重写 CSS 类@keyframes属性

Question

我有一个用于绘制传单.js标记的CSS类。使用 Javascript 和 razor 页面表单，用户在创建标记期间设计标记的外观，其中一个参数是标记在设置为闪烁模式时将发光的颜色。从下面的代码中，到目前为止，我已经能够更改标记的一般配色方案，但我正在努力弄清楚如何访问"@keyframes发光"的背景颜色和框阴影属性，以便我可以在创建标记期间覆盖十六进制颜色值：

CSS 类：

.marker-pin {
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: #c30b82;
position: absolute;
transform: rotate(-45deg);
left: 50%;
top: 50%;
margin: -15px 0 0 -15px;
animation: glowing 1000ms infinite;
}
/* to draw white circle */
.marker-pin::after {
content: '';
width: var(--width, 24px);
height: var(--height, 24px);
margin: var(--margin, 3px 0 0 3px);
background: var(--color, white);
position: absolute;
border-radius: 50%;
}
/* to align icon */
.custom-div-icon i {
position: absolute;
width: 22px;
font-size: 22px;
left: 0;
right: 0;
margin: 10px auto;
text-align: center;
}
.custom-div-icon i.awesome {
margin: 12px auto;
font-size: 17px;
color: #000000;
}
@keyframes glowing {
0% {
background-color: #004A7F; // I need to change this value for each marker in HTML script below
box-shadow: 0 0 10px #004A7F; // I need to change this value for each marker in HTML script below
}
50% {
background-color: #00cc00; // I need to change this value for each marker in HTML script below
box-shadow: 0 0 30px #00cc00; // I need to change this value for each marker in HTML script below
}
100% {
background-color: #004A7F; // I need to change this value for each marker in HTML script below
box-shadow: 0 0 10px #004A7F; // I need to change this value for each marker in HTML script below
}

我的剃刀页面上的Javascript：

// Function adds the marker to the center of the map.
function addMarkerToMap() {
var id = document.getElementById("markerNameInput").value;
if (id == "") {
alert("Marker Name is missing! nPlease complete the required field");
return;
}
// If the marker id already exists, throw error.
var found = componentList.includes(id);
if (found == true) {
alert("Marker ID already exists! nPlease choose another one");
return;
}
var markerColorHiddenField = document.getElementById("markerColorHiddenField").value;
var markerIconColorHiddenField = document.getElementById("markerIconColorHiddenField").value;
var markerIconBackgroundColorHiddenField = document.getElementById("markerIconBackgroundColorHiddenField").value;
var markerAlarmColorHiddenField = document.getElementById("markerAlarmColorHiddenField").value;
var fontAwesomeInput = document.getElementById("fontAwesomeInput").value;
var markerSizeSelect = document.getElementById("markerSizeSelect").value;
if (markerSizeSelect == "Standard") {
// Create the marker using the custom class and design
// parameters from the user selection.
icon = L.divIcon({
className: 'custom-div-icon',
// HELP HELP HELP - THIS LINE BELOW IS WHERE I NEED TO ACCESS & OVERRIDE THE KEYFRAME VALUES
html: "<div class='marker-pin' style='background:" + markerColorHiddenField + "; --color:" + markerIconBackgroundColorHiddenField + ";'></div><i class='" + fontAwesomeInput + " awesome'style='color:" + markerIconColorHiddenField + ";'>",
iconSize: [30, 42],
iconAnchor: [15, 42]
});
} else if (markerSizeSelect == "Large") {
// Create the marker using the custom class and design
// parameters from the user selection.
icon = L.divIcon({
className: 'custom-div-icon',
// HELP HELP HELP - THIS LINE BELOW IS WHERE I NEED TO ACCESS & OVERRIDE THE KEYFRAME VALUES
html: "<div class='marker-pin' style='background:" + markerColorHiddenField + "; --color:" + markerIconBackgroundColorHiddenField + "; width:50px; height:50px; --width:40px; --height:40px; --margin:5px 0 0 5px;'></div><i class='" + fontAwesomeInput + " awesome'style='color:" + markerIconColorHiddenField + "; font-size:30px;'>",
iconSize: [9, 34],
iconAnchor: [15, 34]
});
} else if (markerSizeSelect == "X-Large") {
// Create the marker using the custom class and design
// parameters from the user selection.
icon = L.divIcon({
className: 'custom-div-icon',
// HELP HELP HELP - THIS LINE BELOW IS WHERE I NEED TO ACCESS & OVERRIDE THE KEYFRAME VALUES
html: "<div class='marker-pin' style='background:" + markerColorHiddenField + "; --color:" + markerIconBackgroundColorHiddenField + "; width:60px; height:60px; --width:50px; --height:50px; --margin:5px 0 0 5px; background-color:#00cc00;'></div><i class='" + fontAwesomeInput + " awesome'style='color:" + markerIconColorHiddenField + "; font-size:30px;'>",
iconSize: [0, 30],
iconAnchor: [15, 30]
});
}
}

Answer 1

看看 Web 动画 API。与仅使用 CSS 相比，您可以更轻松地更改关键帧之类的内容。例如，您的代码将使用 API 像这样执行。

// assign timings
var marker1timing = {
duration: 500,
fill: "both",
easing: "ease-in-out",
iterations: 1
};
// assign keyframes
var marker1keyframes = [
{
backgroundColor: '#004A7F', 
boxShadow: '0 0 10px #004A7F'
},
{
backgroundColor: '#00cc00',
boxShadow: '0 0 30px #00cc00'
},
{
backgroundColor: '#004A7F',
boxShadow: '0 0 10px #004A7F'
}
];
// call the animation
var glowingMarker1 = document
.getElementById("#yourID")
.animate(marker1timing, marker1keyframes);
// pauses the animation until it is needed to run
glowingMarker1.pause();
// use glowingMarker1.play() inside an event handler to make the animation happen

这是文档