<!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
54
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
前端知识案例学习4-毛玻璃效果代码实现局部
目录
相关文章
|
18天前
|
前端开发
小程序
Java
|
21天前
|
缓存
前端开发
|
1月前
|
JSON
前端开发
Java
|
1月前
|
缓存
前端开发
JavaScript
|
2月前
|
前端开发
JavaScript
安全
从前端性能优化角度谈JavaScript代码压缩与混淆
本文从前端性能优化的角度出发，探讨了JavaScript代码压缩与混淆的重要性及实现方式，通过分析不同压缩混淆工具的特点和效果，为开发者提供了实用的指导和建议。
38
1
1
|
10天前
|
前端开发
JavaScript
算法
比较流行的前端代码书写规范都有哪些
【4月更文挑战第13天】前端代码规范增进代码可读性和团队协作，包括缩进（用2空格）、命名（变量 camelCase，常量 MY_CONSTANT，类 PascalCase）、注释、语句与表达式、错误处理、代码复用。文件命名规范涉及扩展名、目录结构、简洁文件名、入口文件和配置文件命名。遵循这些规范能提高代码一致性，但需按项目需求调整。不断学习新规范以适应前端技术发展。
14
1
1
|
12天前
|
监控
前端开发
JavaScript
如何使用浏览器调试前端代码？
【4月更文挑战第11天】前端开发中，浏览器调试是关键技能，能提升代码质量。本文介绍了如何使用浏览器的调试工具：1) 打开调试窗口（F12或右键检查）；2) Elements标签页检查DOM结构和样式；3) Console调试JavaScript，查看日志和错误信息；4) Sources设置断点调试JS文件；5) 利用Network、Performance和Memory等标签页优化性能。熟悉调试工具、利用日志和错误信息能有效定位问题，提高开发效率。
33
7
7
|
4月前
|
前端开发
JavaScript
前端js代码一句话模拟Ctrl+A全选网页内容效果document.execCommand(‘selectAll‘)；
前端js代码一句话模拟Ctrl+A全选网页内容效果document.execCommand(‘selectAll‘)；
51
1
1
|
1月前
|
前端开发
开发者
React Hooks：提升前端开发效率和代码可维护性
传统的 React 类组件在处理状态管理和生命周期函数时存在一些限制，而引入的 React Hooks 技术可以帮助前端开发者更高效地管理组件状态和逻辑，提升代码的可读性和可维护性。本文将介绍 React Hooks 的基本用法及其在实际项目中的应用场景。
23
1
1
|
2月前
|
开发框架
前端开发
JavaScript
如何提高前端代码的可维护性
【2月更文挑战第3天】在现代软件开发中，前端已经变得越来越重要。一个好的前端代码可以帮助团队更快速、高效地开发出高质量的产品。但是，随着项目规模的扩大，前端代码也变得越来越复杂和难以维护。本文将介绍一些提高前端代码可维护性的方法。
32
2
2