命理八字之答案之书前端uniapp效果实现

#uniapp#

#答案之书#

不讲废话，先上截图

 

 

  <div class="padding">
                <div class="flex align-center justify-center" style="padding-top:100px;">
                    <div class="radarContainer">
                        <div id="radarBox">
                            <div>div>
                            <div>div>
                            <div>div>
                        div>
                        <div class="radarNum">{{timebox.total}}div>
                    div>
                div>
                <div style="position:absolute;bottom:120px;left:0;width:100%;line-height:36px;">
                    <div class="text-center text-white">
                        <div>心中默念您的问题div>
                        <div>长按3s后解答div>
                    div>
                div>
            div>

div{box-sizing:border-box;}
.radarContainer{position:relative;width:120px;height:120px;}
.radarContainer .radarNum{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:22px;color:white;z-index:91;width:32px;height:32px;line-height:32px;text-align:center;}
#radarBox{position:relative;width:60px;height:60px;left:50%;top:50%;transform:translate(-50%,-50%);}
#radarBox div{
    position:absolute;
    z-index:90;
    width:60px;
    height:60px;
    border:5px solid #fff;
    border-radius:999px;
    opacity:0;
    animation:radar 2s infinite linear;
}
#radarBox div:nth-child(1){
    animation-delay:0s;
}
#radarBox div:nth-child(2){
    animation-delay:0.66s;
}
#radarBox div:nth-child(3){
    animation-delay:1.33s;
}
 
@keyframes radar{
    0%{transform:scale(0);opacity:0;}
    25%{transform:scale(0);opacity:0.5;}
    50%{transform:scale(1);opacity:1.0;}
    75%{transform:scale(1.5);opacity:0.5;}
    100%{transform:scale(2);opacity:0;}
}