使用CSS+SVG实现加载动画

使用CSS+SVG实现加载动画

效果展示

CSS知识点

• SVG元素使用
• SVG相关CSS属性运用

整体页面布局

<section><div class="box"><div class="loader"><svg><circle cx="40" cy="40" r="40"></circle></svg></div></div><div class="box"><div class="loader"><svg><circle cx="40" cy="40" r="40"></circle></svg></div></div><div class="box"><div class="loader"><svg><circle cx="40" cy="40" r="40"></circle></svg></div></div>
</section>

说明：这里定义了三个 box 元素，其中两个 box 主要是实现阴影效果。

定义场景样式和相关动画

section {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #072631;animation: animateBg 10s linear infinite;
}
/* 背景颜色改变动画 */
@keyframes animateBg {0% {filter: hue-rotate(0deg);}100% {filter: hue-rotate(360deg);}
}

定义 svg 和 circle 元素样式

svg {position: relative;width: 90px;height: 90px;z-index: 1000;
}
svg circle {width: 100%;height: 100%;fill: none;stroke-width: 10;stroke: #25e6ff;stroke-linecap: round;transform: translate(5px, 5px);stroke-dasharray: 250;stroke-dashoffset: 249;
}

完成上述代码后效果如下：

为 svg 和 circle 元素添加动画

svg {animation: fixAnimation 2s ease-in-out infinite;
}
/* SVG元素主要是负责 */
@keyframes fixAnimation {0% {transform: rotateY(0deg);}50% {transform: rotateY(0deg);}50.00000001%,100% {transform: rotateY(181deg);}
}
svg circle {animation: animate 2s ease-in-out infinite;
}
/* 实现加载动画，动画实现的时候开始和结束进度设置为对称，这样动画执行的时候会比较平滑 */
@keyframes animate {0%,2% {stroke-dashoffset: 249;}50% {stroke-dashoffset: 125;}99%,100% {stroke-dashoffset: 249;}
}

实现上述效果后如下：

对三个 box 元素进行样式处理

.box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 150px;display: flex;justify-content: center;/* 倒影效果 */-webkit-box-reflect: below -80px linear-gradient(transparent, #0004);
}
.box:nth-child(2) {filter: blur(10px);
}.box:nth-child(3) {filter: blur(20px);
}

实现上述效果后，基本可以考到最终效果动画，但是后续还有一些动画需要处理。

加载动画进行旋转

.loader {animation: positionX 2s linear infinite;
}@keyframes positionX {0% {transform: rotate(180deg) translateX(-40px);}100% {transform: rotate(180deg) translateX(40px);}
}

完整代码下载

完整代码下载