CSS 3.0实现加载动画

给大家分享一个用CSS 3.0实现加载动画，效果如下：

以下是代码实现，欢迎大家复制、粘贴和收藏。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 3.0实现加载动画</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}section {display: flex;align-items: center;justify-content: center;min-height: 100vh;background: #042104;animation: animateBackground 10s linear infinite;}@keyframes animateBackground {0% {filter: hue-rotate(0deg);}100% {filter: hue-rotate(360deg);}}section .loader {position: relative;width: 120px;height: 120px;}section .loader span {position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform: rotate(calc(18deg * var(--i)));}section .loader span::before {content: '';position: absolute;top: 0;left: 0;width: 15px;height: 15px;background: #00ff0a;border-radius: 50%;box-shadow: 0 0 10px #00ff0a,0 0 20px #00ff0a,0 0 40px #00ff0a,0 0 80px #00ff0a,0 0 100px #00ff0a;animation: animate 2s linear infinite;animation-delay: calc(0.1s * var(--i));}@keyframes animate {0% {transform: scale(1);}80%,100% {transform: scale(0);}}</style></head><body><section><div class="loader"><span style="--i:1"></span><span style="--i:2;"></span><span style="--i:3;"></span><span style="--i:4;"></span><span style="--i:5;"></span><span style="--i:6;"></span><span style="--i:7;"></span><span style="--i:8;"></span><span style="--i:9;"></span><span style="--i:10;"></span><span style="--i:11;"></span><span style="--i:12;"></span><span style="--i:13;"></span><span style="--i:14;"></span><span style="--i:15;"></span><span style="--i:16;"></span><span style="--i:17;"></span><span style="--i:18;"></span><span style="--i:19;"></span><span style="--i:20;"></span></div></section>
</body></html>

CSS 3.0实现加载动画相关推荐

HTML+CSS制作Windows启动加载动画
HTML+CSS制作Windows启动加载动画效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">&l ...
心形源码HTML,纯CSS实现心形加载动画（附源码）
本篇文章给大家介绍一下纯CSS实现心形加载动画的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 废话不多说上代码,代码很简答,研究一下就明白了,有不明白的可以问我. .hear ...
css 实现心形加载动画
文章目录前言一.html代码二.css 总结前言心形加载动画提示:以下是本篇文章的代码内容,供大家参考,相互学习一.html代码代码如下: <html><head&g ...
html彩虹效果文字,CSS 实现彩虹条加载动画特效
利用css的delay延迟以及旋转动画效果实现彩虹条加载动画,纯css没有一行js代码,喜欢的搞起来. HTML结构: CSS结构 body { background-color:#000; } .b ...
css线条伸缩_CSS3加载动画之线条伸缩
加载动画之线条伸缩效果图思路通过 3 个线条高度的动态变化实现加载动画,为了突出效果,给线条增加了阴影.对动画而言,keyframes 和 animation 是必不可少的技巧.同时本例中使用了 ...
HTML5+CSS3小实例：手风琴式加载动画
HTML5+CSS3做一个手风琴式的加载动画,这动画.这质感.这配色,就问你喜不喜欢?!这个案例的知识点主要是:css的自定义属性 + 动画延迟 + 颜色滤镜(hue-rotate). 效果: 源码: ...
Web 页面加载动画
Web 页面加载动画在 Web 开发中,通常会需要在页面中添加加载动画,以减少用户等待页面加载的焦虑感.下面介绍一个常用的页面加载动画的实现方法,同时介绍其 CSS 和 JavaScript 代码. ...
lua/cocos加载动画以及可以使用加载纹理的方式来替换图片并且加载个人制作的艺术字体(fnt字体)
1.加载spine/json(ExportJson)骨骼动画现在用的比较多 local spineAnim = sp.SkeletonAnimation:create("base/res/ ...
【HTML】三种加载动画
加载动画 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...

CSS 3.0实现加载动画

CSS 3.0实现加载动画相关推荐

最新文章

热门文章