简易加载效果----疯狂吃豆人

Posted 2021-05-16 MaNqo

不知道在哪看到这个加载，看得入神就想写一个hhhh

疯狂吃豆人

实现思路

1. 创建两个没有border-right的圆
2. 通过正反旋转45度展示吃的效果
3. 创建3个小球，动画效果处理小球平移

代码

html

div class="beanWrap">
        <div class="bean"></div>
        <div class="bean"></div>
        <i class="ball"></i>
        <i class="ball"></i>
        <i class="ball"></i>
    </div>

css

* {
    margin: 0;
    padding: 0;
}
body {
    background: linear-gradient(45deg, rgb(0, 0, 0) 0%,rgb(73, 73, 116) 100%);
}

.beanWrap {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 150px auto;
}

.bean {
    position: absolute;
    width: 0;
    border-radius: 50%;
    border: 25px solid rgb(255, 200, 49);
    border-right: 25px solid transparent;
}
.bean:nth-child(1) {
    animation: animateOne .7s linear infinite;
}
.bean:nth-child(2) {
    animation: animateTwo .7s linear infinite;
}

@keyframes animateOne {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(45deg);
    }
}
@keyframes animateTwo {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(-45deg);
    }
}

.ball {
    position: absolute;
    width: 6px;
    height: 6px;
    transform: translate(80px,21px);
    background-color: rgb(255, 200, 49);
    border-radius: 50%;
    filter: blur(1px);
    animation: ball 1s linear infinite;
}
.ball:nth-of-type(1) {
    animation-delay: 0s;
}
.ball:nth-of-type(2) {
    animation-delay: .33s;
}
.ball:nth-of-type(3) {
    animation-delay: .66s;
}
@keyframes ball {
    50% {
        opacity: .4;
        transform: translate(36px,21px);
    }
    100% {
        transform: translate(80px,21px);
    }
}

a…不能再偷懒了orz