使用 css 和 jquery 在圆圈中填充颜色的关键帧
keyframes filling color in the circle with css and jquery
当我们向下滚动页面时，我想按顺时针方向填充圆圈中的颜色。我找到了一种方法来填充 link 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,0,0.5)');
如果 $(document).scrollTop() 在 100 之间，它从 9 点开始填充，因为 $(document).scrollTop() 越来越大，然后顺时针填充，直到达到 1000。
有什么方法可以实现吗？
添加此 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,0,0.5)');
这会起作用
如果您在下载时遇到问题 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, 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, 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, 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, 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, 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, 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, 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>
当我们向下滚动页面时，我想按顺时针方向填充圆圈中的颜色。我找到了一种方法来填充 link 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,0,0.5)');
如果 $(document).scrollTop() 在 100 之间，它从 9 点开始填充，因为 $(document).scrollTop() 越来越大，然后顺时针填充，直到达到 1000。
有什么方法可以实现吗？
添加此 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,0,0.5)');
这会起作用
如果您在下载时遇到问题 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, 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, 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, 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, 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, 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, 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, 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>