CSS多种Loading动效

最新推荐文章于 2024-05-08 11:04:59 发布
最新推荐文章于 2024-05-08 11:04:59 发布
阅读量2.7k 收藏 9
点赞数 1
分类专栏： css 文章标签： 动画 css3
原文链接：https://juejin.cn/post/7018466377551839269
版权

本篇文章给大家分享8种CSS实现loading加载特效的小技巧，希望对大家有所帮助！

loader-1

这应该是最简单的CSS加载了。在圆圈上有一个红色的圆弧，仔细观察会发现，这个圆弧正好是1/4.

实现逻辑:

一个宽高相等容器，设定border为白色。然后给底边bottom设置红色,

当设定border-radius是50%，那他正好可以变成一个圆。

给这个圆加上旋转的动画。CSS中旋转角度的动画是rotate()我们只要给他设定从0旋转到360即可。（这个动画会在下面多次使用，下文不再赘述，共用的）

 @-webkit-keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

完整代码

.loader-1 {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: #FF3D00;
    border-radius: 50%;
    display: inline-block;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}
loader-2

观察：外围是一个圈，内部有一个红色的元素在转动。

实现逻辑

一个宽高相等的容器，加上白色的边，50%的圆角。这样就是外围的圈。

里面的红色是如何实现？这里有两个思路。1；新增一个小div，让他在里面，并且跟loader-1一样，设置一个红色的底边。2：使用::after，思路跟方法1 一致。

加上旋转的动画。

完整代码

.loader-2 {
    width: 48px;
    height: 48px;
    border: 3px solid #FFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}
.loader-2:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-bottom-color: #FF3D00;
}

loader-3

观察：内部是一个圆，外围是一个红色的圆弧。

实现逻辑

这个加载效果跟loader-2是一致的，区别就是红色圆弧在内外。

完整代码

.loader-3 {
    width: 48px;
    height: 48px;
    border: 3px solid #FFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}
.loader-3:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-bottom-color: #FF3D00;
}

loader-4

观察：外围是一个圆，内部有两个圆，这两个圆正好是对称的。

实现逻辑

一个宽高相等的容器，加上白色的边，50%的圆角。这样就是外围的圈。

里面的红色是如何实现？这里有两个思路。1；新增两个小div，背景颜色设置为红色，然后设置50%圆角，这样看上去就像是两个小点。2：使用::after和::before，思路跟方法1 一致。

加上旋转的动画。

完整代码

.loader-4 {
    width: 48px;
    height: 48px;
    border: 2px solid #FFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}
.loader-4:before {
    left: auto;
    top: auto;
    right: 0;
    bottom: 0;
    content: "";
    position: absolute;
    background: #FF3D00;
    width: 6px;
    height: 6px;
    transform: translate(-150%, -150%);
    border-radius: 50%;
}
.loader-4:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: #FF3D00;
    width: 6px;
    height: 6px;
    transform: translate(150%, 150%);
    border-radius: 50%;
}

loader-5

观察：一共是三层，最外层白圈，中间红圈，里边白圈。每一圈都有一个一半圆弧的缺口，外圈和最内圈的旋转方向一致。

实现逻辑

一个宽高相等的容器，加上白色的边，50%的圆角。这样就是外围的圈。

这里的问题是，圈的缺口如何实现，其实很简单，在css中有一个属性值：transparent，利用这个值给边框设置透明，即可实现缺口。

对于内部的红色和白色圆弧，继续使用::after和::before即可。

加上动画，这里有一个反方向旋转的动画(rotationBack)。 这里设置旋转是往负角度，旋转即可反方向旋转。

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

完整代码

.loader-5 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: #FFF #FFF transparent transparent;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}
.loader-5:before {
    width: 32px;
    height: 32px;
    border-color: #FFF #FFF transparent transparent;
    -webkit-animation: rotation 1.5s linear infinite;
    animation: rotation 1.5s linear infinite;
}
.loader-5:after, .loader-5:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px solid;
    border-color: transparent transparent #FF3D00 #FF3D00;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -webkit-animation: rotationBack 0.5s linear infinite;
    animation: rotationBack 0.5s linear infinite; 
    transform-origin: center center; *
}

