纯CSS实现圆环渐变过渡加载动画

最新推荐文章于 2025-09-27 12:30:48 发布

原创

最新推荐文章于 2025-09-27 12:30:48 发布 · 9.2k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #动画

本文介绍如何使用CSS3的属性创建圆环渐变过渡加载动画，通过结合左右两个渐变半圆，并利用遮罩效果，形成美观的加载环。内容详细讲解了实现过程并展示最终效果。

主要是从 CSS3 中的 linear-gradient @keyframes 和 border-radius等属性上下手，兼容到 IE10

box1 和 box2 分别为左右两个渐变半圆，结合到一起就成了一整个渐变圆， box3 圆的半径稍小，遮盖在整个渐变圆上，背景为白色，产生渐变圆环的效果。

效果图如下：

这里写图片描述

HTML:

<div class='box'>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

CSS:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Quiet-Night

关注关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
5
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

纯CSS3实现的多层圆环loading加载动画特效源码.zip

11-20

【标题】"纯CSS3实现的多层圆环loading加载动画特效源码.zip"涉及到的主要知识点是CSS3的动画（Animation）和过渡（Transition）效果，以及如何利用这些特性创建复杂的图形，特别是圆环形状的加载动画。CSS3是CSS...

纯CSS3实现的绿色Loading加载动画特效源码.zip

11-20

此压缩包“纯CSS3实现的绿色Loading加载动画特效源码.zip”提供了使用CSS3技术创建的绿色加载动画效果的源代码。这个加载动画通常用于网站或应用中，向用户显示数据正在加载的过程，提升用户体验。 1. CSS3关键帧...

5 条评论您还未登录，请先登录后发表或查看评论

【css】圆形加载动效

weixin_50636536的博客

03-22

547

【代码】【css】圆形加载动效。

CSS 实现加载动画之二-圆环旋转

weixin_30565327的博客

09-24

508

上次简单的介绍了下如何用代码实现菊花旋转的加载动画，动画点击，这次继续我们的动画系列，实现另外一种加载动画，圆环旋转。与上次不同的是，菊花旋转是通过改变元素透明度来实现动画，这次因为考虑到元素叠加，加上元素本身带有背景色，如果改变透明度会影响效果，所以直接改变元素的背景颜色，加上适当的延时，就可以实现这种圆环的效果。动画实现的根本原理就是将每个需要变化的元素以及变化的过程分离出来。所有的动画在...

彩虹转盘不难做！带你轻松搞懂 CSS 的 repeating-conic-gradient

热门推荐

时光清浅处，一步一安然

03-25

1万+

CSS实现渐变圆环今天呢，我们来讲讲使用CSS实现渐变圆环。 linear-gradient实现首先呢，我们的初步思维应该是画一个圆，通过背景色渐变来实现一个基本的圆形渐变，再定位一个纯色背景色的圆形覆盖在上一个圆形，来创建一个从视角上看起来是渐变的圆环。代码如下： <div class="circle"> <div class="content"></div> </div> .circle { width: 206px;

精选资源

纯CSS3多层圆环加载动画特效特效代码

03-20

总之，纯CSS3多层圆环加载动画特效是一种充分利用CSS3新特性的优秀实践，它展示了在不依赖JavaScript的情况下实现动态视觉效果的可能性。通过学习和理解这个特效，开发者可以提升自己的CSS技能，更好地进行网页交互...

16款纯CSS3实现的loading加载动画特效代码

03-20

"16款纯CSS3实现的loading加载动画特效代码"就是一个专门针对这一需求的资源集合。这个资源包含了一系列无需JavaScript辅助，完全使用CSS3技术实现的加载动画效果。 CSS3是层叠样式表的第三版，其引入了许多新特性...

css 3d环形,css环形加载动画

weixin_39624332的博客

08-04

333

@charset "utf-8";* {border:0;box-sizing:border-box;margin:0;padding:0;}:root {font-size:calc(16px + (24 - 16)*(100vw - 320px)/ (1280 - 320));}body,.preloader {display:flex;}body {background:#000;color...

CSS3环形文字加载动画特效

06-24

CSS3环形文字加载动画特效是一款环形文字loading文字3D环形动画特效。

CSS+HTML实现环形加载动画

weixin_45937700的博客

11-20

555

css3炫酷环形背景动画

ICode联盟

04-24

426

下载地址很酷的网页背景动画效果，css3环形飞入的特效。 dd:

HTML5+CSS3小实例：简单又别致的环形加载动画

艾恩小灰灰的博客

04-15

201

实例：简单又别致的环形加载动画。技术栈：HTML+CSS。

HTML5+CSS3小实例：动感的环形加载动画

艾恩小灰灰的博客

09-22

408

实例：动感的环形加载动画。技术栈：HTML+CSS。

别用图片了，CSS 遮罩合成实现带圆角的环形 loading 动画

Jack, what else can you do besides holding your little darling?

04-10

1177

上面的实现虽然很好的满足了需求，但是，还是有些CSS设计问题。比如，我如果需要改变 loading 的颜色，需要改变两个地方。很明显，这样的实现不太符合 DRY（Don't Repeat Yourself）原则。有一个比较简单思路可以用 CSS 变量来传递。loading{这样每次都只需要改变一个变量就行了。除了这种方式以外，其实还有一点需要考虑，为啥背景不能干净一点、纯粹一点呢？换个说法，现在的背景实现对于不了解的同学来讲，可能会很费劲，能否将这些细节隐藏起来，更直观地去自定义颜色呢？

简单的css动画-加载时的圆形滚动条

zhangawei123的博客

09-27

1238

简单的css动画-加载时的圆形滚动条我们在播放视频，在视频的加载中，经常出现一个圆点组成的圆形滚动条的加载效果，今天我们就尝试使用css的动画效果来实现这个效果。

纯 HTML + CSS 实现圆形 loading 动画效果

廖若星辰-LTY

12-12

1693

使用纯 HTML + CSS 实现圆形 loading 加载动画效果

css圆形进度条动画

04-30

CSS 圆形进度条动画是通过 CSS3 中的 @keyframes 规则和 transform 属性来实现的。以下是一个简单的圆形进度条动画示例： HTML 代码： ``` <div class="progress"> <div class="progress-bar"></div> </div> ``` CSS 代码： ``` .progress { position: relative; width: 100px; height: 100px; border-radius: 50%; background-color: #ddd; } .progress-bar { position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: #007bff; transform-origin: center center; animation: progress 2s linear forwards; } @keyframes progress { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } ``` 解释一下上述代码： 1. `.progress` 类定义了一个圆形容器，其宽度和高度都为100px，且使用了圆角半径为50%的圆角。 2. `.progress-bar` 类定义了一个圆形进度条，其宽度和高度都为100%（与父容器相同），并且使用了圆角半径为50%的圆角。通过 `transform-origin` 属性设置其变换的中心点为容器的中心。 3. 使用 `animation` 属性指定了动画名称为 `progress`，持续时间为2秒，动画速度为线性，结束时保持最后一帧状态（`forwards`）。 4. 在 `@keyframes` 规则中定义了 `progress` 动画的两个关键帧。从 `0deg` 开始旋转，到 `360deg` 结束旋转，完成一个完整的进度。