三个点的 loading 动画整理

最新推荐文章于 2024-09-03 15:48:07 发布
最新推荐文章于 2024-09-03 15:48:07 发布
阅读量772 收藏 8
点赞数 5
文章标签： css css3 前端 html javascript
原文链接：https://mp.weixin.qq.com/s?__biz=MzI2ODY0ODM2Ng==&mid=2247490985&idx=2&sn=dddfcab878af6697e73cb8a0d26d5013&chksm=ebf98ef63254ef403bfe383652dd8ce3431b2e79d924a0793d39d7ec5f3a850acfec2efb82a9&scene=126&sessionid=0
版权

a7443e6627e50cfc40eb4d534ae2682d.png

这是我这几十年间从世界各地寻觅到的 Loading 特效，合计10个，而且是纯 CSS 制作的。

5224058a2f9f01a832517aa5dfc6b782.gif

你可以将这段代码复制粘贴到一个 HTML 文件中，然后在浏览器中打开，就可以看到这个简单的三个点 loading 动画效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Three Dots Loading Animation</title>
    <style>
      .stage {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2rem 0;
        margin: 0 -5%;
        overflow: hidden;
      }
      .dot-pulse {
        position: relative;
        left: -9999px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #9880ff;
        color: #9880ff;
        box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff,
          10014px 0 0 0 #9880ff;
        animation: dotPulse 1.5s infinite linear;
      }


      .dot-elastic {
        position: relative;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #9880ff;
        color: #9880ff;
        animation: dotElastic 1s infinite linear;
      }
      .dot-elastic::before {
        left: -15px;
        animation: dotElasticBefore 1s infinite linear;
      }
      .dot-elastic::after {
        left: 15px;
        animation: dotElasticAfter 1s infinite linear;
      }
      .dot-elastic::before,
      .dot-elastic::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #9880ff;
        color: #9880ff;
      }
      .dot-flashing {
        position: relative;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #9880ff;
        color: #9880ff;
        animation: dotFlashing 1s infinite linear alternate;
        animation-delay: 0.5s;
      }
      .dot-flashing::before {
        left: -15px;
        animation: dotFlashing 1s infinite alternate;
        animation-delay: 0s;
      }
      .dot-flashing::after {
        left: 15px;
        animation: dotFlashing 1s infinite alternate;
        animation-delay: 1s;
      }
      .dot-flashing::before,
      .dot-flashing::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #9880ff;
        color: #9880ff;
      }


      .dot-collision {
        position: relative;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #9880ff;
        color: #9880ff;
      }
      .dot-collision::before {
        left: -10px;
        animation: dotCollisionBefore 2s infinite ease-in;
      }
      .dot-collision::after {
        left: 10px;
        animation: dotCollisionAfter 2s infinite ease-in;
        animation-delay: 1s;
      }
      .dot-collision::before,
      .dot-collision::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #9880ff;
        color: #9880ff;
      }


      .dot-carousel {
        position: relative;
        left: -9999px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #9880ff;
        color: #9880ff;
        box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff,
          10014px 0 0 0 #9880ff;
        animation: dotCarousel 1.5s infinite linear;
      }


      .dot-typing {
        position: relative;
        left: -9999px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #9880ff;
        color: #9880ff;
        box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff,
          10014px 0 0 0 #9880ff;
        animation: dotTyping 1.5s infinite linear;
      }


      .dot-floating {
        position: relative;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #9880ff;
        color: #9880ff;
        animation: dotFloating 3s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1);
      }
      .dot-floating::before {
        left: -12px;
        animation: dotFloatingBefore 3s infinite ease-in-out;
      }
      .dot-floating::after {
        left: -24px;
        animation: dotFloatingAfter 3s infinite cubic-bezier(0.4, 0, 1, 1);
      }
      .dot-floating::before,
      .dot-floating::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #9880ff;
        color: #9880ff;
      }


      .dot-spin {
        position: relative;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: transparent;
        color: transparent;
        box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 0 #9880ff,
          18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0),
          0 18px 0 0 rgba(152, 128, 255, 0),
          -12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0),
          -18px 0 0 0 rgba(152, 128, 255, 0),
          -12.72984px -12.72984px 0 0 rgba(152, 128, 255, 0);
        animation: dotSpin 1.5s infinite linear;
      }


      .dot-falling {
        position: relative;
        left: -9999px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #9880ff;
        color: #9880ff;
        box-shadow: 9999px 0 0 0 #9880ff;
        animation: dotFalling 1s infinite linear;
        animation-delay: 0.1s;
      }


      .dot-falling::before,
      .dot-falling::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #9880ff;
        color: #9880ff;
      }
      .dot-falling::before {
        animation: dotFallingBefore 1s infinite linear;
        animation-delay: 0s;
      }
      .dot-falling::after {
        animation: dotFallingAfter 1s infinite linear;
        animation-delay: 0.2s;
      }


      .dot-stretching {
        position: relative;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #9880ff;
        color: #9880ff;
        animation: dotStretching 2s infinite ease-in;
        transform: scale(1.25, 1.25);
      }


      .dot-stretching::before,
      .dot-stretching::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #9880ff;
        color: #9880ff;
      }
      .dot-stretching::before {
        animation: dotStretchingBefore 2s infinite ease-in;
      }
      .dot-stretching::after {
        animation: dotStretchingAfter 2s infinite ease-in;
      }


      @keyframes dotStretchingBefore {
        0% {
          transform: translate(0) scale(0.7, 0.7);
        }


        50%,
        60% {
          transform: translate(-20px) scale(1, 1);
        }
        100% {
          transform: translate(0) scale(0.7, 0.7);
        }
      }


      @keyframes dotStretchingAfter {
        0% {
          transform: translate(0) scale(0.7, 0.7);
        }
        50%,
        60% {
          transform: translate(20px) scale(1, 1);
        }
        100% {
          transform: translate(0) scale(0.7, 0.7);
        }
      }
      @keyframes dotStretching {
        0% {
          transform: scale(1.25, 1.25);
        }
        50%,
        60% {
          transform: scale(0.8, 0.8);
        }
        100% {
          transform: scale(1.25, 1.25);
        }
      }


      @keyframes dotFallingAfter {
        0% {
          box-shadow: 10014px -15px 0 0 rgba(152, 128, 255, 0);
        }
        25%,
        50%,
        75% {
          box-shadow: 10014px 0 0 0 #9880ff;
        }
        100% {
          box-shadow: 10014px 15px 0 0 rgba(152, 128, 255, 0);
        }
      }
      @keyframes dotFallingBefore {
        0% {
          box-shadow: 9984px -15px 0 0 rgba(152, 128, 255, 0);
        }


        25%,
        50%,
        75% {
          box-shadow: 9984px 0 0 0 #9880ff;
        }
        100% {
          box-shadow: 9984px 15px 0 0 rgba(152, 128, 255, 0);
        }
      }
      @keyframes dotFalling {
        0% {
          box-shadow: 9999px -15px 0 0 rgba(152, 128, 255, 0);
        }
        25%,
        50%,
        75% {
          box-shadow: 9999px 0 0 0 #9880ff;
        }


        100% {
          box-shadow: 9999px 15px 0 0 rgba(152, 128, 255, 0);
        }
      }


      @keyframes dotSpin {
        0%,
        100% {
          box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 0 #9880ff,
            18px 0 0 0 #9880ff,
            12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0),
            0 18px 0 -5px rgba(152, 128, 255, 0),
            -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0),
            -18px 0 0 -5px rgba(152, 128, 255, 0),
            -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
        }
        12.5% {
          box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0),
            12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 0 #9880ff,
            12.72984px 12.72984px 0 0 #9880ff,
            0 18px 0 -5px rgba(152, 128, 255, 0),
            -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0),
            -18px 0 0 -5px rgba(152, 128, 255, 0),
            -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
        }
        25% {
          box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0),
            12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0),
            18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 0 #9880ff,
            0 18px 0 0 #9880ff,
            -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0),
            -18px 0 0 -5px rgba(152, 128, 255, 0),
            -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
        }
        37.5% {
          box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0),
            12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0),
            18px 0 0 -5px rgba(152, 128, 255, 0),
            12.72984px 12.72984px 0 0 #9880ff, 0 18px 0 0 #9880ff,
            -12.72984px 12.72984px 0 0 #9880ff,
            -18px 0 0 -5px rgba(152, 128, 255, 0),
            -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
        }
        50% {
          box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0),
            12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0),
            18px 0 0 -5px rgba(152, 128, 255, 0),
            12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0),
            0 18px 0 0 #9880ff, -12.72984px 12.72984px 0 0 #9880ff,
            -18px 0 0 0 #9880ff,
            -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
        }
        62.5% {
          box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0),
            12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0),
            18px 0 0 -5px rgba(152, 128, 255, 0),
            12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0),
            0 18px 0 -5px rgba(152, 128, 255, 0),
            -12.72984px 12.72984px 0 0 #9880ff, -18px 0 0 0 #9880ff,
            -12.72984px -12.72984px 0 0 #9880ff;
        }
        75% {
          box-shadow: 0 -18px 0 0 #9880ff,
            12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0),
            18px 0 0 -5px rgba(152, 128, 255, 0),
            12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0),
            0 18px 0 -5px rgba(152, 128, 255, 0),
            -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0),
            -18px 0 0 0 #9880ff, -12.72984px -12.72984px 0 0 #9880ff;
        }
        87.5% {
          box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 0 #9880ff,
            18px 0 0 -5px rgba(152, 128, 255, 0),
            12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0),
            0 18px 0 -5px rgba(152, 128, 255, 0),
            -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0),
            -18px 0 0 -5px rgba(152, 128, 255, 0),
            -12.72984px -12.72984px 0 0 #9880ff;
        }
      }
      @keyframes dotFloating {
        0% {
          left: calc(-50% - 5px);
        }
        75% {
          left: calc(50% + 105px);
        }
        100% {
          left: calc(50% + 105px);
        }
      }
      @keyframes dotFloatingBefore {
        0% {
          left: -50px;
        }
        50% {
          left: -12px;
        }
        75% {
          left: -50px;
        }
        100% {
          left: -50px;
        }
      }
      @keyframes dotFloatingAfter {
        0% {
          left: -100px;
        }
        50% {
          left: -24px;
        }
        75% {
          left: -100px;
        }
        100% {
          left: -100px;
        }
      }


      @keyframes dotTyping {
        0% {
          box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff,
            10014px 0 0 0 #9880ff;
        }
        16.667% {
          box-shadow: 9984px -10px 0 0 #9880ff, 9999px 0 0 0 #9880ff,
            10014px 0 0 0 #9880ff;
        }
        33.333% {
          box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff,
            10014px 0 0 0 #9880ff;
        }
        50% {
          box-shadow: 9984px 0 0 0 #9880ff, 9999px -10px 0 0 #9880ff,
            10014px 0 0 0 #9880ff;
        }
        66.667% {
          box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff,
            10014px 0 0 0 #9880ff;
        }
        83.333% {
          box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff,
            10014px -10px 0 0 #9880ff;
        }
        100% {
          box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff,
            10014px 0 0 0 #9880ff;
        }
      }


      @keyframes dotCarousel {
        0% {
          box-shadow: 9984px 0 0 -1px #9880ff, 9999px 0 0 1px #9880ff,
            10014px 0 0 -1px #9880ff;
        }


        50% {
          box-shadow: 10014px 0 0 -1px #9880ff, 9984px 0 0 -1px #9880ff,
            9999px 0 0 1px #9880ff;
        }
        100% {
          box-shadow: 9999px 0 0 1px #9880ff, 10014px 0 0 -1px #9880ff,
            9984px 0 0 -1px #9880ff;
        }
      }
      @keyframes dotPulse {
        0% {
          box-shadow: 9984px 0 0 -5px #9880ff, 9999px 0 0 0 #9880ff,
            10014px 0 0 2px #9880ff;
        }


        25% {
          box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 2px #9880ff,
            10014px 0 0 0 #9880ff;
        }
        50% {
          box-shadow: 9984px 0 0 2px #9880ff, 9999px 0 0 0 #9880ff,
            10014px 0 0 -5px #9880ff;
        }
        75% {
          box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 -5px #9880ff,
            10014px 0 0 0 #9880ff;
        }
        100% {
          box-shadow: 9984px 0 0 -5px #9880ff, 9999px 0 0 0 #9880ff,
            10014px 0 0 2px #9880ff;
        }
      }
      @keyframes dotElasticAfter {
        0% {
          transform: scale(1, 1);
        }
        25% {
          transform: scale(1, 1);
        }
        50% {
          transform: scale(1, 0.67);
        }
        75% {
          transform: scale(1, 1.5);
        }
        100% {
          transform: scale(1, 1);
        }
      }
      @keyframes dotElasticBefore {
        0% {
          transform: scale(1, 1);
        }
        25% {
          transform: scale(1, 1.5);
        }
        50% {
          transform: scale(1, 0.67);
        }
        75% {
          transform: scale(1, 1);
        }
        100% {
          transform: scale(1, 1);
        }
      }
      @keyframes dotElastic {
        0% {
          transform: scale(1, 1);
        }
        25% {
          transform: scale(1, 1);
        }
        50% {
          transform: scale(1, 1.5);
        }
        75% {
          transform: scale(1, 1);
        }
        100% {
          transform: scale(1, 1);
        }
      }
      @keyframes dotFlashing {
        0% {
          background-color: #9880ff;
        }
        100% {
          background-color: #ebe6ff;
        }
      }


      @keyframes dotCollisionAfter {
        0%,
        50%,
        75%,
        100% {
          transform: translateX(0);
        }


        25% {
          transform: translateX(15px);
        }
      }


      @keyframes dotCollisionBefore {
        0%,
        50%,
        75%,
        100% {
          transform: translateX(0);
        }
        25% {
          transform: translateX(-15px);
        }
      }
