最近公司项目有个需求是在网页上操作虚拟机,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%; transform: translate(-50%, -50%); padding: 5px; } .wave { position: relative; width: 100px; height: 100px; background-image: linear-gradient(-180deg, #aaff80 13%, #67c23a 91%); border-radius: 50%; } </style>
然后我们得到了这个
2.画遮盖层并让它扭起来
<div class="container"> <div class="wave"></div> <div class="wave-mask"></div> </div> <style> .wave-mask { position: absolute; width: 200px; height: 200px; top: 0; left: 50%; border-radius: 40%; background-color: rgba(212, 24, 24, 0.9); transform: translate(-50%, -70%) rotate(0); animation: toRotate 10s linear -5s infinite; z-index: 20; } @keyframes toRotate { 50% { transform: translate(-50%, -70%) rotate(180deg); } 100% { transform: translate(-50%, -70%) rotate(360deg); } } </style>
然后就变成了这样(为了看的效果更好,原谅我使用的大红色)
3.裁剪
.container { overflow: hidden; } .wave-mask { background-color: rgba(255, 255, 255, 0.9); }
成品就酱婶的了
4.完善
波浪的高度完全是受wave-mask的top属性影响的,所以要动态变更悬浮球状态只需要计算然后相应的改变top的值就可以了,然后稍微完善一下代码
<template> <div class="home"> <div class="container" :class="{ warning: parseInt(usingRate) > 60, danger: parseInt(usingRate) > 80 }"> <div class="wave"></div> <div class="wave-mask" :style="`top: ${40 - parseInt(usingRate)}px`"></div> </div> <div class="using-slider"> <span>使用率:{{usingRate}} %</span> <el-slider v-model="usingRate"></el-slider> </div> </div> </template> <script> export default { data () { return { usingRate: 0 } } } </script> <style lang="scss" scoped> .container { width: 100px; height: 100px; border-radius: 50%; border: 3px solid #67c23a; background: #ffffff; overflow: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 5px; .wave { position: relative; width: 100px; height: 100px; background-image: linear-gradient(-180deg, #aaff80 13%, #67c23a 91%); border-radius: 50%; } .wave-mask { position: absolute; width: 200px; height: 200px; top: 0; left: 50%; border-radius: 40%; background-color: rgba(255, 255, 255, 0.9); transform: translate(-50%, -70%) rotate(0); animation: toRotate 10s linear -5s infinite; z-index: 20; } &.warning { border: 3px solid #e6a23c; .wave { background-image: linear-gradient(-180deg, #f0c78a 13%, #e6a23c 91%); } &.danger { border: 3px solid #f56c6c; .wave { background-image: linear-gradient(-180deg, #f78989 13%, #f56c6c 91%); } } } } .using-slider { width: 400px; margin: 0 auto; } @keyframes toRotate { 50% { transform: translate(-50%, -70%) rotate(180deg); } 100% { transform: translate(-50%, -70%) rotate(360deg); } } </style>
看效果
大概就酱婶了,第一次写文,文笔不好多多见谅,别说我烂尾了,因为...我要下班了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 外媒:《死亡岛2》或是今年PS+2档最受欢迎游戏
- 群星.1997-世纪之歌第二辑6CD【宝丽金】【WAV+CUE】
- 邵萱.1997-是是非非【捷登】【WAV+CUE】
- 巫启贤.1998-我是你的【风格】【WAV+CUE】
- 【原神手游】「月草的赐慧」祈愿
- 【原神手游】「赤团开时」祈愿
- 【原神手游】「法器·千夜浮梦」介绍
- 陈立农《青春为名 上部曲 - 恋》[FLAC/分轨][290.58MB]
- 张乔西《明星》[320K/MP3][55.23MB]
- 张乔西《明星》[FLAC/分轨][143.08MB]
- 《P3R:Episode Aegis》:重复爬塔的悲伤
- 《公会传说:遗落的世界》EA版评测:怀旧感CRPG还在追我
- 诛仙老玩家会喜欢《诛仙世界》吗?
- ABC唱片-《母帶直刻神奇黑胶CD》[FLAC+CUE]
- 柏菲·李一凤《真爱过关》限量开盘母带ORMCD[低速原抓WAV+CUE]