loader-6

观察：看上去像是一个时钟，一个圆里面有一根指针。

实现逻辑

一个宽高相等的容器，加上白色的边，50%的圆角。这样就是外围的圈。

指针是如何实现的：从这里开始不再讨论新增div的情况。 其实红色的指针就是一个单纯的宽高不一致的容器。

完整代码

.loader-6 {
    width: 48px;
    height: 48px;
    border: 2px solid #FFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}
.loader-6:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    background: #FF3D00;
    width: 3px;
    height: 24px;
    transform: translateX(-50%);
}

loader-7

观察：首先确定几个圈，一共两个。当第一个圈还没消失，第二个圈已经出现。最后出现了类似水波的效果。同时要注意的是，这两个两个圈是一样大的，这是因为他们最终消失的地方是一致的。

实现逻辑

首先确定，这两个圈是否在容器上。上面一直时在容器上添加边框，当然这个例子也可以，但是为了实现的简单，我们把这两个圈放在::after和::before中。

加上动画，这里的圈是逐渐放大的，在CSS中scale用来放大缩小元素。同时为了实现波纹逐渐清晰的效果，我们加上透明度。

  @keyframes animloader7 {
    0% {
      transform: scale(0);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }

完整代码

这里因为两个圈是先后出现的，所以需要一个圈加上delay

.loader-7 {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
}
.loader-7::after, .loader--7::before {
    content: "";
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #FFF;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: animloader7 2s linear infinite;
    animation: animloader7 2s linear infinite;
}
.loader-7::after {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.loader-7::after, .loader-7::before {
    content: "";
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #FFF;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: animloader7 2s linear infinite;
    animation: animloader7 2s linear infinite;
}
loader-8

观察：一段圆弧加上一个三角形。

实现逻辑

一个宽高相等的容器，加上白色的边，50%的圆角。这样就是外围的圈。

transparent，利用这个值给边框设置透明，即可实现缺口。

在:after上创建箭头。CSS中我们有多种方法实现三角形，其中最简单是使用border，不需要给元素设置宽高，只需要设置border的大小，并且只有一边设置颜色。

border: 10px solid transparent;
border-right-color: #FFF

加上旋转动画。

完整代码

.loader-8 {
    width: 48px;
    height: 48px;
    border: 3px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}
.loader-8:after {
    content: "";
    position: absolute;
    left: 20px;
    top: 31px;
    border: 10px solid transparent;
    border-right-color: #FFF;
    transform: rotate(-40deg);
}

hyupeng1006
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS多行省略
weixin_45732235的博客
11-20 84
CSS多行省略号 技术蛋老师
CSS 动画：纯 CSS 实现 loading 效果
人间草木
12-03 399
效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta ht...
详解纯CSS3制作的20种loading动效
09-27
本篇文章主要介绍了详解纯CSS3制作的20种loading动效，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css实现loading样式
最新发布
weixin_55688275的博客
05-08 294
/div></div>to {
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
12-01
JQuery+Bootstrap 自定义全屏Loading插件 /** * 自定义Loading插件 * @param {Object} config * { * content[加载显示文本], * time[自动关闭等待时间(ms)] * } * @param {String} config * 加载显示文本 * @refer 依赖 JQuery-1.9.1及以上、Bootstrap-3.3.7及以上 * @return {KZ_Loading} 对象实例 */ function KZ_Loading(config) { if (this instanceof
【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）
热门推荐
赏樱看雪撸代码
07-11 1万+
CSS3实现多种load加载效果，纯CSS3实现多种加载中效果，纯CSS3实现28种加载动态效果，页面实现loading效果，好看的loading动态特效，animation与transform的灵活应用。
css实现多个loading动画效果
温情
12-13 2711
在开发中，为了提高用户体验，通常在加载数据的时候会给一个。根据序号查看代码，尾部有整合代码。提示，这里分享几个简单的。
纯前端css实现酷炫loading动画
qq_45457134的博客
07-06 1366
纯前端css实现酷炫loading动画
纯CSS3实现各种loading效果
qq_39025670的博客
07-26 9518
通过CSS3实现一些炫酷的loading动画效果...
纯CSS3 Loading文字加载动效.zip
10-15
通过这些CSS3特性，开发者可以创建出多种多样的文字加载动效，如文字逐字显示、文字旋转、颜色渐变、闪烁效果等。在实际项目中，结合JavaScript可以实现更复杂的交互，如响应用户操作、动态调整加载进度等。因此，这...
三圆点CSS3 loading加载动画特效库
12-13
"三圆点CSS3 loading加载动画特效库"，即`three-dots.css`，为开发者提供了一套高效、美观且易于集成的加载动画解决方案。 **CSS3技术** CSS3是CSS（层叠样式表）的最新版本，引入了诸多新特性，如选择器、边框和...
CSS3 Loading英文加载动画效果
06-24
"CSS3 Loading英文加载动画效果"是一个专注于利用CSS3技术实现的动态加载效果，主要用于在网页加载时展示。 CSS3，全称Cascading Style Sheets Level 3，是CSS的第三个主要版本，引入了大量新的特性和功能，极大地...
CSS3加载动画网站Loading特效
06-24
**CSS3加载动画网站Loading特效**是网页设计中不可或缺的一部分，它在用户等待网页完全加载时提供视觉反馈，提升用户体验。这些特效利用了CSS3的新特性，如转换（Transforms）、过渡（Transitions）和动画...
纯CSS3加载动画Loading特效特效代码
03-20
CSS3动画允许开发者通过定义关键帧（Keyframes）来创建复杂的动效。`@keyframes`规则定义了一个动画的过程，从开始到结束的各个阶段，每个阶段可以设置不同的样式。例如，一个简单的旋转动画可以这样编写： ```css ...
轻松掌握 CSS，实现 loading 加载中的多种形式
Shids_的博客
02-08 6108
轻松掌握 CSS，实现 loading 加载中的多种形式
css动画----loading加载动画
m0_47531829的博客
03-22 7168
今天做项目的时候，一个loading加载动画，让我搞了很长时间，后来ui给了看了一个loading加载源码，仿照着源码，把样式改了一下，成功了，并且通过ui给的链接，发现里面有很多优秀的源码可以借鉴，这是加载动画的源码，loading加载动画， 这是自己封装的html部分 {/* 登录时loading加载动画 */} <div className="login-loader-wrap" > <div className="loader"></div>
CSS实现loading加载动画
weixin_43541158的博客
04-25 1091
CSS实现loading加载动画效果
CSS - 实现Loading加载动画
CodingmanNAN的博客
01-31 5951
用CSS都用实现一个loading的加载动画
css 图片闪光动效
07-28
回答: 要实现CSS图片闪光动效，你可以使用CSS的animation属性和@keyframes规则。首先，你需要在CSS中定义一个@keyframes规则，用于描述闪光动画的关键帧。例如，你可以设置一个从透明度为0到透明度为1的关键帧。然后，你可以将这个动画应用到你的图片上，通过设置animation属性来指定动画的名称、持续时间、重复次数等。在你提供的HTML代码中，你可以在img标签上添加一个class属性，比如"glow-effect"，然后在CSS中定义这个class的样式，包括animation属性和@keyframes规则。这样，图片就会显示闪光动效了。以下是一个示例代码: ```css @keyframes glow { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .glow-effect { animation: glow 2s infinite; } ``` 在上面的代码中，@keyframes规则定义了一个名为"glow"的动画，从0%到50%的时间内，透明度从0变为1，然后在50%到100%的时间内，透明度再次变为0。然后，通过设置animation属性，将这个动画应用到具有"class"为"glow-effect"的元素上，持续时间为2秒，无限重复播放。 你可以将上述CSS代码添加到你的CSS文件中，或者直接在HTML文件的`<style>`标签中添加。然后，将你的图片的class设置为"glow-effect"，就可以实现图片闪光动效了。 #### 引用[.reference_title] - *1* [纯CSS发光动效-CSS制作logo发光效果](https://blog.csdn.net/m0_60965117/article/details/121475100)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值