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%;
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>
看效果
大概就酱婶了，第一次写文，文笔不好多多见谅，别说我烂尾了，因为...我要下班了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
CSS简单实现网页悬浮效果（对联广告）-CSS教程-网页制作-网页教学网
css固定定位，即悬浮效果（例如对联广告），不用js，css中"position:fixed;"即可。 position:fixed; 以视口为包含块，因此在浏览器窗口内固定。 ie 6.0不支持，2008-10-17
这篇文章主要介绍了纯CSS实现DIV悬浮的示例代码(固定位置),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一2021-01-07
这篇文章主要介绍了CSS 鼠标悬浮在图片上添加遮罩层效果的实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-17
这篇文章主要介绍了css实现悬浮客服效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-13
平时我们在浏览网页时，如下图的导航栏已经屡见不鲜了，当鼠标放上去时，右侧隐藏的内容就会慢慢平滑展开，非常美观且实用，今天小编通过本文给大家分享基于CSS实现网页悬2023-02-13
最新评论