• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

CSS动态 =》“正在直播中”

开发技术 开发技术 6小时前 2次浏览

HTML

<view class="spinner">
      <view class="rect1"></view>
      <view class="rect2"></view>
      <view class="rect3"></view>
</view>

CSS

    //动态
    .spinner {
        margin: -6rpx 0rpx 0rpx 2rpx;
        width: 25rpx;
        height: 18rpx;
        font-size: 10px;
    }

    .spinner>view {
        background-color: #ffffff;
        height: 100%;
        width: 7rpx;
        margin-left: 2rpx;
        display: inline-block;
        -webkit-animation: stretchdelay 1.9s infinite ease-in-out;
        animation: stretchdelay 1.2s infinite ease-in-out;
    }

    .spinner .rect2 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }

    .spinner .rect3 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

    @-webkit-keyframes stretchdelay {
        // 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
        // 20% { -webkit-transform: scaleY(1.0) }
    }

    @keyframes stretchdelay {
        10% {
            height: 10%;
        }

        15% {
            height: 30%;
        }

        5% {
            height: 100%;
        }

        32% {
            height: 70%;
        }

        36% {
            height: 30%;
        }

        48% {
            height: 40%;
        }

        60% {
            height: 5%;
        }

        80% {
            height: 30%;
        }

        88% {
            height: 60%;
        }

        100% {
            height: 90%;
        }
    }

 


程序员灯塔
转载请注明原文链接:CSS动态 =》“正在直播中”
喜欢 (0)