50projects50days知识点-23-kinetic-loader

示例网址：

https://50projects50days.com/projects/kinetic-loader/
http://50projects.tc.cluski.top/50projects50days/kinetic-loader/

效果：

思路：

使用了animation动画，在此例子中是这么写的：

.kinetic::after,
.kinetic::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 50px dashed transparent;
    border-bottom-color: #fff;
    animation: rotateA 2s linear infinite 0.5s;
}

.kinetic::after {
    transform: rotate(90deg);
    animation: rotateB 2s linear infinite;
}

/*动画都是定义的关键帧*/
@keyframes rotateA {
    0%, 25% {
        transform: rotate(0deg);
    }
    50%, 75% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotateB {
    0%, 25% {
        transform: rotate(90deg);
    }
    50%, 75% {
        transform: rotate(270deg);
    }
    100% {
        transform: rotate(450deg);
    }
}

❗ 需要注意的是，@keyframes中都是定义的关键帧。在此例子中，动画时长为2s，每个@keyframes都将动画分割成了4个部分，定义了3个关键帧。rotateA在第一个0.25s的时候处于旋转0度的位置上，在第二个0.25s的时候由0度转为180度的过程中，在第三个0.25s的时候处于旋转180度的位置上，在第四个0.25s的时候由180度转为360度的过程中。

在CSS中画三角形

border: 50px solid transparent;

参考链接：

(136条消息) CSS实现三角形（详细）_css 三角形_✪憑星月✪的博客-CSDN博客