5分钟写一个炫彩加载小球

Posted 2021-05-16 MaNqo

最近回来巩固CSS3的知识了，顺便做几个小案例

效果展示

• 加模糊动画效果filter: hue-rotate(30deg);
  

• 没有加模糊度的效果
  

• 加了模糊度的效果(根据喜好通过filter: blur()改变模糊程度)

实现思路

1. 创建两个圆圈形成同心圆
2. 改变大圆的背景颜色
3. 将一部分背景颜色设为transparent, 形成一个看起来不完整的圆。
4. 添加动画

// 背景颜色可以自己调，我这个可能有点丑hahaha
    background: linear-gradient(45deg, transparent 40%, rgb(218, 255, 170) 50%,rgb(63, 95, 184) 100%);

代码

html

<div class="ballWrap">
        <div class="ball">
            <div class="innerBall"></div>
        </div>
    </div>

css

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: black;
}

.ballWrap {
    width: 100px;
    height: 100px;
    margin: 150px auto;
}

.ball {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(45deg, transparent 40%, rgb(218, 255, 170) 50%,rgb(63, 95, 184) 100%);
    filter: blur(2px);
    animation: animate .7s linear infinite;
}

.innerBall {
    position: absolute;
    width: 80px;
    height: 80px;
    top: -50%;
    left: -50%;
    margin-top: 60px;
    margin-left: 60px;
    border-radius: 50%;
    background-color: black;
}

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}