<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;
}
}
网友评论