html css 加载动画效果

最新推荐文章于 2024-05-10 10:01:58 发布
最新推荐文章于 2024-05-10 10:01:58 发布
阅读量214 收藏
点赞数 2
文章标签： animation
原文链接：https://darkcode1.blogspot.com/2019/05/amazing-loading-animation-using-only.html
版权

html css 加载动画效果

话不多说直接看效果

在这里插入图片描述

html代码

<!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>Document</title>
    <link rel="stylesheet" href="./loading.css">
</head>
<body>
    <div class="loading" >
        <span>
            Loading...
        </span>
    </div>
</body>
</html>

css代码

body {
  margin: 0;
  padding: 0;
  background-color: #34495e;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "montserrat", sans-serif;
}

.loading {
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  border-radius: 50%;
  border-top: 10px solid #e74c3c;
  position: relative;
  /* 添加动画 */
  animation: a1 2s linear infinite;
}

.loading::before,
.loading::after {
  content: "";
  width: 200px;
  height: 200px;
  /* background: red; */
  position: absolute;
  left: 0;
  top: -10px;
  box-sizing: border-box;
  border-radius: 50%;
}

.loading::before {
  border-top: 10px solid #e67e22;
  transform: rotate(120deg);
}
.loading::after {
  border-top: 10px solid #3498db;
  transform: rotate(240deg);
}

.loading span {
  position: absolute;
  width: 200px;
  height: 200px;
  color: #fff;
  text-align: center;
  line-height: 200px;
    /* 添加动画 */
  animation: a2 2s linear infinite;
}

/* 关键帧 */
@keyframes a1 {
  to {
    transform: rotate(360deg);
  }
}
@keyframes a2 {
  to {
    transform: rotate(-360deg);
  }
}

完成。

原作者：https://darkcode1.blogspot.com/2019/05/amazing-loading-animation-using-only.html

