CSS3动画之loading-2

最新推荐文章于 2023-03-07 16:01:53 发布
最新推荐文章于 2023-03-07 16:01:53 发布
阅读量433 收藏
点赞数
分类专栏： css3动画 文章标签： css3 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjnf012/article/details/78754814
版权
本文展示了如何使用CSS3创建一个吸引人的loading动画效果，包括详细的代码示例，可以直接运行。通过HTML和CSS的结合，实现了gif图所示的加载过程。
摘要由CSDN通过智能技术生成

loading效果gif图如下：
这里写图片描述

代码如下：
css:

* {
  padding: 0;
  margin: 0;
}
.loading_box {
  padding-top: 120px;
}
.loading {
  position: relative;
  width: 400px;
  height: 40px;
  background-color: #149fee;
  border: 1px solid #149fee;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background-size: 42px 42px;
  background-image: -webkit-linear-gradient(-45deg, transparent 0px, transparent 12px, #15d1f9 14px, #15d1f9 30px, transparent 30px, transparent 42px, #15d1f
最低0.47元/天 解锁文章
爱编程的兔子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
showloading js css gif动图
02-25
ShowLoading这个jQuery插件设计用于当运行Ajax请求时，可以在屏幕某一特殊区域(id,class或者html标签)覆一张正在加载中的图片。 有时候我们页面调用后台程序时间比较长时，前台页面暴露在用户之下，如果用户点击可能会造成逻辑混乱。这时候，遮罩就起到了很好的效果，在触发后台程序时我们将前台页面遮住，不让操作，同时给予一个程序运行请等待的效果。
纯CSS3文字Loading动画特效
06-24
纯CSS3文字Loading动画特效是一种利用CSS3特性实现的创新加载效果，它将普通的加载指示器与文字结合，为用户提供了更加生动且富有个性化的等待体验。这种动画效果无需JavaScript或者其他复杂的编程语言，只需通过CSS...
css3做一个loading动画效果（详细思路）
小柒的前端之旅
03-05 3339
纯css3的动画做效果： 小人来回移动，碰到小球时，小球消失。 首先，html搭建结构： <body> <div class="wrapper"> <div class="move-box"> <div class=&
css 动画 loading（二）
lz18513030476的博客
03-07 105
使用css实现的一个loading
css3loading状态2
kateLi的专栏
06-22 365
Document .demo{width:100px; height: 100px; margin:30px auto; position: relative;} .demo i{ display: block; border-radius: 50%; border: 2px solid #333; border-color:transparent #333; position: absol
CSS制作简单loading动画
weixin_30546933的博客
04-17 258
　　曾经以为，loading的制作需要一些比较高深的web动画技术，后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈，并不都是将gif图放进去，有些就是画个静止图像，然后让它旋转就完了。gif图也可以，但是加载时间比较长。 　　CSS的animation可以做出大多数的loading，比如： loading1： 1、HTML： 1 <div id...
CSS3动画之DIY Loading动画
12-13
加载动画（Loading Animation）是一种常见的CSS3动画应用，用于展示页面正在加载数据或者处理任务。以下我们将分析两个简单的加载动画示例： **加载动画1：点.gif** 这个动画使用了8个点，每个点通过改变其缩放...
css3实现加载loading特效小动画效果
06-12
CSS3的引入为开发者提供了更多创建动态和交互式元素的工具，其中之一就是制作加载（loading）动画效果。本文将深入探讨如何利用CSS3来实现吸引人的加载特效小动画效果。 首先，CSS3中的关键帧动画（@keyframes）是...
CSS3加载动画Loading代码.zip
05-14
"CSS3加载动画Loading代码.zip" 是一个包含多种CSS3实现的加载动画示例的压缩包，适用于网页加载等待场景，能够提升用户体验，使用户在等待内容加载时有一个视觉上的反馈。 首先，我们要了解CSS3中的关键帧动画（@...
各种网页加载中loadingGIF图片.zip
01-13
各种网页加载中gif图
51种loading.gif图片
05-24
51种gif格式的loading图片,上传只为分享
数十种漂亮的 loading gif 图片
04-02
数十种漂亮的 loading gif 图片
css3制作穿越云层开场动画，css3+js
03-22
使用css3制作纯前端开场动画，穿越云层效果。
酷炫的css3淡出淡进显示开场页面动画效果
09-14
酷炫的css3淡出淡进显示开场页面动画效果
28种CSS3炫酷loading页面加载动画特效代码
05-30
28酷炫吊的CSS3加载效果特效动画代码，分分钟让你的加载超乎你的想象
53种纯CSS3炫酷loading指示器动画特效
shitouPlus的博客
11-06 741
加载动画如果不想用用gif图实现的话，不妨试试css3动画，效果很是很酷的
纯 CSS 实现十个还不错的 Loading 效果
程序员成长指北
05-15 316
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群loading_banner.png在推特上面看到 T. Afif[1] 介绍的十个 Loading 效果。如上图。Yeah，很赞哦，挺实用的，遂记录下来。为保证运行正常，咱先规定下：*{ box-sizing:border-box; } 复制代码1. 平滑加载1...
纯CSS3实现各种loading效果
qq_39025670的博客
07-26 9731
通过CSS3实现一些炫酷的loading动画效果...
CSS：一个简单的loading动画
QD的博客
05-19 690
<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;
css加载动画, loading
最新发布
07-28
CSS加载动画，也称为loading动画，是通过CSS代码实现的一种在页面加载过程中显示的动态效果。可以通过设置div的样式属性和动画效果来实现。例如，可以设置一个圆形的div，并通过border属性设置边框的宽度和颜色，再通过animation属性设置旋转动画，使div在页面加载过程中旋转起来。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>CSS实现加载中loading动画效果</title> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding: 0; display: flex; flex-flow: column; align-items: center; justify-content: center; } .loading { width: 100px; height: 100px; border-radius: 50%; border: 15px solid #BEBEBE; border-left: 15px solid orange; animation: loading 1s linear infinite; } @keyframes loading { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> </head> <body> <div class="loading"></div> </body> </html> ``` 这段代码中，通过设置div的样式属性和动画效果，实现了一个圆形的loading动画。div的样式属性包括宽度、高度、边框半径等，通过border属性设置边框的宽度和颜色，再通过animation属性设置旋转动画。通过设置from和to关键帧，控制div在页面加载过程中旋转的角度，从而实现loading动画效果。 #### 引用[.reference_title] - *1* [css实现加载中loading动画效果](https://blog.csdn.net/popstarqq/article/details/120999180)[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] - *2* *3* [【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）](https://blog.csdn.net/hdp134793/article/details/131655277)[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、付费专栏及课程。

余额充值