css毛玻璃背景的制作

作者 : 开心源码 本文共1475个字,预计阅读时间需要4分钟 发布时间: 2022-05-12 共104人阅读
  • 今天早上, 听到有人说拼多多上市, 而后各种黑, 说什么市场倒退了二十年, 而后搬出那英当年的”雾里看花”,说这首歌就是在讽刺假货横行~
  • “雾里看花”代表了一种”朦胧美”, 假如你喜欢朦胧美, 那你也可能也会喜欢毛玻璃
  • “毛玻璃”效果, 本质上是对背景图片的部分区域进行模糊运算, 比方我们在photoshop经常用的高斯模糊, 这种模糊其实是在UI设计中非常常见, 比方Mac上的siri

  • Mac上siri的毛玻璃效果


  • 对图片动态地进行模糊运算, 是需要消耗少量性能的, 原来这种模糊效果只被使用于软件的设计中,随着浏览器技术的进步, 以及GPU运算能力的提升,这种模糊效果, 开始被使用于网页的设计中


原理和photoshop修图的步骤相似, 使用css中的blur滤镜实现高斯模糊, 对文字部分增加伪元素,对伪元素填充部分背景图片, 并增加模糊效果

  • css实现模糊效果, 与photoshop相似, 但略有不同, css通过postion:fixed来实现背景图片与伪元素对应部分图片的重合
  • css的玩法和photoshop进行平面设计的思维方式很相似, css通过逐渐增加样式, 实现效果, Photoshop也是通过一步步操作的叠加,实现最终的效果
  • css与Photoshop的不同之处在于, css的样式顺序可以随便摆放, 而photoshop的操作步骤有一个严格的操作顺序

html源码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>毛玻璃效果</title></head><style>    body {        margin: 0;    }        main, .wall::before{        background: url("http://fangyuanxiaozhan.com:10080/zhaoolee/images/raw/master/mk.jpg") 50% / cover no-repeat fixed;    }    main{        height: 100vh;        width: 100%;    }    .wall {        width: 380px;        position: absolute;        top: 20%;        left: 10%;        padding: 10px;        color: #A84631;        border-radius: 20px;        overflow: hidden;        z-index: 2;    }    .wall::before {        content: '';        position: absolute;        top: 0; left: 0; bottom: 0; right: 0;        filter: blur(10px);        margin: -20px;        z-index: -1;    }    </style><body>    <main>        <div class="wall">                <p style="font-size: 20px">                    打破次元壁?                </p>                与其说想打破次元壁, 进入二次元,不如说你已经厌倦了三次元人或者物的丑的一面,只想取得美的一面。                <p style="text-align: right">                    -- 知乎 https://www.zhihu.com/question/47849525                </p>        </div>    </main></body></html>
  • 对于人类而言, 用css和Photoshop的思维方式是相似的, 将自己想要展示的效果, 拆解为有限的步骤, 而后将步骤一步一步输入到计算机中
  • 题外话, 人工智能与人类的区别? 以这个毛玻璃效果为例, 人工智能或者许能在一瞬间完成这种效果, 而人类需要3分钟, 但人类在3分钟内,可能会涌现更好的想法, 并将想法增加到本来的步骤中, 人类与人工智能的区别想必已经很显著了~

上一篇 目录 已是最后

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » css毛玻璃背景的制作

发表回复