美文网首页
浏览页面的圆形倒计时css

浏览页面的圆形倒计时css

作者: 荼蘼toome | 来源:发表于2020-06-03 09:24 被阅读0次
    <div class="circl" @click="share">
                <div class="left" :class="{hid2:height2,color2:color2}" ></div>
                <div class="right" :class="{hid1:height1,color1:color1}" ></div>
                <div class="text">
                    <span>{{time}}s</span>
                    <span>分享签到</span>
                </div>
            </div>
    
    .circl{
            width: 60px;
            height: 60px;
            border-radius: 30px;
            overflow: hidden;
            background: $themeColor1;
            position:fixed;
            right: 14.5px;
            bottom:17px;
            .left{
                width: 50%;height: 100%;position: absolute;left:0;top: 0;background: #4a77ad;
                transition: all 5s linear;
                border-bottom-left: 30px;
                border-top-left: 30px;
                transform-origin:right center;
                z-index:1;
            }
            .right{
                width: 50%;height: 100%;position: absolute;right:0;bottom: 0;background: #4a77ad;
                transition: all 5s linear;
                border-bottom-right-radius: 30px;
                border-top-right-radius: 30px;
                transform-origin:left center;
                z-index:2;
            }
            .hid1{transform: rotateZ(180deg);}
            .hid1.color1{background: $themeColor1;transform:rotateZ(0deg); transition: all 0s;}
            .hid2{transform: rotateZ(180deg);}
            .hid2.color2{background: $themeColor1;transition: all 0s;}
            .text{
                font-size: 12px;
                position: absolute;
                width: 100%;height: 100%;
                text-align: center;z-index: 4;color: #fff;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
        }
    

    相关文章

      网友评论

          本文标题:浏览页面的圆形倒计时css

          本文链接:https://www.haomeiwen.com/subject/dlgyzhtx.html