</style>
  </head>
  <body>
    <div class="stage">
      <div class="dot-elastic"></div>
    </div>


    <div class="stage">
      <div class="dot-pulse"></div>
    </div>


    <div class="stage">
      <div class="dot-flashing"></div>
    </div>


    <div class="stage">
      <div class="dot-collision"></div>
    </div>


    <div class="stage">
      <div class="dot-carousel"></div>
    </div>


    <div class="stage">
      <div class="dot-typing"></div>
    </div>


    <div class="stage">
      <div class="dot-floating"></div>
    </div>


    <div class="stage">
      <div class="dot-spin"></div>
    </div>


    <div class="stage">
      <div class="dot-falling"></div>
    </div>


    <div class="stage">
      <div class="dot-stretching"></div>
    </div>
  </body>
</html>

因为特效数量太多，本文不讲解原理（以后可能会开新篇讲），只贴代码，大家来感受一下复制粘贴的快感吧。

gtLBTNq9mr3
关注
整理 酷炫 Android 开源UI框架 动画
TS的博客
05-29 1394
1.Android-SpinKit Android 自定义View 的方式实现的各种炫酷的动画 项目地址：https://github.com/ybq/Android-SpinKit 项目Demo：Android-SpinKit 2.AVLoadingIndicatorView Android 自定义View 的方式实现的各种炫酷的动画 项目地址：https://github.com/81813780/AVLoadingIndicatorView 项目Demo：AVLoadingIndicatorView
三圆点CSS3 loading加载动画特效库
12-13
three-dots.css是一款三圆点CSS3 loading加载动画特效库。three-dots.css中集成了14种三园点loading动画特效，以及三种增强动画效果。
纯css3个点加载动画
Jinmy的博客
07-16 1721
<style> html,body { width: 100%; height: 100%; } body{ background: black; font-family: 'Poppins', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; justify-content: center; a...
css三点闪烁（可用于加载样式、标题等）
最新发布
m0_56164131的博客
09-03 647
【代码】css三点闪烁（可用于加载样式、标题等）
CSS实现3个圆点加载动画
tt1234561009的博客
06-07 901
加载动画主要使用了css的animation和transform属性，animation用来实现动画效果，transform实现过渡，让动画看起来更真实。
纯css三个点加载动画
wang_59881的博客
04-23 1282
【代码】纯css三个点加载动画。
css实现三个点加载中的效果
Wind_waving的博客
03-24 4233
效果： //html部分： <span class="loading">正在加载中<dot>...</dot> </span> //css： .loading{ display: flex;/*让dot和文字在同一行*/ } dot{ /*让点垂直居中*/ height: 1em; line-height: 1;
正在加载三点动画
ChasenZh的博客
06-12 352
正在加载中<dot>...</dot> dot { display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -.25em; overflow: hidden; } dot::before { display: block; content: '...\A..\A.'; white-space: p.
html+div+动画效果,CSS3效果：animate实现点点点loading动画效果（一）
weixin_28761983的博客
06-03 722
实现如图所示的点点点loading效果：一：CSS3 animation实现代码提交订单中...css代码：.ani_dot{font-family:simsun;}:root .ani_dot{ /*这里使用Hack是因为IE6~IE8浏览器下， vertical-align解析不规范，值为bottom或其他会改变按钮的实际高度*/display:inline-block;width:1.5em...
BestRecyclerViewDemo:Android RecyclerView的简单使用，包含下拉刷新和上拉加载更多和图片显示以及动画管理。。。（还在整理中，，勿看）
05-12
本项目"BestRecyclerViewDemo"是一个示例，展示了如何在Android应用中有效地使用RecyclerView，包括下拉刷新、上拉加载更多以及图片显示和动画管理。 1. **RecyclerView的基本结构**： RecyclerView由`...
DotLoadingBar:三个点左右重复平移的加载动画
05-13
DotLoadingBar ======== 三个点左右重复平移的加载动画 可以自动切换颜色 可以修改颜色 继承自RelativeLayout Add DotLoadingBar to your project Image
安卓自定义控件-实现IOS版UC浏览器三点加载动画效果
01-24
文章地址：http://blog.csdn.net/oushangfeng123/article/details/50572531 自定义控件实现IOS版UC浏览器三点加载动画效果！！！
等待loading状态图标gif动画大全
05-10
等待loading状态图标gif动画大全
属性动画在Android自定义View中的应用场景
wcl_android@163.com
09-30 812
Android中动画的类型，按照系统版本可以简单的分为两大类型，一种是传统的动画，也就是Android中最常用的View动画，即帧动画和补间动画；另一种是Android3.0以后支持的PropertyAnimation,即属性动画。这两大类型的动画虽然在实现一些动画效果上有异曲同工之处，但实现方式和使用场景还是有较大的差别。View动画帧动画和补间动画是安卓中最常见的动画，表现形式有AlphaAni
CSS3 animation实现点点点loading动画
淡然坊
10-10 6327
一、再续前缘 去年夏天，写了篇名为“CSS3 animation渐进实现点点点等待提示效果”的文章，主要内容是实现类似下面打点等待提示效果，比干巴巴的字符...要更人性化： 之前实现的原理是通过宽度和margin控制实现，但是，问题非常明显，字符宽度受制于字体，例如移动端，没有宋体，字符可能就会被半路剪裁，从而出现显示bug, 用计算机术语描述就是“健壮性不足”。 上周，
自定义动态跳动的三个加载小点
豌豆的专栏
11-08 2300
先说下背景把，最近sdk改版，中间有一个加载框，其实就是显示一串提示字，但是有时需要加载的时间比较长，用户又不能做其他操作，时间久了，感觉界面像卡死一样，不然，其实还在加载，体验非常不好，所以想在文字后边加三个加载的小点不停的跳动。技术实现方式 写三个字符串，把这段拼接到文字后边，开个handler 间隔一百毫秒换一个，也可以实现，但是有个问题，如果这样的每个页面都要写个handler 去设置它，并
三个圆点loading加载CSS3代码
細水、長流√的专栏
12-22 1477
http://www.bootstrapmb.com/item/2709 http://www.bootstrapmb.com/item/2709/preview
利用wpf写一个loading动画
06-06
以下是一个简单的WPF Loading动画的代码： ```xaml <Window x:Class="LoadingAnimationWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="LoadingAnimationWindow" Height="150" Width="350"> <Grid> <Ellipse x:Name="Ellipse1" Width="30" Height="30" Fill="LightBlue"> <Ellipse.RenderTransform> <TranslateTransform X="0" Y="0"/> </Ellipse.RenderTransform> <Ellipse.Triggers> <EventTrigger RoutedEvent="Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" From="0" To="200" Duration="0:0:1" RepeatBehavior="Forever"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Ellipse.Triggers> </Ellipse> <Ellipse x:Name="Ellipse2" Width="30" Height="30" Fill="LightBlue"> <Ellipse.RenderTransform> <TranslateTransform X="0" Y="0"/> </Ellipse.RenderTransform> <Ellipse.Triggers> <EventTrigger RoutedEvent="Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" From="0" To="-200" Duration="0:0:1" RepeatBehavior="Forever"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Ellipse.Triggers> </Ellipse> </Grid> </Window> ``` 这个Loading动画使用了两个椭圆（Ellipse）来表示动画，每个椭圆都有一个 `TranslateTransform` 作为其渲染变换（Render Transform），并在其 `Loaded` 事件中启动一个 `Storyboard`，使用 `DoubleAnimation` 来改变 `TranslateTransform` 的 X 坐标值，从而实现椭圆的移动。两个椭圆的移动方向相反，从而形成动画效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值