如何动态应用多个 CSS webkit 动画？

如何解决如何动态应用多个 CSS webkit 动画？

在这个上拉我的头发。我的应用中有一个 5 星评级系统，我花了很多时间尝试将正确的 CSS 动画应用于显示部分着色的一颗星。

示例：评分为 3.3，三颗全彩星，那么第 4 颗星只有 30% 有色

我正在尝试使用 CSS -webkit 动画将部分颜色应用于第 4 颗星，但我使用的每种技术都不起作用或存在一些问题。

星形图标：

  <div class="" style="font-size:14px;">
    <i class="ion-ios-star" id="Rating_{{prod.prodID}}_1" ></i>
    <i class="ion-ios-star" id="Rating_{{prod.prodID}}_2" ></i>
    <i class="ion-ios-star" id="Rating_{{prod.prodID}}_3" ></i>
    <i class="ion-ios-star" id="Rating_{{prod.prodID}}_4" ></i>
    <i class="ion-ios-star" id="Rating_{{prod.prodID}}_5" ></i>
    {{prod.Rating}} out of {{prod.RatingCount}} reviews
  </div> 

静态地，将 ratingStarA 类应用于我的元素工作，所有属性都在那里，即使它们被划掉，只留下有效的属性来使动画工作：

.ratingStarA {
   background:-moz-linear-gradient(top,#e72c83 30%,#a742c6 70%); 
   background: -webkit-linear-gradient(top,#a742c6 70%); 
   background: linear-gradient(to bottom,#a742c6 70%);
   -webkit-background-clip: text;
   -moz-background-clip: text;
    background-clip: text;
   -webkit-text-fill-color:transparent;
}

.ratingStarB {
   -webkit-background-clip: text;
   -moz-background-clip: text;
    background-clip: text;
   -webkit-text-fill-color:transparent;
}

但我需要动态应用 background，因为我需要传入百分比值，而这正是事情变得不稳定的地方。 -webkit-background-clip 样式似乎是导致所有问题的原因。到目前为止，我试图用来动态应用它的任何方法都失败了。

方法 A：这似乎有效，但是当我检查元素时，“背景”被划掉并且“-webkit-background-clip”丢失...但是...动画正在发挥作用 - 我只是不相信它或不明白为什么会发生这种情况。

function colorStars(ID,rating) {
    // for the partial star,rating is passed in as ".3"
    var colorPer = rating * 100 ;
    var whitePer = 100 - colorPer ;
    var star = document.getElementById(ID) ;

    star.style.background = "-webkit-linear-gradient(right," +eColors.orange+ " " +colorPer+ "%,lightgray " +whitePer+ "%)" ;
    star.style['webkit-background-clip'] = "text" ;
    star.style['webkit-text-fill-color'] = "transparent" ;
}

方法B：只设置背景然后应用类，但是应用类后元素中的所有'-xxx-background-clip'都丢失了，因此部分星不可见。

function colorStars(ID,lightgray " +whitePer+ "%)" ;
    start.classList.add('ratingStarB') ;
}

方法 C：如何为跨浏览器支持应用多个背景？我不能动态应用多个背景，就像在一个类中一样，因为最后一个覆盖了前两个

function colorStars(ID,rating is passed in as ".3"
    var colorPer = rating * 100 ;
    var whitePer = 100 - colorPer ;
    var star = document.getElementById(ID) ;

    star.style.background = "-moz-linear-gradient(right,lightgray " +whitePer+ "%)" ;
    star.style.background = "-webkit-linear-gradient(right,lightgray " +whitePer+ "%)" ;

    // because this is the last 'background' applied,it overwrites the first two
    star.style.background = "linear-gradient(to right,lightgray " +whitePer+ "%)" ;

    //as well,only the '-webkit-text-fill-color' is applied,the others are not there.
    star.style['-moz-background-clip'] = "text" ;
    star.style['-webkit-background-clip'] = "text" ;
    star.style['background-clip'] = "text" ;
    star.style['-webkit-text-fill-color'] = "transparent" ;
}

同样，方法 A 似乎有效，但查看元素显示样式被划掉或丢失 - 它不支持跨浏览器支持。

感谢任何帮助。

解决方法

这可以通过使用 SVG 元素内部的掩码和一个小 javascript 来实现 here

function setProgress(amt) {
  amt = (amt < 0) ? 0 : (amt > 1) ? 1 : amt;
  document.getElementById("stop1").setAttribute("offset",amt);
  document.getElementById("stop2").setAttribute("offset",amt);
}

let val = 0;

function colorStars() {
  const rating = 2.65,// usually dynamic value
    flatten = rating / 5;  // to fit within 0-1 range

  setProgress(val);
  val += 0.01;
  if (val <= flatten) {
    setTimeout(colorStars,30);
  }
}

body { display: flex; align-items: center; gap: 1rem }

<svg viewBox="0 0 120 24" width="120" height="24">
  <g mask="url(#mask)">
    <path id="star" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />

    <use xlink:href="#star" x="24" y="0" />
    <use xlink:href="#star" x="48" y="0" />
    <use xlink:href="#star" x="72" y="0" />
    <use xlink:href="#star" x="96" y="0" />
  </g>

  <defs>
    <linearGradient id="progress" x1="0" y1="0" x2="1" y2="0">
      <stop id="stop1" offset="0" stop-color="lightblue" />
      <stop id="stop2" offset="0" stop-color="green" />
    </linearGradient>

    <mask id="mask" x="0" y="0" width="1" height="1">
      <rect x="0" y="0" width="120" height="100" fill="url(#progress)" />
    </mask>
  </defs>
</svg>

<button onclick="colorStars()">Color Stars</button>