css如何实现悬浮球效果

2024-10-17 07:07:27

1、定义container为大圆,定义wave为小圆,大圆套小圆

css如何实现悬浮球效果

2、效果如下

css如何实现悬浮球效果

3、定义wave-mask遮盖层并让它扭起来

css如何实现悬浮球效果css如何实现悬浮球效果

4、对wave-mask进行剪裁

css如何实现悬浮球效果

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

css如何实现悬浮球效果

6、完整代码如下图

css如何实现悬浮球效果
猜你喜欢