CSS3动画之loading-1

最新推荐文章于 2022-03-08 00:41:06 发布
最新推荐文章于 2022-03-08 00:41:06 发布
阅读量520 收藏
点赞数
分类专栏： css3动画 文章标签： css3 动画 loading
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjnf012/article/details/78689523
版权

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

代码如下：

* {
  padding: 0;
  margin: 0;
}
body {
  background: #ffffff;
}
.wrap {
  position: relative;
  width: 200px;
  height: 250px;
  margin: 30px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 0 30px 1px #273aca inset;
  box-shadow: 0 0 30px 1px #273aca inset;
}
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -44px;
  margin-left: -44px;
}
.loading .outer {
  display: block;
  width: 80px;
  height: 80px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 4px solid #273aca;
  border-left-color: transparent;
  border-bottom: 0;
  -webkit-animation: loading 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
  animation: loading 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}
.loading .inner {
  width: 46px;
  height: 46px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 4px solid #273aca;
  border-top-color: transparent;
  border-right: 0;
  margin-top: -27px;
  margin-left: -27px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-animation: loadingInner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
  animation: loadingInner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}
@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes loadingInner {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}
@keyframes loadingInner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
</head>
<body>
<div class="wrap">
    <div class="loading">
        <span class="outer"></span>
        <span class="inner"></span>
    </div>
</div>
<body>
</html>

以上代码可以直接复制运行！

爱编程的兔子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html+css实现Loading动画
Y_one的博客
06-16 981
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .Loading{ width: 150px; height: 150px; position: absolute;
css3loading状态1
kateLi的专栏
06-22 426
不知道为啥 编辑器总是把html中的i标签 解析成em标签 Document .demo i{display: block; width: 100px; height: 100px; position: absolute; top:50%; left:50%; margin:-50px 0 0 -50px; background: #333; border-radius:50%; o
css绘制loading图标（1）
小小少年
02-26 535
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;link rel="stylesheet" href="./CSS Only Loading Spinners_files/core.css"&gt; &lt;style&a
Loading
baigu7595的博客
08-17 139
效果图： 代码： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>loading</title></head><style type="text/css"> .box{ ...
loading加载
热门推荐
yzyblog的博客
06-27 1万+
页面加载时需要加载，请求接口也需要loading。在前端loading的需求无处不在，就是为了让用户体验更好。做loading的方式也有很多：下面我处理loading的用一张小的png图，yong            .wgui-message{     position: fixed;     top: 50%;     left: 50%;     z-index: 11010; ...
纯CSS3文字Loading动画特效
06-24
纯CSS3文字Loading动画特效是一种利用CSS3特性实现的创新加载效果，它将普通的加载指示器与文字结合，为用户提供了更加生动且富有个性化的等待体验。这种动画效果无需JavaScript或者其他复杂的编程语言，只需通过CSS...
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中的关键帧动画（@...
Html5 loading 来了
weixin_34179968的博客
12-19 564
Html5在移动设备上表现抢眼，几乎所有稍微高端一点的设备（乔帮主的iPad，iPhone和Andriod的平板手机等）的浏览器都支持Html5。而且据我个人的测试这些支持html5的设备对canvas标签的支持是相当的好。 所以就看了一点html5的东东，并研究了一下canvas标签的用法。如果你从来没有用过canvas标签，请参考Html5 canvas cheat sheet。 大家都知...
CSS3 实现 Loading 动画
Hwaphon
09-10 6654
最近本人正在极客学院学习 HTML5 系列课程，这么课程涵盖的内容也是非常的多，虽然内容十分简单容易理解，但是非常难以记忆，比如 CSS3 的一些属性。今天所要介绍的 CSS3 Loading 动画也是极客学院里所介绍的内容，感兴趣的同学也可以前去观看视屏。 Loading one第一种加载动画的效果，就是这么一个图在不停的转啊转，动态图就不在这里展示了，太过于麻烦了，想看效果的同学学习之后可以自己
html5制作loading图
divi
08-24 349
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt; &lt;
html的c3loading大全
zuggs_的博客
12-12 436
整理了一份c3loading大全，直接复制进html即可。。。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS加载动画</title> <style> body { background-colo...
css实现一个页面loading的动画
longgege001的博客
09-10 512
                        有点笨，不会生成gif图，效果就是那两张图片中的黑点点，会按顺序从无到有，形成一种loading的感觉。 完整代码如下，可直接复制看效果~ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;style...
页面loading效果实现代码
雨巷的博客
03-29 4422
有些页面加载起来比较慢，为了加强用户体验效果，所以一般都会做一个页面加载等待的提示，页面加载完成后消失。 下面提供一个可以拿来即用的方案。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&l
使用关键帧写一个loading 的小案例
团酱
03-08 323
<!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>...
css 实现一个loading旋转，减少img请求，变相提升网络加载速度
weixin_33725270的博客
07-12 2023
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style type="text/css"&gt; .l
JS：网站loading界面实现
彼方_的博客
10-13 1021
loading界面的样式写在</head>前，优先渲染这个界面 <head> <title>loading</title> <style type="text/css"> #loader{ width: 100%;height: 100%;background: white; position: fixed;top: 0;left: 0;/*相对浏览器窗口定位*/ display: flex;align-items: cen
css3 实现loading动画
花神的博客
09-07 547
&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;
css加载动画, loading
最新发布
07-28
- *2* *3* [【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）](https://blog.csdn.net/hdp134793/article/details/131655277)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630",...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值