微信小程序加载动画

最新推荐文章于 2024-07-16 15:40:02 发布

0XIX0

最新推荐文章于 2024-07-16 15:40:02 发布

阅读量2.1k

点赞数

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/ddzr972435946/article/details/106673865

版权

微信小程序专栏收录该内容

1 篇文章

订阅专栏

补充一下这篇文章里的第二个例子的代码。

wxml 文件：

<view class="tui-loading-row">
  <view class="tui-loading-cell">
    <!--第一个动画，省略，见原文章-->
  </view>
  <view class="tui-loading-cell">
    <view class="circle-line-spin" >
      <text></text>
      <text></text>
      <text></text>
      <text></text>
      <text></text>
      <text></text>
      <text></text>
      <text></text>
    </view>
  </view>
</view>

wxss 文件：

.tui-loading-row{
  width: 100%;
  display: table;
  table-layout: fixed;
}
.tui-loading-cell{
width: 100%;
display: table-cell;
text-align: center;
}

/*动画二：整体旋转  */
.circle-line-spin{
  width: 100px;
  height: 100px;
  display: inline-block;
  position: relative;
  animation: circle-line 1.9s 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; 
}

.circle-line-spin text::before{
  content: '';
  display: block;
  width: 15px;
  height: 5px;
  position: absolute;
  top: 0;
  right: 10px;
  background-color: rgb(253, 186, 130);
}

.circle-line-spin text:nth-child(1){
  transform: rotate(0deg);
}
.circle-line-spin text:nth-child(2){
  transform: rotate(45deg);
}
.circle-line-spin text:nth-child(3){
  transform: rotate(90deg);
}
.circle-line-spin text:nth-child(4){
  transform: rotate(135deg);
}
.circle-line-spin text:nth-child(5){
  transform: rotate(180deg);
}
.circle-line-spin text:nth-child(6){
  transform: rotate(225deg);
}
.circle-line-spin text:nth-child(7){
  transform: rotate(270deg);
}
.circle-line-spin text:nth-child(8){
  transform: rotate(315deg);
}

@keyframes circle-line {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

效果图见原文章。