CSS3实现简单的Loading...动画

最新推荐文章于 2024-06-25 10:37:03 发布
最新推荐文章于 2024-06-25 10:37:03 发布
阅读量311 收藏
点赞数
分类专栏： CSS3 文章标签： @keyframes
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HHH_LLL/article/details/99692076
版权
这篇博客分享了如何利用CSS3的@keyframes规则来实现一个简单的Loading效果，提供了HTML和CSS代码示例，适用于项目中加载等待场景。
摘要由CSDN通过智能技术生成

前言：很久没更新，最近项目中做了个简单的Loading效果，上传供大家查阅或找灵感。

效果：其实是动态的效果，大家可以自己去尝试

在这里插入图片描述

代码：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="./index.css">
</head>
<body>
	<div>
		<button type="button" onclick=
最低0.47元/天 解锁文章
HHH_LLL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3-loading动画
liuhao9999的博客
07-28 286
代码】CSS3-loading动画。
CSS制作简单loading动画
weixin_30546933的博客
04-17 261
　　曾经以为，loading的制作需要一些比较高深的web动画技术，后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈，并不都是将gif图放进去，有些就是画个静止图像，然后让它旋转就完了。gif图也可以，但是加载时间比较长。 　　CSS的animation可以做出大多数的loading，比如： loading1： 1、HTML： 1 <div id...
CSS3实现8种Loading效果
最新发布
coldriversnow的专栏
06-25 573
【代码】CSS3实现8种Loading效果。
css3实现loading动画
chenzfyy的博客
10-19 613
Document .box{width:100%;padding:3%;box-sizing:border-box;overflow:hidden} .box .loader{width:30%;float:left;height:200px;margin-right:3%;border:1px #ccc solid;box-sizing:border-box;display:flex
CSS3-loading动画（三）
weixin_30470857的博客
07-12 184
分享继续，图片看得不真切 在线演示demo：http://liyunpei.xyz/loading.html 十一、效果十一 四个小球分别包含于四个正方形div，将小球相对于正方形定位（top：0；left：0），将方形div设置旋转，使小球分别位于四角，然后使用关键帧动画控制小球在当前位置与靠近中心点的位置之间来回移动 {animation: flor_move 1s 0s...
CSS：一个简单的loading动画
QD的博客
05-19 695
<div id="circle"></div> <div id="inner"> <div id="spiner"></div> <div id="filler"></div> <div id="masker"></div> </div>#inner { position: absolute; left: 24px; top: 24px; width: 100px;
CSS3加载动画Loading代码.zip
05-14
"CSS3加载动画Loading代码.zip" 是一个包含多种CSS3实现的加载动画示例的压缩包，适用于网页加载等待场景，能够提升用户体验，使用户在等待内容加载时有一个视觉上的反馈。 首先，我们要了解CSS3中的关键帧动画（@...
css3实现加载loading特效小动画效果
06-12
总结来说，CSS3加载loading特效小动画效果是通过结合关键帧动画、变换（transform）、过渡（transition）以及颜色和背景的动态变化来实现的。这些技术的运用让网页加载不再枯燥，而是成为了一种视觉享受。在实际开发...
css3实现loading动画加载.zip
11-17
本资源包"css3实现loading动画加载.zip"提供了一些实例，帮助我们理解如何使用CSS3实现各种loading动画。 1. **关键帧动画（@keyframes）** CSS3的关键帧动画允许开发者定义一个动画过程中的多个状态，浏览器会...
CSS3加载loading图标动画.zip
05-14
这个“CSS3加载loading图标动画.zip”压缩包文件正是专注于利用CSS3来制作加载图标动画的资源集合，为开发者提供了丰富的灵感和实例。 加载图标动画在网页设计中起着至关重要的作用，它能够告诉用户网站或应用正在...
10款CSS3进度条Loading动画.zip
11-16
"10款CSS3进度条Loading动画.zip"这个压缩包包含了一系列使用CSS3技术实现的加载效果，旨在为网站或应用程序的加载过程增添视觉吸引力。下面将详细介绍这些知识点。 **CSS3** CSS3是层叠样式表（Cascading Style ...
CSS3动画之DIY Loading动画
12-13
首先要知道什么是CSS3动画？然后才能做出自己想要的动画效果。下面会通过3个简单的Loading动画效果来对CSS3 animation动画做一个简单介绍，希望对你有用。 动画是使元素从一种样式逐渐变化为另一种样式的效果。 您可以改变任意多的样式任意多的次数。 使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。 要创建CSS3动画，那么首先就要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。 当在
用css3实现一个简单的loading动画
不想翻身的咸鱼
04-25 936
在访问各种网站的时候我们经常会看到各式各样的加载动画，超级炫酷，有的是gif图片做成的，有的是svg做成的，有的是通过js控制dom做成的，在css3出现以后，好多都是纯css的，本着程序员造轮子的精神，自己决定用css实现自己网站的加载动画。效果如下（虽然不是很炫酷，嘿嘿） 下面我们开始动手，在开始前，我们分析一下这个动画是如何形成的 .最基本的旋转。 很明显6个白色圆点以半径r绕着中心...
css实现loading效果
tx_xiaobai的博客
11-19 374
一、 <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> .lo...
loading css3动画
chenxi1025的博客
01-05 533
现在很多的网站网页在加载的时候都有一个加载的动画标识，有些事用gif动画图片，有些使用存css3写的，还有一些是使用js实现的，今天我就来用存css3来写一个加载的动画效果。 该效果使用咯css3的transform 里面的scale(缩放)、rotate(旋转)、translate(位移)，还使用了css3的动画keframes    animation。 思路： 1.定义一个大盒子，来装
css3-loading动画
qq_41481924的博客
07-24 298
1.源码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=, initial-scale=1.0"&gt; &lt;meta
CSS3--loading动画
liuhao9999的博客
07-28 260
代码】CSS3--loading动画。
css实现loading动画
m0_57877734的博客
12-29 1369
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lo.
css3 实现loading动画
花神的博客
09-07 554
&lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
css3实现loading点的加载动画
06-10
可以使用CSS3的伪元素和动画属性来实现loading点的加载动画，以下是一个简单的示例： HTML代码： ```html <div class="loading"> <div></div> <div></div> <div></div> </div> ``` CSS代码： ```css .loading { display: flex; justify-content: center; align-items: center; height: 100vh; } .loading div { width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; background-color: #000; animation: loading 0.8s ease-in-out infinite; } .loading div:nth-child(2) { animation-delay: 0.2s; } .loading div:nth-child(3) { animation-delay: 0.4s; } @keyframes loading { 0% { transform: scale(0); } 50% { transform: scale(1); } 100% { transform: scale(0); } } ``` 解释一下： - 父元素 `.loading` 使用 flex 布局，居中子元素； - 子元素 `.loading div` 是三个小圆点，通过 `margin` 和 `border-radius` 等属性设置样式； - 使用 `animation` 属性定义动画，并通过 `animation-delay` 属性设置不同的延迟时间，让三个小圆点错开； - `@keyframes` 规则定义动画的关键帧，通过 `transform: scale()` 属性控制圆点的大小，实现点的出现和消失效果； - 最后，把三个小圆点放到一个父元素中，就可以实现loading点的加载动画了。 希望这个示例能够帮到你。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值