磨砂玻璃效果

最新推荐文章于 2024-04-29 04:19:57 发布

mini_055

最新推荐文章于 2024-04-29 04:19:57 发布

阅读量547

点赞数 2

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_61480985/article/details/127948451

版权

在学习中我发现了一个好玩的效果，话不多说，先看效果图:

看上图，我们可以发现，中间的字是不是看的不是很清晰，这就是磨砂玻璃的效果，具体怎么实现，也很简单，就一句代码就能实现。

filter :滤镜，我们通常都会想到用滤镜大的模糊度来实现，但是需要注意

filter: blur(); 模糊自己

filter: blur(5px);

backdrop-filter: blur(); 不会模糊自己，是模糊被遮盖的部分

首先我们先来实现基本的样式。

html

body内容部分就是一个div里面在包含div,model就是用来实现磨砂玻璃效果的。

 <div class="wrap">
        <h1>HELLO WORLD</h1>
        <div class="model"></div>
    </div>

css样式

给body宽高都设为100%，铺满全屏，

background:linear-gradient(to right, yellow,red);线性渐变，从一个颜色向其他颜色过渡的效果，可以让背景好看一点，默认为从上往下渐变，我设置了两个颜色，是从左往右渐变，所以是to right,如果想换个方向，就to 后面跟结束的那个方向就可以了，左上往右下，右上往左下都是可以的。

*{
            margin: 0;
            padding: 0;
        }
        body{
            width: 100%;
            height: 100%;
        }
        .wrap{
            position: relative;
            background:linear-gradient(to right, yellow,red);
            
        }
        h1{
            text-align: center;
            line-height: 100vh;
        }
        .model{
            width: 300px;
            height: 100px;
            /* border: 1px solid; */
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -150px;
            margin-top: -50px;
            background-color: rgba(255,255,255,0.4);
            border-radius: 10px;
        }
    </style>

效果显示如下：

接下来就是实现玻璃磨砂效果了，只用在model样式后面加上下面这句话就能实现效果了。

backdrop-filter: blur(4px);

效果如下：

看到这里其实玻璃磨砂效果还能有别的玩法，请看下图：

整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-image: url(./img/01.jpeg);
            /* 把图片大小设为全部铺满 */
            background-size: cover;
            height: 100vh;
        }
        .model{
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
            /* 过渡效果，持续时间2S */
            transition: all 2s;
            border-left: 5px solid #333;
            /* 灰度设置 
            被遮盖的部分全部变为灰色
            */
            backdrop-filter: grayscale(1);
        }
        body:hover .model{
            width: 0;
        }
    </style>
</head>
<body>
    <div class="model"></div>
</body>
</html>

mini_055

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
磨砂玻璃效果

在学习中我发现了一个好玩的效果，话不多说，先看效果图:看上图，我们可以发现，中间的字是不是看的不是很清晰，这就是磨砂玻璃的效果，具体怎么实现，也很简单，就一句代码就能实现。filter :滤镜，我们通常都会想到用滤镜大的模糊度来实现，但是需要注意首先我们先来实现基本的样式。
复制链接

扫一扫