jquery - 显示内容的涟漪效应

Question

我正在尝试创建一个小气泡，点击它时，它会展开以填满整个屏幕并显示其中的一些内容。

这是我的转换测试:http://codepen.io/FezVrasta/pen/ofDFr
这是宽度和高度的那个:http://codepen.io/FezVrasta/pen/rlDpI

问题是我无法显示气泡的内部内容...

我尝试过使用 transform: scale(x) 并更改宽度和高度，但是这两种解决方案都有问题(也就是没有正确显示)。

模型:

你有什么建议吗？

编辑:

这是另一种尝试，这几乎是我所需要的，但是当您调整页面大小时它有奇怪的行为，并且在扩展时内部内容的位置有一些平滑的过渡，这不应该在那里。

http://codepen.io/FezVrasta/pen/jqswi

Answer 1

这是一个转换宽度和高度的方法:

它还为点击事件使用了 css only checkbox hack。

FIDDLE

标记:

<input type="checkbox" id="cb" />
<label for="cb"></label>

CSS

label {
    width: 40px;
    height: 40px;
    border-radius: 1000px;
    overflow: hidden;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin: auto;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}
label:before {
    content:'';
    width: 100%;
    height: 100%;
    background: url(http://lorempixel.com/1800/1800/food) center center no-repeat blue;
    position: absolute;
}
input {
    display:none;
}
input:checked + label {
    width: 100vw;
    height: 100vw;
}