css做个波浪悬浮球？

calx 发布于2019-05-23 17:28 / 2620人阅读

摘要：设计思路看到这个需求的第一想法就是用画一个悬浮球，这个倒也不难，网上挺多案例的，后面想能不能用动画试试性能还能更好一下，毕竟在有虚拟机的页面已经是有点卡了，任何性能的提升都是有必要的。

最近公司项目有个需求是在网页上操作虚拟机，emmm...操作就操作吧，谁让是领导提的，咱也不知道，咱也不敢问啊....咋办？搞吧，爬了n多个坑才终于把虚拟机功能给引入到项目中，看着熟悉的Linux操作窗口，都别拦我，让我装一会*

领导看了十分满意，然后说...我看电脑上都有那个悬浮球，我们这也得有吧

？？？啥玩意？？？去他电脑上看了一下才发现是安全软件的那个展示电脑使用情况的悬浮球，WTF！！你见过哪个Linux有这悬浮球的？你咋不让我再给你整一只瑞星小狮子在旁边给你跳舞呢？？算了还是别说了，说了真让我做怎么搞....

需求

需求说起来很简单--》小球、悬浮在页面最上层、内部有波浪能动、波浪高度跟虚拟机使用情况有关、鼠标放上去展示详细信息，大概就是酱婶的

开搞

环境

项目使用的是vue框架，所以demo都是在vue环境下，不过代码其实没什么环境需求的。

设计思路

看到这个需求的第一想法就是用canvas画一个悬浮球，这个倒也不难，网上挺多案例的，后面想能不能用css动画试试？性能还能更好一下，毕竟在有虚拟机的页面已经是有点卡了，任何性能的提升都是有必要的。

主要实现原理就是使用一个不停运动的a遮在b块上面，然后让a的颜色与背景颜色相同，从而造成b的边缘在不停波动的效果。

1.画个大圆套小圆

然后我们得到了这个

2.画遮盖层并让它扭起来

然后就变成了这样（为了看的效果更好，原谅我使用的大红色）

3.裁剪

.container {
  overflow: hidden;
}
.wave-mask {
  background-color: rgba(255, 255, 255, 0.9);
}

成品就酱婶的了

4.完善

波浪的高度完全是受wave-mask的top属性影响的，所以要动态变更悬浮球状态只需要计算然后相应的改变top的值就可以了，然后稍微完善一下代码

看效果

大概就酱婶了，第一次写文，文笔不好多多见谅，别说我烂尾了，因为...我要下班了

云服务器 GPU云服务器 js手机拖动悬浮球波浪线大波浪 html5波浪滚动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/7303.html

react下移动端可吸附悬浮窗，悬浮球，悬浮按钮，支持拖动拖拽功能

摘要：基于实现的移动端的可吸附悬浮按钮预览地址移动端源码地址安装使用基于react实现的移动端的可吸附悬浮按钮预览地址(移动端)： https://kkfor.github.io/suspe... 源码地址： https://github.com/kkfor/susp... 安装 npm install suspend-button -S 使用 import React, { Compo...

kun_jian 2019-08-23 16:57 评论0 收藏0
react下移动端可吸附悬浮窗，悬浮球，悬浮按钮，支持拖动拖拽功能

摘要：基于实现的移动端的可吸附悬浮按钮预览地址移动端源码地址安装使用基于react实现的移动端的可吸附悬浮按钮预览地址(移动端)： https://kkfor.github.io/suspe... 源码地址： https://github.com/kkfor/susp... 安装 npm install suspend-button -S 使用 import React, { Compo...

张红新 2019-08-29 18:36 评论0 收藏0
CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

摘要：利用用和来做表单即时校验需求让表单检验变得简单优雅，不需要写冗长的代码来校验设置样式丰富了表单元素，提供了类似等表单元素属性。不知细叶谁裁出，二月春风似剪刀。首先，你需要先了解一下渐变的使用技巧。之前不久，由于自己平时涉猎还算广泛，总结了一篇博客：这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已，没想到受到了大家的欢迎，有人希望能博主还能整理个 CSS 的一些黑...

Berwin 2019-08-01 17:42 评论0 收藏0
CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

摘要：利用用和来做表单即时校验需求让表单检验变得简单优雅，不需要写冗长的代码来校验设置样式丰富了表单元素，提供了类似等表单元素属性。不知细叶谁裁出，二月春风似剪刀。首先，你需要先了解一下渐变的使用技巧。之前不久，由于自己平时涉猎还算广泛，总结了一篇博客：这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已，没想到受到了大家的欢迎，有人希望能博主还能整理个 CSS 的一些黑...

MASAILA 2019-08-21 16:46 评论0 收藏0