<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS 玻璃特效</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; font-family: Helvetica, sans-serif; } .background { width: 100vw; height: 100vh; max-width: 100%; background: url("./background.jpg") no-repeat; background-size: cover; display: flex; align-items: center; justify-content: center; } .glass { width: 50vw; height: 50vh; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background-color: rgba(255, 255, 255, 0.25); box-shadow: 0 8px 32px 0 rgba(27, 0, 37, 0.89); border-radius: 10px; } .background > h1 { position: absolute; font-size: 12vw; color: #c8a3ff; } .glass h1 { text-align: center; padding-top: 0.2em; font-size: 8vw; color: #ffffff; text-shadow: 1px 1px 12px rgba(255, 255, 255, 0.2); } </style> </head> <body> <div class="background"> <h1>CSS Glassmporphsim</h1> <div class="glass"> <h1>Hello!</h1> </div> </div> <!-- Photo by Martin Mariani from Pexels --> </body> </html>
前端知识案例学习4-毛玻璃效果代码实现局部
2023-02-11
84
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
前端知识案例学习4-毛玻璃效果代码实现局部
目录
相关文章
|
12天前
|
JavaScript
前端开发
Docker
前端全栈之路Deno篇（二）：几行代码打包后接近100M？别慌，带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时，生成的可执行文件体积较大，通常接近 100 MB，而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时，使其能够在目标设备上独立运行，无需额外安装依赖。尽管体积较大，但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法，可以优化可执行文件的体积。
49
3
3
|
1天前
|
前端开发
JavaScript
开发者
前端开发的终极技巧：如何让你的代码既简洁又高效，还能减少bug？
【10月更文挑战第30天】前端开发充满挑战与创新，如何编写简洁高效且少bug的代码是开发者关注的重点。本文介绍五大技巧：1. 模块化，提高代码复用性；2. 组件化，降低代码耦合度；3. 使用现代框架，提高开发效率；4. 统一代码规范，降低沟通成本；5. 利用工具，优化代码质量。掌握这些技巧，让前端开发更高效。
7
1
1
|
8天前
|
前端开发
JavaScript
开发者
揭秘前端高手的秘密武器：深度解析递归组件与动态组件的奥妙，让你代码效率翻倍！
【10月更文挑战第23天】在Web开发中，组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身，适用于处理层级结构数据，如菜单和树形控件。动态组件则根据数据变化动态切换组件显示，适用于不同业务逻辑下的组件展示。通过示例，展示了这两种组件的实现方法及其在实际开发中的应用价值。
14
1
1
|
28天前
|
前端开发
JavaScript
开发者
利用代码分割优化前端性能：高级技巧与实践
【10月更文挑战第2天】在现代Web开发中，代码分割是优化前端性能的关键技术，可显著减少页面加载时间。本文详细探讨了代码分割的基本原理及其实现方法，包括自动与手动分割、预加载与预取、动态导入及按需加载CSS等高级技巧，旨在帮助开发者提升Web应用性能，改善用户体验。
28
5
5
|
1月前
|
前端开发
小程序
JavaScript
|
3月前
|
缓存
前端开发
数据格式
|
3月前
|
JavaScript
前端开发
小程序
【技巧】JS代码这么写，前端小姐姐都会爱上你
本文介绍了JavaScript编程中的实用技巧，包括解构赋值的多种妙用、数组操作技巧及常用JS功能片段。解构赋值部分涵盖短路语法防错、深度解构及默认值赋值；数组技巧包括按条件添加数据、获取最后一个元素及使用`includes`优化`if`语句；常用功能片段则涉及URL参数解析、页面滚动回顶部及获取滚动距离等。通过这些技巧，提升代码质量和效率。
29
0
0
|
3月前
|
前端开发
API
开发者
构建前端防腐策略问题之防腐层的核心代码实现以RxJS Observable为中心的的问题如何解决
构建前端防腐策略问题之防腐层的核心代码实现以RxJS Observable为中心的的问题如何解决
44
1
1
|
3月前
|
前端开发
JavaScript
Web 前端大揭秘！JS 数据类型检测竟如此震撼，一场惊心动魄的代码探秘之旅等你来！
【8月更文挑战第23天】在Web前端开发中，合理检测数据类型至关重要。JavaScript作为动态类型语言，变量类型可在运行时变化，因此掌握检测技巧十分必要。
34
1
1
|
3月前
|
前端开发
IDE
Java
"揭秘前端转Java的秘径：SpringBoot Web极速入门，掌握分层解耦艺术，让你的后端代码飞起来，你敢来挑战吗？"
【8月更文挑战第19天】面向前端开发者介绍Spring Boot后端开发，通过简化Spring应用搭建，快速实现Web应用。本文以创建“Hello World”应用为例，展示项目基本结构与运行方式。进而深入探讨三层架构（Controller、Service、DAO）下的分层解耦概念，通过员工信息管理示例，演示各层如何协作及依赖注入的使用，以此提升代码灵活性与可维护性。
52
2
2
热门文章
最新文章
1
好程序员web前端培训分享JavaScript学习笔记cookie
2
前端 时间个性化 插件 jquery.timeago.js
3
前端分页插件pagination
4
[前端]jekyll+markdown+github搭建个人博客
5
前端，测试如何修改后端接口返回的响应数据
6
前端进阶|第四天从setTimeout、Promise看js 的异步机制
7
购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session
8
合格前端系列第四弹-如何监听一个数组的变化
9
从0到上线开发企业级电商项目_前端_01_sublime使用技巧
10
前端插件集合