css做个波浪悬浮球的实现方法

2024-07-11 08:42:24

字体：大中小

来源：转载

供稿：网友

最近公司项目有个需求是在网页上操作虚拟机，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>

看效果