纯CSS中的加载器动画
纯CSS中的加载器动画
提问于 2022-02-06 12:54:49
我试图在这个dribbble：https://dribbble.com/shots/14420202-Processing-Animation的启发下编写加载程序动画，在评论部分我找到了类似的动画代码，但是它都是用JS：https://codepen.io/AbubakerSaeed/full/yLaQVdq制作的。
tl2
.set(".dC-1", { rotate: 0 })
.set(".dC-2", { rotate: 30 })
.set(".dC-3", { rotate: 60 })
.set(".dC-4", { rotate: 90 })
.set(".dC-5", { rotate: 120 })
.set(".dC-6", { rotate: 150 })
.set(".dC-7", { rotate: 180 })
.set(".dC-8", { rotate: 210 })
.set(".dC-9", { rotate: 240 })
.set(".dC-10", { rotate: 270 })
.set(".dC-11", { rotate: 300 })
.set(".dC-12", { rotate: 330 })
.to(".dC-1", {
delay: s,
duration: s,
rotate: 30,
})我试着用它制作纯CSS动画，但是我不知道怎么做。有谁能为我解释一下如何在SCSS中设定这两个时间线，如何将JS代码转换成SCSS？
回答 2
Stack Overflow用户
发布于 2022-02-07 20:06:10
您可以通过跟踪两个动画来做到这一点：
带运动块的out
- showing/hiding
- 旋转平面和静态平面上的div。
您可以同步动画，并在不应该显示的情况下显示/隐藏不同平面上的块。
例如:如果一个旋转需要5秒，那么动画的总数将是10秒。其中5秒是不可见的，其余5秒是可见的。
在这个片段中，我用两个街区做了一个例子。你可以把它扩展到任意多个街区。当这些块应该是看不见的时候，我让它们稍微可见，只是为了显示动画中发生了什么。
body {
background-color: #1f2227;
}
.wrapper {
width: 200px;
height: 200px;
position: relative;
border: 1px solid white;
padding: 20px;
transform: rotate(-90deg)
}
.spinner,
.static {
position: absolute;
left: 50%;
top: 50%;
}
.spinner {
animation: 5s linear infinite spin;
}
.block {
width: 10px;
height: 10px;
background-color: #EEE;
display: inline-block;
position: absolute;
left: calc(50% - 5px);
top: calc(50% - 5px);
}
.static .b1 {
transform: translateX(100px);
animation: 10s ease-in-out infinite hide-1;
}
.static .b2 {
transform: rotate(30deg) translateX(100px);
animation: 10s ease-in-out infinite hide-2;
}
.static .b3 {
transform: rotate(60deg) translateX(100px);
}
.spinner .b1 {
transform: translateX(100px);
animation: 10s ease-in-out infinite go-in-out-1;
}
.spinner .b2 {
transform: rotate(30deg) translateX(100px);
animation: 10s ease-in-out infinite go-in-out-2;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes go-in-out-1 {
0% {
transform: translateX(100px);
opacity: 1;
}
4%,
50% {
transform: translateX(0px);
opacity: 1;
}
54% {
transform: translateX(100px);
opacity: 1;
}
54.1%,
100% {
transform: translateX(100px);
opacity: .1;
}
}
@keyframes go-in-out-2 {
4% {
transform: translateX(100px);
opacity: 1;
}
8%,
46% {
transform: translateX(10px);
opacity: 1;
}
50% {
transform: translateX(100px);
opacity: 1;
}
50.1%,
100% {
transform: translateX(100px);
opacity: .1;
}
}
@keyframes hide-1 {
0% {
opacity: .1;
}
4%,
50% {
opacity: .1;
}
50.1%,
100% {
opacity: 1;
}
}
@keyframes hide-2 {
4% {
opacity: .1;
}
8%,
54% {
opacity: .1;
}
54.1%,
100% {
opacity: 1;
}
}<div class="wrapper">
<div class="static">
<div class="block b1"> </div>
<div class="block b2"> </div>
<div class="block b3"> </div>
</div>
<div class="spinner">
<div class="block b1"> </div>
<div class="block b2"> </div>
</div>
</div>
Stack Overflow用户
发布于 2022-02-09 09:40:20
非常感谢拉尔斯。我正在开发它12个街区，但动画是疯狂的。也许我计算的时间或百分比是错的？
下面是我的代码(为了更清楚起见，在scss中)：
.spinner {
animation: 5s linear infinite spin;
}
$rotation: 0deg;
.static {
@for $i from 1 to 12 {
.b#{$i} {
transform: rotate($rotation) translateX($loader-size / 2);
animation: 10s ease-in-out infinite hide-#{$i};
}
$rotation: $rotation + 30deg;
}
}
$rotation: 0deg;
.spinner {
@for $i from 1 to 12 {
.b#{$i} {
transform: rotate($rotation) translateX($loader-size / 2);
animation: 10s linear infinite go-in-out-#{$i};
}
$rotation: $rotation + 30deg;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
$first: 0;
$second: 4;
$third: 50;
$fourth: 54;
$fifth: 54.1;
@for $i from 1 to 12 {
@keyframes go-in-out-#{$i} {
#{$first * 1%} {
transform: translateX($loader-size / 2);
opacity: 1;
}
#{$second * 1%},
#{$third * 1%} {
transform: translateX($block-size * ($i - 1));
opacity: 1;
}
#{$fourth * 1%} {
transform: translateX($loader-size / 2);
opacity: 1;
}
#{$fifth * 1%},
100% {
transform: translateX($loader-size / 2);
opacity: 0;
}
}
$first: $first + 4;
$second: $second + 4;
$third: $third - 4;
$fourth: $fourth - 4;
$fifth: $fifth - 4;
}
$first-2: 0;
$second-2: 4;
$third-2: 50;
$fourth-2: 50.1;
@for $i from 1 to 12 {
@keyframes hide-#{$i} {
#{$first-2 * 1%} {
opacity: 0;
}
#{$second-2 * 1%},
#{$third-2 * 1%} {
opacity: 0;
}
#{$fourth-2 * 1%},
100% {
opacity: 1;
}
}
$first-2: $first-2 + 4;
$second-2: $second-2 + 4;
$third-2: $third-2 + 4;
$fourth-2: $fourth-2 + 4;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71007327
复制相关文章
相似问题
腾讯云开发者
