命理八字之答案之书前端uniapp效果实现_uniapp 紫薇命理-优快云博客

本文链接：https://blog.youkuaiyun.com/ktucms/article/details/138046960

文章介绍了在uniapp项目中使用CSS和JavaScript实现的一个动态雷达动画效果，展示了如何通过关键帧动画控制不同div元素的缩放和透明度变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#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;}
}