Question

我是否可以使用下面制作的方法创建玻璃效果并将其应用于宽度和高度均为100％的包含div？这意味着无论你如何调整窗口的大小，玻璃div的角落总是随窗口移动。

<!DOCTYPE html>
<html lang="en">
<head>

<title>Untitled</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css" media="screen">

body {
    margin: 0;
    padding: 0;
    background: #eee;
}

#container {
    width: 500px;
    height: 500px;
    position: absolute;
    top: 200px;
    margin-left: -250px;
    left: 50%;
    background: #333;
}

#container .glass {
    position: absolute;
    width: 710px;
    height: 710px;
    top: -355px;
    left: -355px;
    background: #fff;
    opacity: 0.1;
    -webkit-transform:rotate(45deg);
}


</style>

</head>
<body>  
<div id="container">
    <div class="glass"></div>
</div>
</body>
</html>

Answer 1

This fiddle我认为你做了什么。我在一个计时器上设置了resize事件，所以它不会在调整大小时立即自动跟随。你可以改变它，如果它很重要，但它有助于不使用尽可能多的处理能力，只是经常检查调整大小。

这是代码（上面的HTML）：

<强> CSS

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: #eee;
    height: 100%;
}

#container {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #333;
    overflow: hidden;
}

#container .glass {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    opacity: 0.1;
    -webkit-transform-origin: 0 100% ;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

Javacript（JQuery）

function glassIt() {

    var g = $(".glass");
    var c = g.parent();
    var w = c.width();
    var h = c.height();
    var ext = ["-webkit-", "-moz-", "-o-", "-ms-"];
    var angle = "rotate("+(-1 * ((Math.atan(h/w))/(2*Math.PI))*360)+"deg)";

    g.width(Math.sqrt(Math.pow(w,2)+Math.pow(h,2)));

    for(i = 0; i <= ext.length; i++) {
        if(i < ext.length) {
            g.css(ext[i]+"transform", angle);
        }
        else {
            g.css("transform", angle);
        }
    }
}

var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(glassIt, 100);
});

$(document).ready(function() {
  glassIt();
});

根据浏览器窗口大小旋转div

1 个答案: