点击时展开圆形 div 至全屏大小

Question

点击时展开圆形 div 至全屏大小

htmlcss

3

我在页面中央有一个圆形的div，我希望当点击它时，它能够扩展到整个屏幕的大小。有什么建议吗？

如果可能的话，我希望它能够平滑地过渡。

- user3508874

4

请发布你的HTML/CSS代码，最好还有一个fiddle链接：http://jsfiddle.net/。 - web-tiki

点击时动画宽度和高度。有什么大秘密？ - j08691

是的，使用jQuery非常容易！ - enTropy

1

你想让圆形在扩展到第一个限制边缘（上/下或左/右）时保持圆形，还是想要类似于虹膜转换的视觉效果，其中圆形会增长并完全替换先前的背景？ - Jason Aller

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Francesco Frapporti · Accepted Answer

你可以使用CSS和JavaScript实现。

div.small {
    background: #f00;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    transition: all .5s;
}

div.big {
    width: 100%;
    height: 100%;
    top: 0;
    margin-top: 0;
    left: 0;
    margin-left: 0;
    border-radius: 0;
    background: #0f0;
}

JS（我正在使用Zepto，但jQuery同样适用）

$(window).on("click", ".small", function() {
    me = this;
    setTimeout( function() { $(me).addClass("big"); }, 1 );
});

$(window).on("click", ".big", function() {
    me = this;
    setTimeout( function() { $(me).removeClass("big"); }, 1 );
});

HTML

<div class="small"></div>

不使用JavaScript

CSS

http://jsfiddle.net/frapporti/Vc492/

label {
    background: #f00;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    transition: all .5s;
}

input:checked + label {
    width: 100%;
    height: 100%;
    top: 0;
    margin-top: 0;
    left: 0;
    margin-left: 0;
    border-radius: 0;
    background: #0f0;
}

input {
   visibility: hidden;
   position: absolute;
}

HTML

<input id="hidden-checkbox" type="checkbox"></input>
<label for="hidden-checkbox"></label>

请参考：http://jsfiddle.net/frapporti/85qfu/