0

好吧..所以我有点新手，但不是真的。在'04-06'中做了很多html编码......决定再次拿起它。如果我没有道理，请告诉我。我有一个客户想要一个“灯箱”效果图片库作为他们的图片。例如：当您单击缩略图时，更大的图片会放大，而背景会逐渐淡出。我决定看看我是否可以用 css3 编写代码，而不是求助于 javascript 之类的。我知道这可能是不切实际的.. 但是客户没有那么多图片并且想要一个相当简单的网站。

大部分情况下进展顺利……除非涉及到大局。我希望这张图片在页面的中心出现。但是当我从 0px 转换到 400px 时会发生一些愚蠢的事情。它似乎向右侧和底部生长，而左侧和顶部则保持不变。任何使这种增长居中的方法。我知道我可能会跳过宽度和高度调整而只使用不透明度过渡..但这看起来并不那么酷。

这只是早期阶段，所以我还没有用其他浏览器测试过。我知道我需要添加更多代码才能在其他浏览器中工作。但如果有帮助，我现在正在使用 chrome .

<!DOCTYPE html>
<html>
<head>
    <title>LIGHTBOX</title>
    <style>
            html{
                height:100%;
            }

            img{
                max-height:100%;
                max-width:100%;
            }

            .centerimage{
                    display:block;
                    margin-left:auto;
                    margin-right:auto;   
            }

    #imagezoom {
        position: absolute;
                    margin:-200 0 0 -200;
                    top:50%;
                    left:50%;
        z-index:-1;
                    padding-right:0;
                    border: solid 5px white;
        overflow: hidden;
                    width: 0px;
                    height: 0px;
                    opacity: .0;
                    box-shadow: 0px 0px 500px 50px #888888;
        transition: opacity .7s, width 1.5s, height 1.5s; 
    }

            #imagezoom:target{
                    z-index:2003;
                    width: 400px;
                    height: 400px;
        opacity: 1.0;
            }

</style>
</head>
<body>


    <div id="imagezoom">
        <a href="file://localhost/Users/hollykrahulik/Desktop/
test%20website%20stuff/lightbox2.html">
        <img src="images/grumpycat.jpg">
        </a>
    </div>

<a href="#imagezoom">
        <img src="images/grumpycat_thumb.jpg" class="centerimage">
    </a>
</body>
</html>
4

1 回答 1

0

你刚刚错过了这个margin:-200 0 0 -200;。#imagezoom

这是工作示例

编辑：我假设你想要这个作为输出。工作小提琴

#imagezoom:target{
    margin:-200px 0 0 -200px;
}
#imagezoom {
    transition: opacity .7s, margin 1.5s, width 1.5s, height 1.5s; 
}
于 2013-04-26T04:51:45.710 回答