for3ach
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
手把手实现 CSS 加载动画（一）
p1967914901的博客
08-07 4444
接下来便是旋转这三个圆，最方便的做法便是将容器进行旋转，但有一个地方需要注意，我们是要等三个圆移动到最远的位置后开始旋转。既然是加载动画，我们不可能让他在角落展示吧，我们当然需要将它水平垂直居中，水平垂直居中的方式有很多，这里就不再赘述了。现在你已经看到了三个黑乎乎的圆已经重合在容器中间（为了方便观察，我们给容器加了一个背景颜色）。好了，到现在我们已经完成了初始状态，接下来我们要为它们分别定义动画。接下来我们来绘制三个圆，首先一开始三个圆是在容器中间。，这就是动画开始时一个圆分裂成三个圆的停顿时刻；...
肝了两宿才收集的17个超炫酷的 CSS 动画加载与进度条特效，绝对值得收藏！！！
热门推荐
Amo Xiang的博客
06-23 1万+
文章目录一、圆形加载动画二、上下跳动的圆球加载动画三、3D立体加载动画四、饼图加载动画五、多色圆点波动效果的加载动画六、制作顺时针放大的圆圈加载动画七、制作小圆圈轮流放大的加载动画八、制作竖条加载动画九、制作水波扩散效果加载动画十、制作逆时针逐渐放大多点加载动画十一、制作形状变化的加载动画十二、实现动态前进的阴影进度条十三、椭圆形进度条加载十四、彩色进度条加载效果十五、环形加载动画十六、制作斑马线样式的进度条十七、程序加载页面 一、圆形加载动画 1、实例描述：浏览网页时，难免会有网页加载慢的情况，当网页长时
Loaders.css：纯CSS加载动画的神奇世界
最新发布
gitblog_00029的博客
05-10 500
Loaders.css：纯CSS加载动画的神奇世界 项目地址:https://gitcode.com/ConnorAtherton/loaders.css 项目介绍 在网页开发中，等待是最让人不耐烦的体验之一。而Loaders.css为你的网站带来了一种全新的方式，将这种等待转化为视觉上的享受——一系列性能优化的纯CSS加载动画。这个库由Connor Atherton创建，提供了多种独特的动画效果...
css 圆形背景icon_巧用css圆角实现有点意思的加载动画
weixin_30043179的博客
12-29 353
css的border属性和border-radius属性 笔者在前面的文章中也分享过了如何利用border来实现不同的形状, 比如三角形, 如下为原理图: 利用这个原理我们只要把元素的border-radius 设置为圆形(比如50%), 我们是不是就能实现一个饼图了呢? 我们来看看效果: 以上是设置一个边的border-color的样子和设置四个边的border-color的样子, 所以说实...
css 加载动画如何生效,css3 动画加载效果
weixin_29359515的博客
08-04 147
来看看效果：css代码：body,html,*{padding:0px;margin:0px;}body,html{width:100%;background-color:#FFF;}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}#loader{height...
轻松掌握 CSS，实现 loading 加载中的多种形式
Shids_的博客
02-08 6080
轻松掌握 CSS，实现 loading 加载中的多种形式
使用css3实现超炫的loading加载动画效果
09-25
在本文中，我们将深入探讨如何使用CSS3来创建引人注目的加载动画效果，特别是针对“SpinKit”库中的几种加载动画。CSS3是层叠样式表的第三版，引入了许多新特性，其中包括动画（Animations），这使得创建动态且平滑...
css 加载动画特效
09-13
接下来，我们来看几种常见的CSS加载动画效果： 1. **旋转动画**：如上述例子所示，通过改变元素的旋转角度实现元素的旋转效果，常用于制作小菊花加载图标。 2. **滑动加载条**：使用CSS伪元素和`width`变化，可以...
css3实现加载loading特效小动画效果
06-12
除了旋转，CSS3还支持许多其他动画效果，如淡入淡出、缩放、平移等，可以组合使用创造出各种复杂的加载动画。例如，可以创建一个带有渐变背景色的矩形条形加载动画，通过改变矩形的宽度来模拟加载进度： ```css @...
html加载动画(js+css)
12-29
HTML加载动画是网页设计中一种常见的用户体验...总之，HTML加载动画结合了JavaScript和CSS的力量，提供了良好的用户体验。理解并掌握这两种技术在创建动态用户体验中的应用，对于提升网站的质量和用户满意度至关重要。
CSS3加载动画效果特效代码
03-20
【CSS3加载动画效果特效代码】是利用现代浏览器支持的CSS3特性来创建吸引人的加载动画，这些动画在网页内容加载期间提供视觉反馈，提升用户体验。CSS3加载动画的四款设计分别是：帽子加载、进度条加载、圆圈加载以及...
html5 网页加载中效果
11-22
1.html5页面加载效果 2.类似安卓toast提示效果 3.IOS7.0 删除确认提示 上面有源代码，部分注释，下载后可以根据项目的需求更改里面的代码
收集一些HTML5网页加载动画（Loading）.rar
07-10
收集一些基于HTML5技术生成的网页动画加载动画，canvas loaders，也就是大家所熟悉的网页Loading特效，这个不是真正的Loading，是基于CSS3绘制出来的Loading动画效果，可用于网页Loading中，这些小动画个个都十分精致，动画效果平滑流畅，实属精品。
HTML5等待加载动画效果
09-28
通过实例代码给大家介绍了HTML5等待加载动画效果的完美解决方案，感兴趣的朋友参考下吧
CSS样式特异性5层次详解
u013179804的博客
04-29 1010
在 CSS 中，特异性（Specificity）是一个决定页面中哪些样式规则应用到特定元素的规则集。当多个规则都适用于同一个元素时，特异性决定了哪个规则将被应用。理解特异性对于编写清晰、可预测的 CSS 代码至关重要。那我们一起来看看吧。
html5加载动画效果,用纯CSS实现加载中动画效果
weixin_35838019的博客
06-04 408
今天要介绍的是用简单的CSS——只用CSS，不用Gif——制作“加载中…”动画效果。先看看效果：上面的这个加载中效果，以前是用gif动图实现的，但随着CSS的进步，CSS动画功能越来越强大，我们只用一小片段HTML和CSS就能实现，方便了很多，体积也减小了很多。再加上一些CSS：.pswp__preloader__icn {opacity:0.75;width: 24px;height: 24px...
HTML+CSS实现加载动画
weixin_44260108的博客
12-30 476
使用CSS、HTML来实现内容加载的动画效果
html5游戏加载慢,5个可爱的CSS3 Loading加载动画
weixin_42484477的博客
06-01 483
本文作者html5tricks，转载请注明出处之前我们分享过很多漂亮的CSS3 Loading加载动画，印象最深的要算这款CSS3 Loading进度条加载动画特效 3款绚丽风格。这次要给大家介绍的是另外一款可爱的CSS3 Loading动画，一共有5种动画类型，每组Loading动画都非常有创意。接下来我们一起来看看实现这几款Loading动画的CSS3代码。HTML代码如下：第一个波浪形的Lo...
html5 圆形加载进度条,纯css3超酷圆形Loading加载进度条特效
weixin_30863465的博客
06-10 773
这是一款效果炫酷的纯css3圆形Loading加载进度条特效插件。该loading特效使用:before和:after伪元素来制作动画d的不同部分，然后给他们设置absolute定位和CSS transformations来创建动画效果。制作方法对于制作一个水平的loading进度条并不是十分的困难，但是要制作一个平滑运动的圆形进度条就有一点难度了。你要弄明白它们是如何工作的，先来看一下水平进度条...
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、付费专栏及课程。

余额充值