找回密码
当前位置：前端开发者 > CSS > 正文

CSS前端类似ios毛玻璃效果

2018-10-22 分类：CSS 阅读(919) 评论(0)
php javascript 前端开发工具
前端用什么开发工具
游戏前端开发工具

html 代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
    <title></title>
    <style type=”text/css”>
        body,
        div,
        ul,
        li {
            padding: 0;
            margin: 0;
        }
        body,
        #a2::before {
            background: url(“http://cdn.attach.w3cfuns.com/notes/pics/201610/01/134017koodqodj306z86z3.jpg”) no-repeat fixed;
            background-size: cover;
        }
        #a2 {
            width: 80px;
            height: 80px;
            border-radius: 20px 20px;
            position: relative;
            top: 20px;
            right: 0;
            bottom: 0;
            left: 20px;
            background: rgba(255, 255, 255, .5);
            overflow: hidden;
            cursor: pointer;
        }
        #a2::before {
            content: ”;
            position: absolute;
            top: ;
            right: 0;
            bottom: 0;
            left: 0;
            -webkit-filter: blur(10px);
            -moz-filter: blur(10px);
            filter: blur(10px);
            z-index: -1;
            margin: -30px;
        }
        h1 {
            position: absolute;
            /*这行代码是配合全屏模糊使用的*/
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            /*这行代码是配合全屏模糊使用的*/
            font-family: “明黑”;
            font-size: 50px;
            text-align: center;
            display: none;
        }
        #aa {
            width: 200px;
            height: 200px;
            background: ;
        }
        #bb {
            width: 80px;
            height: 20px;
            margin-top: 20px;
            margin-left: 20px;
            font-size: 10px;
            font-family: “黑体”;
            text-align: center;
            line-height: 20px;
        }
        /*blur的作用是给整个网页加高斯模糊*/
        #blur {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            -webkit-filter: blur(10px);
            -moz-filter: blur(10px);
            filter: blur(10px);
            background: url(“https://www.rokub.com/wp-content/uploads/2018/03/1-1G024224G52C-520×245.jpg”) no-repeat fixed;
            background-size: cover;
            display: none;
        }
    </style>
</head>
<body>
    <div id=”blur”></div>
    <h1 id=”h1″>毛玻璃效果</h1>
    <div id=”aa”>
        <div id=”a2″></div>
        <div id=”bb”>毛玻璃效果</div>
    </div>
    <script>
        window.onload = function () {
            var a2 = document.getElementById(“a2”);
            var bb = document.getElementById(“bb”);
            var h1 = document.getElementById(“h1”);
            var blur = document.getElementById(“blur”);
            var clicked = true;
            a2.onclick = function () {
                if (clicked) {
                    a2.style.transition = “all 0.5s ease”;
                    a2.style.width = “400px”;
                    a2.style.height = “400px”;
                    a2.style.borderRadius = “40px 40px “;
                    a2.style.position = “absolute”;
                    a2.style.top = “0”;
                    a2.style.right = “0”;
                    a2.style.bottom = “0”;
                    a2.style.left = “0”;
                    a2.style.margin = “auto”;
                    bb.style.display = “none”;
                    h1.style.display = “block”;
                    blur.style.display = “block”;
                    //上面这行代码是配合全屏模糊使用的
                }
                else {
                    a2.style.transition = “all 0.5s ease”;
                    a2.style.width = “80px”;
                    a2.style.height = “80px”;
                    a2.style.position = “relative”;
                    a2.style.marginTop = “20px”;
                    a2.style.marginLeft = “20px”;
                    a2.style.background = “rgba(255,255,255,.5)”;
                    a2.style.borderRadius = “20px 20px”;
                    bb.style.display = “block”;
                    h1.style.display = “none”;
                    blur.style.display = “none”;
                    //上面这行代码是配合全屏模糊使用的
                }
                clicked = !clicked;
            }
        }
    </script>
</body>
</html>
web前端 开发工具
nodejs前端开发工具
前端集成开发工具
赞(0)
前端开发者 » CSS前端类似ios毛玻璃效果
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论