【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)
    }
    }

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

相关推荐
普通码农12 分钟前
uni.setClipboardData在 iOS 剪贴板复制失败解决方案
前端
_孤傲_14 分钟前
webpack实现常用plugin
前端·webpack·node.js
golang学习记25 分钟前
从0死磕全栈之Next.js 字体优化实战:零布局偏移、高性能、隐私友好的字体加载方案
前端
zachhere30 分钟前
深入了解 OpenAI Apps SDK 的内部机制
前端
张可爱34 分钟前
20251015-Vue3八股文整理
前端
ruanCat34 分钟前
记一次因 vue-router 升级而导致的 uniapp 故障
前端·vue.js
Damon小智34 分钟前
基于 Rokid JSAR 打造精致的 3D 白色飞机模型
前端·虚拟现实
Mintopia37 分钟前
🌌 知识图谱与 AIGC 融合:
前端·javascript·aigc
三十_40 分钟前
TypeORM 基础篇:项目初始化与增删改查全流程
前端·后端