最简单的前端css仿ios毛玻璃效果

最新推荐文章于 2024-10-13 09:41:28 发布

bing0719

最新推荐文章于 2024-10-13 09:41:28 发布

阅读量1k

点赞数 1

分类专栏： css 前端文章标签： javascript css3 css html5 html

本文链接：https://blog.csdn.net/bf0719/article/details/114313164

版权

本文介绍了如何使用CSS3创建具有iOS风格的毛玻璃效果。包括两种应用场景：一是为背景图片添加虚化效果，二是制作带有虚化背景的导航菜单。通过简单的CSS代码，可以轻松实现这种视觉效果。

摘要由CSDN通过智能技术生成

效果图：https://soft.clbug.com/

效果1：背景图背景虚化。先在背景图设置好图片背景，再在body下的div加上一层背景虚化即可。

body{
    background: url("https://soft.clbug.com/wp-content/uploads/2021/03/adqib-5qb3v-120x120.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.body-div{

    background: hsla(0,0%,100%,.3);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
}

效果2：具有背景虚化的导航菜单,只需要在菜单div上面加上背景虚化的代码及设置下背景颜色即可。

.menu{
    background-color: hsla(0,0%,89.8%,.8);
    background: hsla(0,0%,100%,.3);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
}