<!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
90
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
前端知识案例学习4-毛玻璃效果代码实现局部
目录
相关文章
|
9天前
|
缓存
监控
前端开发
|
2月前
|
JavaScript
前端开发
Docker
前端全栈之路Deno篇（二）：几行代码打包后接近100M？别慌，带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时，生成的可执行文件体积较大，通常接近 100 MB，而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时，使其能够在目标设备上独立运行，无需额外安装依赖。尽管体积较大，但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法，可以优化可执行文件的体积。
135
3
3
|
22天前
|
Web App开发
缓存
监控
|
25天前
|
前端开发
JavaScript
前端界的革命：掌握这些新技术，让你的代码简洁到让人惊叹！
前端技术的快速发展带来了许多令人惊叹的新特性。ES6及其后续版本引入了箭头函数、模板字符串等简洁语法，极大减少了代码冗余。React通过虚拟DOM和组件化思想，提高了代码的可维护性和效率。Webpack等构建工具通过模块化和代码分割，优化了应用性能和加载速度。这些新技术正引领前端开发的革命，使代码更加简洁、高效、可维护。
24
2
2
|
25天前
|
前端开发
JavaScript
测试技术
前端工程师的必修课：如何写出优雅、可维护的代码？
前端工程作为数字世界的门面，编写优雅、可维护的代码至关重要。本文从命名规范、模块化设计、注释与文档、遵循最佳实践四个方面，提供了提升代码质量的方法。通过清晰的命名、合理的模块划分、详细的注释和持续的学习，前端工程师可以写出高效且易于维护的代码，为项目的成功打下坚实基础。
29
2
2
|
1月前
|
监控
前端开发
JavaScript
前端开发的终极奥义：如何让你的代码既快又美，还不易出错？
【10月更文挑战第31天】前端开发是一个充满挑战与机遇的领域，本文从性能优化、代码美化和错误处理三个方面，探讨了如何提升代码的效率、可读性和健壮性。通过减少DOM操作、懒加载、使用Web Workers等方法提升性能；遵循命名规范、保持一致的缩进与空行、添加注释与文档，让代码更易读；通过输入验证、try-catch捕获异常、日志与监控，增强代码的健壮性。追求代码的“快、美、稳”，是每个前端开发者的目标。
35
3
3
|
1月前
|
前端开发
JavaScript
开发者
前端开发的终极技巧：如何让你的代码既简洁又高效，还能减少bug？
【10月更文挑战第30天】前端开发充满挑战与创新，如何编写简洁高效且少bug的代码是开发者关注的重点。本文介绍五大技巧：1. 模块化，提高代码复用性；2. 组件化，降低代码耦合度；3. 使用现代框架，提高开发效率；4. 统一代码规范，降低沟通成本；5. 利用工具，优化代码质量。掌握这些技巧，让前端开发更高效。
64
1
1
|
1月前
|
前端开发
JavaScript
开发者
揭秘前端高手的秘密武器：深度解析递归组件与动态组件的奥妙，让你代码效率翻倍！
【10月更文挑战第23天】在Web开发中，组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身，适用于处理层级结构数据，如菜单和树形控件。动态组件则根据数据变化动态切换组件显示，适用于不同业务逻辑下的组件展示。通过示例，展示了这两种组件的实现方法及其在实际开发中的应用价值。
36
1
1
|
2月前
|
前端开发
JavaScript
开发者
利用代码分割优化前端性能：高级技巧与实践
【10月更文挑战第2天】在现代Web开发中，代码分割是优化前端性能的关键技术，可显著减少页面加载时间。本文详细探讨了代码分割的基本原理及其实现方法，包括自动与手动分割、预加载与预取、动态导入及按需加载CSS等高级技巧，旨在帮助开发者提升Web应用性能，改善用户体验。
41
5
5
|
2月前
|
前端开发
小程序
JavaScript
热门文章
最新文章
1
2022年了！再来手撕一下前端瀑布流代码吧！
2
前端开发：遇到This relative module was not found 的解决方法
3
前端分页插件pagination
4
记录一下前端H5的复制功能在ios端的兼容性问题
5
前端 时间个性化 插件 jquery.timeago.js
6
购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session
7
[前端]jekyll+markdown+github搭建个人博客
8
未读消息（小红点），前端与 RabbitMQ实时消息推送实践，贼简单~
9
你用过的网站前端优化的技术有哪些？
10
wordpress页面前端添加编辑按钮
1
使用Vue.js构建交互式前端的技术探索
87
2
如何优化前端性能：关键步骤和技巧
84
3
nbcio-boot基于jeecg的flowable支持部门经理的单个或多实例支持（前端部分）
94
4
ruoyi-nbcio-plus基于vue3的flowable修正加签与跳转的前端问题
114
5
vue的 blob文件下载文件时，后端自定义异常，并返回json错误提示信息，前端捕获信息并展示给用户
257
6
ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（二）
62
7
ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（一）
79
8
ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题（二）
128
9
ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题（一）
413
10
改造ruoyi-nbcio-plus亿事达多租户前端系统的一些记录
62