如何覆盖 CSS class @keyframes 属性 in html

Question

我有一个 CSS class 用于绘制 leaflet.js 标记。使用 Javascript 和剃须刀页面表单，用户在创建标记的过程中设计标记的外观，其中一个参数是设置为闪烁模式时标记发光的颜色。从下面的代码中，到目前为止，我已经能够更改标记的一般配色方案，但我正在努力弄清楚如何访问 '@keyframes glowing 的 background-color & box-shadow 属性 ' 以便我可以在创建标记期间覆盖十六进制颜色值：

CSS Class:

 .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

看看网络动画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

here is the documentation

如何覆盖 CSS class @keyframes 属性 in html

How to override a CSS class @keyframes property in html

javascript

css

css-animations

web-animations-api