【vue】css模拟玻璃球体效果(带高光)

div部分:

bash 复制代码
<div class="wave_ball">
        <!--          高光部分-->
        <div class="lightBg light1"></div>
        <div class="lightBg light2"></div>
      </div>

样式部分:

bash 复制代码
.wave_ball {
    position: absolute;
    top: 0;
    left: 0;
    width: 600px;
    height: 600px;
    overflow: hidden;
    line-height: 0;
    border-radius: 50%;
    //background: #267dd3;
    box-shadow: inset 0 0 15px 2px rgb(255, 255, 255, 0.6),
    inset 0 0 20px 20px rgb(255, 255, 255, 0.25);
    z-index: 3;

    .lightBg {
      position: absolute;
      background: radial-gradient(farthest-side at 50% 50%, #ffffffb0 5%, #0000);
    }

    .light1 {
      top: 80px;
      left: 130px;
      border-radius: 30px;
      width: 50px;
      height: 70px;
      transform: rotateY(20deg) rotate(55deg)
    }

    .light2 {
      top: 180px;
      left: 60px;
      border-radius: 30px;
      width: 26px;
      height: 80px;
      transform: rotateY(20deg) rotate(23deg)
    }
    }

效果图(仅玻璃球部分):

相关推荐
武昌库里写JAVA1 小时前
C语言 #pragma once - C语言零基础入门教程
vue.js·spring boot·sql·layui·课程设计
iCoding911 小时前
前端分页 vs 后端分页:技术选型
前端·后端·系统架构
mingtianyihou331 小时前
使用 Service Worker 限制请求并发数
前端
张可爱1 小时前
20251017-Vue2八股文整理(上篇)
前端
FanetheDivine1 小时前
ts中如何描述一个复杂函数的类型
前端·typescript
lightgis1 小时前
chrome中的axure插件提示无法不受支持
前端·chrome
速易达网络1 小时前
Vue3 原生移动应用开发来了
前端·javascript·css
GISer_Jing2 小时前
LLM对话框项目技术栈&重难点总结
前端·ai·node.js
我爱学习_zwj2 小时前
【鸿蒙进阶-7】鸿蒙与web混合开发
前端·华为·harmonyos
小谭鸡米花2 小时前
高德地图电子围栏/地图选区/地图打点
前端·javascript·vue.js