小程序 自定义 循环 动画

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wyk304443164/article/details/78226082

本文出自:

http://blog.csdn.net/wyk304443164

小程序 animation 创建的animation 不能循环,所以我们直接使用 css的动画,真搞不懂 为啥小程序还要搞一套这种动画出来。。

这里写图片描述

<view class="bottom-container">
      <view class="view-container">
        <text>向下</text>
      </view>
    </view>
/*往下*/
    .bottom-container {
      height: ~"80rpx";
      position: relative;
      text-align: center;

      @keyframes spin {
        0% {
          opacity: .2;
          left: 0;
          top: 0;
        }
        50% {
          opacity: 1;
          left: 0;
          top: 12px;
        }
        100% {
          opacity: .2;
          left: 0;
          top: 0;
        }
      }

      .view-container {
        position: absolute;
        margin-left: calc(~"50% - 10px");
        animation: spin 2.5s ease-in-out infinite;
      }
    }

so fucking easy!

猜你喜欢

转载自blog.csdn.net/wyk304443164/article/details/78226082