css做个波浪悬浮球的实现方法做个波浪悬浮球的实现方法
最近公司项目有个需求是在网页上操作虚拟机，emmm…操作就操作吧，谁让是领导提的，咱也不知道，咱也不敢问啊….咋
办？搞吧，爬了n多个坑才终于把虚拟机功能给引入到项目中，看着熟悉的Linux操作窗口，都别拦我，让我装一会*
领导看了十分满意，然后说…我看电脑上都有那个悬浮球，我们这也得有吧
？？？啥玩意？？？去他电脑上看了一下才发现是安全软件的那个展示电脑使用情况的悬浮球，WTF！！你见过哪个Linux有
这悬浮球的？你咋不让我再给你整一只瑞星小狮子在旁边给你跳舞呢？？算了还是别说了，说了真让我做怎么搞….
需求需求
需求说起来很简单–》小球、悬浮在页面最上层、内部有波浪能动、波浪高度跟虚拟机使用情况有关、鼠标放上去展示详细信
息，大概就是酱婶的
开搞开搞
环境环境
项目使用的是vue框架，所以demo都是在vue环境下，不过代码其实没什么环境需求的。
设计思路设计思路
看到这个需求的第一想法就是用canvas画一个悬浮球，这个倒也不难，网上挺多案例的，后面想能不能用css动画试试？性能
还能更好一下，毕竟在有虚拟机的页面已经是有点卡了，任何性能的提升都是有必要的。
主要实现原理就是使用一个不停运动的a遮在b块上面，然后让a的颜色与背景颜色相同，从而造成b的边缘在不停波动的效
果。
1.画个大圆套小圆画个大圆套小圆
<div class="container">
<div class="wave"></div>
</div>
<style>
.container {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid #67c23a;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
资源评论
weixin_38706455
- 粉丝: 5
- 资源: 920
最新资源
- SA213-TP310HCbN钢采用镍基焊丝ERNiCrCoMo-1焊接工艺探讨 - .pdf
- SA213-T91钢小管低温环境下的焊接工艺 - .pdf
- SA-335P91钢的焊接工艺探讨.pdf
- SA—335P91钢的焊接工艺试验研究.pdf
- SA335P91钢焊接工艺研究.pdf
- SA335P91集箱焊接工艺的改良.pdf
- SA-335P91耐热钢的焊接性试验研究.pdf
- SA387Gr．22C1．2钢在产品中的焊接.pdf
- SA904L钢板焊接工艺探讨.pdf
- SA-724MGrB层板的焊接工艺评定.pdf
- SA516-70+SA240-TP316L不锈复合钢板的焊接.pdf
- SA516 Cr60厚板塔器焊接.pdf
- SA516-Gr70钢焊接接头低温断裂阻力研究.pdf
- SAF2507超级双相不锈钢焊接技术研究现状.pdf
- SAF2205双相不锈钢焊接换热管热处理工艺及设备改进.pdf
- SAF2507与Q235钢异种金属焊接接头组织研究.pdf
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
