毛玻璃效果

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

qq_46302247

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

阅读量416

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_46302247/article/details/122882732

版权


<html>

<head>
    <title>毛玻璃效果</title>
    <style type="text/css">
    body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        overflow: hidden;
        background-image: url("http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .container {
        width: 100vw;
        height: 100vh;
    }

    .x-y-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .blur {
        position: absolute;
        overflow: hidden;
        z-index: 1;
        width: 500px;
        height: 300px;
        cursor: move;
    }


    .blur::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        margin: -30px;
        background-image: url("http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg");
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
        filter: blur(10px);
    }
    </style>
</head>

<body>
    <div class="container x-y-center">
        <div class="blur x-y-center">
            <div>Gaussian Blur</div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var element = document.querySelector(".blur");
    element.onmousedown = function(event) {
        var event = event || window.event;
        var edgeX = event.clientX - element.offsetLeft;
        var edgeY = event.clientY - element.offsetTop; 
        document.onmousemove = function(event) {
            var event = event || window.event;
            var relativeX = event.clientX - edgeX;
            var relativeY = event.clientY - edgeY;
            element.style.left =  relativeX + "px";
            element.style.top = relativeY + "px";
            return false;
        };
        document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;
    }
</script>

</html>

在这里插入图片描述

qq_46302247

关注

0
点赞
踩
0

收藏

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

<html><head> <title>毛玻璃效果</title> <style type="text/css"> body { width: 100vw; height: 100vh; margin: 0; overflow: hidden; background-image: url("http://www.sdust.edu.cn/_.
复制链接

扫一扫