标签：动画 loading lv1 lv3 lv2 transform rotate css size

做一个旋转的 css loading 动画，css 扇形

上效果图

上代码：

<template>
    <div class="loading-circle">
        <div class="lv1"></div>
        <div class="lv2"></div>
        <div class="lv3"></div>
    </div>
</template>

<script>
export default {
    name: "LoadingCircle",
    data(){
        return {

        }
    },
    mounted() {
    },

}
</script>

<style scoped lang="scss">
@import "../assets/scss/plugin";

$height-circle: 200px;

.loading-circle{
    margin: 0 auto;
    position: relative;
    height: $height-circle;
    width: $height-circle;
}
.lv1,.lv2,.lv3{
    @include border-radius(100px);
    position: absolute;
    top: 50%;
    left: 50%;
}

$lv1-size: $height-circle * 0.80;
.lv1{
    border-top: $lv1-size/2 solid $blue;
    border-bottom: $lv1-size/2 solid $purple;
    width: $lv1-size;
    height: $lv1-size;
    @include transform(translate(-($lv1-size/2), -($lv1-size/2)));
    animation: rotate-1 infinite 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

$lv2-size: $height-circle * 0.50;
.lv2{
    border-right: $lv2-size/2 solid $yellow;
    border-left: $lv2-size/2 solid $green;
    width: $lv2-size;
    height: $lv2-size;
    @include transform(translate(-($lv2-size/2), -($lv2-size/2)));
    animation: rotate-2 infinite 1.5s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

$lv3-size: $height-circle * 0.3;
.lv3{
    border-top: $lv3-size/2 solid $magenta;
    border-bottom: $lv3-size/2 solid white;
    width: $lv3-size;
    height: $lv3-size;
    @include transform(translate(-($lv3-size/2), -($lv3-size/2)));
    animation: rotate-3 infinite 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@keyframes rotate-1 {
    from {transform-origin: 0 0;transform: rotate(0deg) translate(-($lv1-size/2), -($lv1-size/2))}
    to {transform-origin: 0 0;transform: rotate(360deg) translate(-($lv1-size/2), -($lv1-size/2))}
}
@-webkit-keyframes rotate-1 {
    from {transform-origin: 0 0;transform: rotate(0deg) translate(-($lv1-size/2), -($lv1-size/2))}
    to {transform-origin: 0 0;transform: rotate(360deg) translate(-($lv1-size/2), -($lv1-size/2))}
}

@keyframes rotate-2 {
    from {transform-origin: 0 0;transform: rotate(0deg) translate(-($lv2-size/2), -($lv2-size/2))}
    to {transform-origin: 0 0;transform: rotate(-360deg) translate(-($lv2-size/2), -($lv2-size/2))}
}
@-webkit-keyframes rotate-2 {
    from {transform-origin: 0 0;transform: rotate(0deg) translate(-($lv2-size/2), -($lv2-size/2))}
    to {transform-origin: 0 0;transform: rotate(-360deg) translate(-($lv2-size/2), -($lv2-size/2))}
}

@keyframes rotate-3 {
    from {transform-origin: 0 0;transform: rotate(0deg) translate(-($lv3-size/2), -($lv3-size/2))}
    to {transform-origin: 0 0;transform: rotate(360deg) translate(-($lv3-size/2), -($lv3-size/2))}
}
@-webkit-keyframes rotate-3 {
    from {transform-origin: 0 0;transform: rotate(0deg) translate(-($lv3-size/2), -($lv3-size/2))}
    to {transform-origin: 0 0;transform: rotate(360deg) translate(-($lv3-size/2), -($lv3-size/2))}
}

</style>

不解释了，直接看源代码 https://github.com/KyleBing/voila/blob/master/src/components/LoadingCircle.vue

标签：动画,loading,lv1,lv3,lv2,transform,rotate,css,size
来源： https://blog.csdn.net/KimBing/article/details/123589949

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。