css3加载中动画

最新推荐文章于 2023-10-06 15:41:55 发布
最新推荐文章于 2023-10-06 15:41:55 发布
阅读量507 收藏
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Revival_Liang/article/details/78546754
版权 
<!doctype html>
<head>
<meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/lanrenzhijia.css"/>
    <link rel="stylesheet" type="text/css" href="css/loaders.css"/>
    <title>28个纯css3 加载loading动画特效</title>
</head>
<body>
<main>
    <div class="loaders">
      <div class="loader">
        <div class="loader-inner ball-zig-zag">
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner line-scale">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!--圆吃圆-->
      <div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
</main>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('main').className += 'loaded';
    });
  </script>
  <style>
  	.loader{
  		/*width: 150px;*/
  		/*height: 150px;*/
  		padding: 100px;
  		margin: 100px;
  		display: inline-block;
  		text-align: center;
  		background-color: blue;;
  	}
  	/*两圆start*/
  	.ball-zig-zag {
  position: relative;
  -webkit-transform: translate(-15px, -15px);
      -ms-transform: translate(-15px, -15px);
          transform: translate(-15px, -15px); }
  .ball-zig-zag > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    }
    .ball-zig-zag > div:first-child {
      -webkit-animation: ball-zig 0.7s 0s infinite linear;
              animation: ball-zig 0.7s 0s infinite linear; }
    .ball-zig-zag > div:last-child {
      -webkit-animation: ball-zag 0.7s 0s infinite linear;
              animation: ball-zag 0.7s 0s infinite linear; }
              
    /*两圆end*/      
    
        /*线start*/
@-webkit-keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }

  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }

  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }
@keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }

  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }

  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }

.line-scale > div:nth-child(1) {
  -webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(2) {
  -webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(3) {
  -webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(4) {
  -webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(5) {
  -webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div {
  background-color: #fff;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block; }
  
  /*线end*/
  /*以下是圆形*/
              @-webkit-keyframes rotate_pacman_half_up {
  0% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); }

  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); }

  100% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); } }

@keyframes rotate_pacman_half_up {
  0% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); }

  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); }

  100% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); } }
            
            
            

@-webkit-keyframes rotate_pacman_half_down {
  0% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); }

  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); } }
  @-webkit-keyframes pacman-balls {
  75% {
    opacity: 0.7; }

  100% {
    -webkit-transform: translate(-100px, -6.25px);
            transform: translate(-100px, -6.25px); } }
  .pacman {
  position: relative; }
  .pacman > div:nth-child(2) {
    -webkit-animation: pacman-balls 1s 0s infinite linear;
            animation: pacman-balls 1s 0s infinite linear; }
  .pacman > div:nth-child(3) {
    -webkit-animation: pacman-balls 1s 0.33s infinite linear;
            animation: pacman-balls 1s 0.33s infinite linear; }
  .pacman > div:nth-child(4) {
    -webkit-animation: pacman-balls 1s 0.66s infinite linear;
            animation: pacman-balls 1s 0.66s infinite linear; }
  .pacman > div:nth-child(5) {
    -webkit-animation: pacman-balls 1s 0.99s infinite linear;
            animation: pacman-balls 1s 0.99s infinite linear; }
  .pacman > div:first-of-type {
    width: 0px;
    height: 0px;
    border-right: 25px solid transparent;
    border-top: 25px solid #fff;
    border-left: 25px solid #fff;
    border-bottom: 25px solid #fff;
    border-radius: 25px;
    -webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;
            animation: rotate_pacman_half_up 0.5s 0s infinite; }
  .pacman > div:nth-child(2) {
    width: 0px;
    height: 0px;
    border-right: 25px solid transparent;
    border-top: 25px solid #fff;
    border-left: 25px solid #fff;
    border-bottom: 25px solid #fff;
    border-radius: 25px;
    -webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;
            animation: rotate_pacman_half_down 0.5s 0s infinite;
    margin-top: -50px; }
  .pacman > div:nth-child(3), .pacman > div:nth-child(4), .pacman > div:nth-child(5), .pacman > div:nth-child(6) {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    width: 10px;
    height: 10px;
    position: absolute;
    -webkit-transform: translate(0, -6.25px);
        -ms-transform: translate(0, -6.25px);
            transform: translate(0, -6.25px);
    top: 25px;
    left: 100px; }
    /*圆吃圆end*/
  </style>
