css实现图片毛玻璃效果

最新推荐文章于 2024-03-19 14:58:33 发布

码小虎

最新推荐文章于 2024-03-19 14:58:33 发布

阅读量537

点赞数 2

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/qq_43105939/article/details/121204730

版权

这篇博客展示了如何使用CSS实现毛玻璃效果，包括背景图片的模糊处理和过渡动画。当鼠标悬停在盒子上时，会出现标题、副标题以及社交媒体图标，同时伴随着平滑的动画效果。博客通过实例代码详细解释了实现这一效果的关键CSS属性和技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图

在这里插入图片描述

css代码

<!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>毛玻璃</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body{
            background-color: rgb(226, 244, 253);
        }
        .box{
            float: left;
            position: relative;
            margin:10px;
            height: 300px;
            width: 200px;
            /* border:1px solid red; */
            background:url("https://img0.baidu.com/it/u=3149292902,2355207328&fm=26&fmt=auto") no-repeat center;
            background-size:200px 300px ;
            overflow: hidden;
            border:1px solid rgb(182, 182, 182);
            border-radius: 10px;
        }
        span{
            position:absolute;
            bottom: -122px;
            /* bottom: 0; */
            display: inline-block;
            height: 120px;
            width: 200px;
            box-shadow:0 0 10px 0px rgba(44, 44, 44, 0.5);
            border:1px solid rgba(204, 200, 200, 0.1);
            backdrop-filter:blur(10px);/*这里是主要的毛玻璃效果*/
            transition: bottom 0.5s;
            transition-delay: 0.7s;
        }
        .box:hover span{
            bottom: 0px;
            transition-delay:0s;
        }
        .hear{
            margin-top: 20px;
            color:#fff;
            font-weight: bold;
            text-align: center;
            width: 200px;
            height: 33px;
            transform:translateY(-20px);
            transition:0.5s;
            transition-delay:0.5s;
            opacity: 0;
            visibility:hidden;
            /* border:1px solid red; */
            
        }
        .uul{
            margin: 10px 0 0 0;
            list-style: none;
        }
        .box:hover .hear{
            visibility: visible;
            transform: translateY(0px);
            opacity: 1;
        }
        .uul i{
            margin-left: 20px;
            color: #fff;
            float: left;
            transform:translateY(20px);
            transition:0.5s;
            opacity: 0;
            transition-delay: calc(0.2s * var(--i));
        }
        .box:hover .uul i{
            transform:translateY(0px);
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="box">
        <span class="dd">
            <div class="hear">
                SOMEONE FAMOOURS<BR />
                CREATIVE DESIGNER
            </div>
            <ul class="uul">
                <li><i style="--i:1" class="fa fa-facebook" aria-hidden="true"></i></li>
                <li><i style="--i:2" class="fa fa-twitter" aria-hidden="true"></i></li>
                <li><i style="--i:3" class="fa fa-instagram" aria-hidden="true"></i></li>
            </ul>
        </span>
    </div>

        <div class="box" style="background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fstatic.7192.com%2Fsite%2F1209141711212vizhtk7.jpg');">
            <span class="dd">
                <div class="hear">
                    SOMEONE FAMOOURS<BR />
                    CREATIVE DESIGNER
                </div>
                <ul class="uul">
                    <li><i style="--i:1" class="fa fa-facebook" aria-hidden="true"></i></li>
                    <li><i style="--i:2" class="fa fa-twitter" aria-hidden="true"></i></li>
                    <li><i style="--i:3" class="fa fa-instagram" aria-hidden="true"></i></li>
                </ul>
            </span>
        </div>

        <div class="box" style="background-image: url('https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/lbc/w%3D448%3Bq%3D90/sign=6933ed314d4a20a4311e3dc3a869e91f/cdbf6c81800a19d8961b312631fa828ba61e46fc.jpg');">
            <span class="dd">
                <div class="hear">
                    SOMEONE FAMOOURS<BR />
                    CREATIVE DESIGNER
                </div>
                <ul class="uul">
                    <li><i style="--i:1" class="fa fa-facebook" aria-hidden="true"></i></li>
                    <li><i style="--i:2" class="fa fa-twitter" aria-hidden="true"></i></li>
                    <li><i style="--i:3" class="fa fa-instagram" aria-hidden="true"></i></li>
                </ul>
            </span>
        </div>

        <div class="box" style="background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.napai.cn%2Fstatic_old%2Falbum%2F46063%2F22770%2F201505261759414606322770267.jpg');">
            <span class="dd">
                <div class="hear">
                    SOMEONE FAMOOURS<BR />
                    CREATIVE DESIGNER
                </div>
                <ul class="uul">
                    <li><i style="--i:1" class="fa fa-facebook" aria-hidden="true"></i></li>
                    <li><i style="--i:2" class="fa fa-twitter" aria-hidden="true"></i></li>
                    <li><i style="--i:3" class="fa fa-instagram" aria-hidden="true"></i></li>
                </ul>
            </span>
        </div>
    
    </div>
    
</body>
</html>

结束啦