微信小程序开发动感十足的加载动画--都在这里！

布满荆棘的人生 2022-05-09 15:50 333阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/14242.html][http_www.demodashi.com_demo_14242.html]

#### 一、前期准备工作 ####

软件环境：微信开发者工具  
官方下载地址：[https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html][https_mp.weixin.qq.com_debug_wxadoc_dev_devtools_download.html]

##### 1、基本需求。 #####

*  实现加载动画
 *  带动画（动画可做参靠，个人要是觉得不好看可以自定义动画）

##### 2、案例目录结构 #####

![fcqyj2X6LvOu0ZID937.png][]

#### 二、程序实现具体步骤 ####

##### 1.index.wxml代码 #####

##### 2.部分index.wxss代码 #####

.tui-loading-row{
        width: 100%;
        display: table;
        table-layout: fixed;
    }
    .tui-loading-cell{
      width: 100%;
      display: table-cell;
      text-align: center;
    }
    /*动画一：单个渐变  */
    .circle-line{
        width: 100px;
        height: 100px;
        display: inline-block;
        position: relative;
    }
    .circle-line text{
        display: block;
        width: 50%;
        height: 5px;
        opacity: .7;
        position: absolute;
        top: calc(50% - 2.5px);
        left: 0px;
        transform-origin: center right; 
        animation: circle 1.5s linear infinite; 
    }
    .circle-line text::before{
        content: '';
        display: block;
        width: 15px;
        height: 5px;
        position: absolute;
        top: 0;
        right: 10px;
        background-color: blue;
    }
    .circle-line text:nth-child(1){
        transform: rotate(0deg);
        animation-delay: 0.2s;
    }
    .circle-line text:nth-child(2){
        transform: rotate(45deg);
        animation-delay: 0.4s;
    }
    .circle-line text:nth-child(3){
        transform: rotate(90deg);
        animation-delay: 0.6s;
    }
    .circle-line text:nth-child(4){
        transform: rotate(135deg);
        animation-delay: 0.8s;
    }
    .circle-line text:nth-child(5){
        transform: rotate(180deg);
        animation-delay: 1s;
    }
    .circle-line text:nth-child(6){
        transform: rotate(225deg);
        animation-delay: 1.2s;
    }
    .circle-line text:nth-child(7){
        transform: rotate(270deg);
        animation-delay: 1.4s;
    }
    .circle-line text:nth-child(8){
        transform: rotate(315deg);
        animation-delay: 1.6s;
    }
    @keyframes circle {
        0%{
            opacity: 0.05;
        }
        100%{
            opacity: 0.9;
        }
    }
    /*动画二：整体旋转  */
    .circle-line-spin{
        width: 100px;
        height: 100px;
        display: inline-block;
        position: relative;
        animation: circle-line 1.5s linear infinite;  
    }
    .circle-line-spin text{
        display: block;
        width: 50%;
        height: 5px;
        opacity: .7;
        position: absolute;
        top: calc(50% - 2.5px);
        left: 0px;
        transform-origin: center right; 
    }

##### 3.index.js逻辑代码 #####

不需要就是这么任性

#### 三、案例运行效果图 ####

![zfcghTzoqiCpHDGr6jL.gif][]

#### 四、总结与备注 ####

暂无微信小程序开发动感十足的加载动画–都在这里！

> 代码地址如下：  
> [http://www.demodashi.com/demo/14242.html][http_www.demodashi.com_demo_14242.html]

> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_14242.html]: http://www.demodashi.com/demo/14242.html
[https_mp.weixin.qq.com_debug_wxadoc_dev_devtools_download.html]: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
[fcqyj2X6LvOu0ZID937.png]: /images/20220506/5fe2266721564bc78a87239e15b29ebc.png
[zfcghTzoqiCpHDGr6jL.gif]: /images/20220506/dd633ddb861442c98eb14c2c1bb21a50.png