</body>

下面是loaders.css文件内容：



@-webkit-keyframes ball-zig {
  33% {
    -webkit-transform: translate(-15px, -30px);
            transform: translate(-15px, -30px); }

  66% {
    -webkit-transform: translate(15px, -30px);
            transform: translate(15px, -30px); }

  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

@keyframes ball-zig {
  33% {
    -webkit-transform: translate(-15px, -30px);
            transform: translate(-15px, -30px); }

  66% {
    -webkit-transform: translate(15px, -30px);
            transform: translate(15px, -30px); }

  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }





@-webkit-keyframes ball-zag {
  33% {
    -webkit-transform: translate(15px, 30px);
            transform: translate(15px, 30px); }

  66% {
    -webkit-transform: translate(-15px, 30px);
            transform: translate(-15px, 30px); }

  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

@keyframes ball-zag {
  33% {
    -webkit-transform: translate(15px, 30px);
            transform: translate(15px, 30px); }

  66% {
    -webkit-transform: translate(-15px, 30px);
            transform: translate(-15px, 30px); }

  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }


Revival_Liang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3实现的各种加载中动画
08-30
css3实现的各种loading动画，调整动画颜色大小
css3动画-加载中...
weixin_30832143的博客
09-27 121
写几个简单的加载中动画吧。 像前面三种都是相当于几个不同的点轮流来播放同一动画：变大变小。css3里面有一个用于尺度变换的方法：scale(x,y)：定义 2D 缩放转换，改变元素的宽度和高度。 第四种就是一个小球从上往下跌落，再弹回去，在上面的时候速度最小，下面的时候速度最大。由于该小球只进行了上下的移动，所以我们可以运用：translateY(n)：定义 2D 转换，沿着 Y 轴移动元...
css3加载中
weixin_33805557的博客
08-20 87
.loader { margin: 6em auto; font-size: 10px; position: relative; text-indent: -9999em; border-top: 1.1em solid rgba(255, 255, 255, 0.2); border-right: 1.1em solid rgba(255, 255, 25...
css3加载中动画效果,CSS3实现加载中的动画效果
weixin_42523260的博客
08-03 692
Loading 的菊花图形组合的不太好，基本上实现这个功能了动画解析这个动画用到的 CSS3 特性:transform 主要使用 transform 属性的 rotate，将线条组合成 Loading 图形 (也就是常见的菊花图形)animation 实现将线条颜色由浅到深，再由深到浅来回变换的动画，通过 animation-delay 属性来使颜色的变换产生过渡的效果，从而达到类似于 Loa...
css3加载动画
qq_44441669的博客
06-15 464
css加载动画
css3 加载动画
09-14
在现代网页设计中，CSS3加载动画已经成为提升用户体验的重要元素，它们在页面内容加载时提供视觉反馈，使得用户知道网站正在工作并等待响应。CSS3加载动画利用了CSS3的新特性，如转换（Transitions）、动画...
纯css3太阳加载中动画特效
07-24
在本文中，我们将深入探讨“纯CSS3太阳加载中动画特效”这一主题，这是一种利用CSS3的关键帧（keyframes）属性来创建创新的太阳图标加载动画的技术。 首先，我们来理解“纯CSS3”意味着什么。纯CSS3是指完全依赖于...
CSS3白色圆点加载动画特效
06-24
**CSS3白色圆点加载动画特效详解** 在网页设计中，加载动画是用户体验的重要组成部分，它可以在页面内容加载过程中提供视觉反馈，使用户感知到进程并减少等待的焦虑感。CSS3作为现代网页设计的核心技术之一，提供了...
css3圆形加载中动画
weixin_45661272的博客
04-23 353
css圆形加载中动画UI设计图效果步骤1：画出一个圆步骤2：画出外层的圆形步骤3：头部加上圆角步骤4：中间加上icon步骤5：去除中间背景色步骤6：旋转动画步骤7：暂停动画完事，收工！下面是全部代码 UI设计图效果 步骤1：画出一个圆 <div class="box"></div> .box{ width: 240px; height: 240px; border-radius: 50%; background: black; margin: 100px; }
CSS3 Loading英文加载动画效果.zip
07-03
CSS3 Loading英文加载动画效果是一款正在加载中，请您耐心等待...
css3手写加载中小动画
静子
03-20 468
不依赖gif，手写加载中小动画。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .loading .box i{ wid...
html中加载中的效果实现,CSS3实现加载中的动画效果例子
weixin_36312301的博客
06-03 290
css加载效果在现在的css3.0是非常容易实现了，那么要如何实现呢，下面我们一起来看一个CSS3实现加载中的动画效果实现方法，希望对各位有用。Loading 的菊花图形组合的不太好，基本上实现这个功能了动画解析这个动画用到的 CSS3 特性:transform 主要使用 transform 属性的 rotate，将线条组合成 Loading 图形 (也就是常见的菊花图形)animation 实现...
CSS3实现动画加载效果
最新发布
m0_46219714的博客
10-06 1752
【代码】CSS3实现动画加载效果。
css3实现加载小动画
qq_38340907的博客
11-01 565
HTML: &lt;div class="box"&gt;&lt;/div&gt; CSS: body { background-color: #59488b; } .box { position: relative; margin-top: 100px; margi...
利用CSS3简单实现加载中效果
Bule_daze的博客
10-21 285
<template> <p class="demo">加载中</p> </template> .demo:after{ content: "." } .demo:after { animation: dot 3s linear infinite; } @keyframes dot { 0% { content: "."; ...
CSS实现三个加载中的小动画
Sirius小鑫的博客
04-09 1330
使用CSS的动画animation定义动画的属性：动画名、执行时间、执行速度函数和执行的次数，定义关键帧@keyframe来实现动画细节。
CSS3实现加载中效果
Travelling1006的专栏
09-29 120
代码： <!doctype html> <html> <head> <meta charset="utf-8" /> <title>loading</title> <style> body { display: -webkit-box; displ...
CSS3 实现 加载中……动画
琳小的博客
05-27 353
css3 动画 实现加载中…… 给一个div长宽并加边框，底部的边框是透明的，然后用rotate， 是不是很简单呢？ #loading{ display: inline-block; height: 15px; width: 15px; border-radius: 50%; border: 2px solid dodgerblue; border-bottom-color: transparent; -webkit-animation: loadingRotate 0.7
css loading加载动画
08-26
CSS loading加载动画可以使用单个元素来完成。这意味着你只需要一个div元素，而不需要复制大量代码。你可以向这个div元素中添加一个类，以启动loading效果。 在选择加载提示动画时，你可以考虑使用一些经典的款式，例如“loading”文本、省略号、进度条等，或者选择一些其他有趣的符号来展示。选择一个合适的加载提示动画可以使用户在等待数据加载时感到更加愉快和舒适。 在编写网站或应用程序时，加载提示动画可以帮助我们传达给用户正在加载数据的信息。无论是网页加载还是数据请求，使用加载提示动画可以提高用户体验并减少不必要的疑惑。所以，使用加载提示动画是一个非常明智的选择。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [用CSS做的100个Loading加载动画](https://blog.csdn.net/qq_27169469/article/details/117319552)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值