gpt4 book ai didi

html - 由 CSS 剪辑引起的闪烁微调器?

转载 作者:搜寻专家 更新时间:2023-10-31 21:47:27 25 4
gpt4 key购买 nike

Here's看起来如何

.spinner {
position: absolute;
top: 35%;
left: 50%;
height: 80px;
width: 80px;
margin: -40px 0 0 -40px;
clip: rect(0, 80px, 80px, 40px);
-webkit-animation: loading 1.5s linear infinite;
animation: loading 1.5s linear infinite;
transform-origin: center;

&:after {
content:'';
position: absolute;
height: 80px;
width: 80px;
clip: rect(0, 80px, 80px, 40px);
border-radius: 50%;
-webkit-animation: loading2 1.5s ease-in-out infinite;
animation: loading2 1.5s ease-in-out infinite;
}
}

@-webkit-keyframes loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(220deg);
transform: rotate(220deg);
}
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(220deg);
}
}

@-webkit-keyframes loading2 {
0% {
box-shadow: inset #5FA3F3 0 0 0 8px;
-webkit-transform: rotate(-140deg);
transform: rotate(-140deg);
}
50% {
box-shadow: inset #2771C9 0 0 0 2px;
}
100% {
box-shadow: inset #5FA3F3 0 0 0 8px;
-webkit-transform: rotate(140deg);
transform: rotate(140deg);
}
}
@keyframes loading2 {
0% {
box-shadow: inset #5FA3F3 0 0 0 8px;
-webkit-transform: rotate(-140deg);
transform: rotate(-140deg);
}
50% {
box-shadow: inset #2771C9 0 0 0 2px;
}
100% {
box-shadow: inset #5FA3F3 0 0 0 8px;
-webkit-transform: rotate(140deg);
transform: rotate(140deg);
}
}

在 Firefox(版本 42.0)上,微调器有时会卡顿,我相信这可能是因为当过渡结束时,裁剪矩形是如何动画和旋转的。我不确定如何解决这个问题,或者是否有更好的方法来实现这个微调器。

有什么想法吗?

最佳答案

试试这个!将它应用于您看到闪烁的元素。

-webkit-transform-style: preserve-3d;

关于 preserve-3d 的一些内容: https://css-tricks.com/almanac/properties/t/transform-style/

更新

您提供的示例链接是ease infinite。如果您像您提供的代码那样使用 linear infinite,我看不出有任何问题。

-webkit-animation: loading 1.5s linear infinite;

我试图将其从线性修改为缓和,http://codepen.io/pksunkara/pen/gbejPv ,这也导致结局闪烁得很少。最好的方法是固定为单一颜色。

关于html - 由 CSS 剪辑引起的闪烁微调器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33916006/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com