news 2026/4/17 21:03:13

短视频app搭建,如何实现毛玻璃效果?

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
短视频app搭建,如何实现毛玻璃效果?

短视频app搭建,如何实现毛玻璃效果?

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>毛玻璃</title><style>*{margin:0;padding:0;box-sizing:border-box;}section{position:relative;width:100%;height:100vh;display:flex;justify-content:center;align-items:center;background:url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F004%2F531%2F381%2F4339f96900344574a0c8ca272a7b8f27.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622900995&t=a974c9874eb669d9c053d93f8bb139e2');background-position:center;background-attachment:fixed;/*规定背景图像是否固定或者随着页面的其余部分滚动。*/background-size:cover;overflow:hidden;}h2{font-size:5em;color:#fff;pointer-events:none;/*设置元素是否对指针事件做出反应*/text-shadow:110px 20pxrgba(0,0,0,0,.5);}.glass{position:absolute;width:300px;height:200px;transform:translate(-50%,-50%);pointer-events:none;box-shadow:025px 50pxrgba(0,0,0,0,.2);background:transparent;backdrop-filter:blur(10px);/*可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。 因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明*/transition:0.2s;}</style></head><body><section><h2>glass</h2><divclass="glass"></div></section><script>document.addEventListener('mousemove',function(e){constglass=document.querySelector('.glass')glass.style.left=e.offsetX+'px' glass.style.top=e.offsetY+'px'})</script></body></html>

以上就是短视频app搭建,如何实现毛玻璃效果?, 更多内容欢迎关注之后的文章

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/17 7:07:06

2000亿美元!2026年全球游戏行业的新格局与新变量

2000亿美元&#xff01;2026年全球游戏行业的新格局与新变量 2026年&#xff0c;全球游戏市场规模预计突破2000亿美元&#xff08;约2050-2100亿美元&#xff09;&#xff0c;从2025年的1888-1970亿美元增长3-7%。 这标志着后疫情低迷期的复苏&#xff08;增长率从2022-2024的…

作者头像 李华
网站建设 2026/4/17 19:43:22

鸿蒙APP开发从入门到精通:ArkUI组件库详解与常用组件实战

鸿蒙APP开发从入门到精通&#xff1a;ArkUI组件库详解与常用组件实战 鸿蒙&#xff08;HarmonyOS NEXT&#xff09;是华为推出的分布式操作系统&#xff0c;其APP开发框架以ArkUI为核心&#xff0c;采用ArkTS&#xff08;基于TypeScript的扩展语言&#xff09;进行声明式开发。…

作者头像 李华
网站建设 2026/4/16 17:43:27

Router_T000_ConceptMECE

startmindmap* 汇报总图** 动机价值*** 故事钩子*** 价值主张** 现状基线*** 基线速览*** SafeDreamer*** UNISafe外盾*** SPOWL** 问题缺陷*** 主流缺陷*** OOD幻觉*** 外盾不学*** 固定阈值** 创新方案*** 核心创新*** Risk-Bellman*** ucert内生*** 不改环境奖*** 插入点** …

作者头像 李华
网站建设 2026/4/16 9:39:13

Java计算机毕设之基于springboot+vue的游戏装备账号销售商城平台系统基于springboot的游戏售卖商城系统(完整前后端代码+说明文档+LW,调试定制等)

博主介绍&#xff1a;✌️码农一枚 &#xff0c;专注于大学生项目实战开发、讲解和毕业&#x1f6a2;文撰写修改等。全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战 ✌️技术范围&#xff1a;&am…

作者头像 李华