关键帧用css和jquery填充圆圈中的颜色

如何解决关键帧用css和jquery填充圆圈中的颜色

当我们向下滚动页面时，我想按顺时针方向在圆圈中填充颜色。我找到了一种在链接https://codepen.io/HugoGiraudel/pen/BHEwo

上填充颜色的方法

<div class="wrapper">
  <div class="pie spinner"></div>
  <div class="pie filler"></div>
  <div class="mask"></div>
</div>

.wrapper {
  position: relative;
  margin: 40px auto;
  background: white;
}

@mixin timer($item,$duration,$size,$color,$border,$hover: running) {

  #{$item} { 
    width: $size;
    height: $size;
  }

  #{$item} .pie {
    width: 50%;
    height: 100%;
    transform-origin: 100% 50%;
    position: absolute;
    background: $color;
  }

  #{$item} .spinner {
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
    z-index: 200;
    border-right: none;
    animation: rota $duration + s linear infinite;
  }

  #{$item}:hover .spinner,#{$item}:hover .filler,#{$item}:hover .mask {
    animation-play-state: $hover;    
  }

  #{$item} .filler {
    border-radius: 0 100% 100% 0 / 0 50% 50% 0; 
    left: 50%;
    opacity: 0;
    z-index: 100;
    animation: opa $duration + s steps(1,end) infinite reverse;
    border-left: none;
  }

  #{$item} .mask {
    width: 50%;
    height: 100%;
    position: absolute;
    background: inherit;
    opacity: 1;
    z-index: 300;
    animation: opa $duration + s steps(1,end) infinite;
  }

  @keyframes rota {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes opa {
    0% { opacity: 1; }
    50%,100% { opacity: 0; }
  }
}

@include timer('.wrapper',5,250px,#08C,'5px solid rgba(0,0.5)');

如果$（document）.scrollTop（）在100之间，则从9点开始填充，因为$（document）.scrollTop（）变大，然后按顺时针方向填充，直到达到1000。

有什么方法可以实现？

解决方法

如果您在下载Sass时遇到问题，则以下代码不包含罗盘组件，而只是纯CSS。

这将在您的apache服务器中工作。

var timer=document.getElementsByClassName('timer')[0];
var timer_1=document.getElementsByClassName('timer_1')[0];
timer_1.style.transform="rotate(360deg)";
timer_1.style.background="#ddd";

window.addEventListener('scroll',function(){

     var scrolled=window.scrollY;
     var diff=scrolled-180;
   
    if(scrolled>=0 && scrolled<=180 ){
        
        timer_1.style.background="#ddd";
        timer_1.style.transform="rotate("+(360-scrolled)+"deg)";
        if(scrolled==180){
        timer_1.style.transform="rotate(180deg)";   
        }
    }
    else{
    if(scrolled>=180.0001){
timer_1.style.background="#6c6";
timer_1.style.transform="rotate("+(360-diff)+"deg)";
if(scrolled>=360){
timer_1.style.transform="rotate(180deg)";   
    }
}
    }

  
})

body{
            min-height: 3000px;
        }
        .timer {  margin-top:100px;background: linear-gradient(90deg,#6c6 50%,#ddd 50%); border-radius: 50%; height: 6em; position: fixed; width: 6em; }
         .timer_1 {  border-radius: 100% 0 0 100% / 50% 0 0 50%; content: ''; height: 100%; left: 0; position: absolute; top: 0; transform-origin: 100% 50%; width: 50%;}
         p{
            font-size: 20px;
            font-family:'arial';
            margin-left: 500px;
            width: 60%;
         }

<div class="timer">
    <div class="timer_1"></div>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>

,

添加此JS代码并使用下面给出的代码更改css，您将获得所需的内容。

JS

var wrapper=document.getElementsByClassName('wrapper')[0];
var spinner=document.getElementsByClassName('spinner')[0];
var filler=document.getElementsByClassName('filler')[0];
var mask=document.getElementsByClassName('mask')[0];
var count=0;
window.addEventListener('scroll',function(){
        
     var scrolled=window.scrollY;
     spinner.style.transform="rotate(" + scrolled+ "deg)";
    if(count%2==0)
    {
    if(scrolled>=180){
      filler.style.opacity=1;
    mask.style.opacity=0;  
    count++;  
    }
    }
  else{
    if(scrolled<=180){
      filler.style.opacity=0;
    mask.style.opacity=1;  
    count++;  
    }
  }
  
  
  if(scrolled>=360)
  {
    if(scrolled==360)
    {
    mask.style.opacity=0;
    }
    spinner.style.transform="rotate(360deg)";
  }
    
})

CSS

@import "compass/css3";
body{
  min-height:2400px;
}
.wrapper {
  position: fixed;
  margin: 40px auto;
  background: white;
}

@mixin timer($item,$duration,$size,$color,$border,$hover: running) {
  #{$item},#{$item} * { @include box-sizing(border-box); }

  #{$item} { 
    width: $size;
    height: $size;
  }

  #{$item} .pie {
    width: 50%;
    height: 100%;
    transform-origin: 100% 50%;
    position: absolute;
    background: $color;
    border: #{$border};
  }

  #{$item} .spinner {
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
    z-index: 200;
    border-right: none;
  }

  #{$item}:hover .spinner,#{$item}:hover .filler,#{$item}:hover .mask {
    animation-play-state: $hover;    
  }

  #{$item} .filler {
    border-radius: 0 100% 100% 0 / 0 50% 50% 0; 
    left: 50%;
    opacity: 0;
    z-index: 100;
    border-left: none;
  }

  #{$item} .mask {
    width: 50%;
    height: 100%;
    position: absolute;
    background: inherit;
    opacity: 1;
    z-index: 300;
  }

  @keyframes rota {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes opa {
    0% { opacity: 1; }
    50%,100% { opacity: 0; }
  }
}

@include timer('.wrapper',5,250px,#08C,'5px solid rgba(0,0.5)');

这将起作用