更新

Question

我想使用HTML在另一个上面创建一个“开放”效果。经过一些研究，我找到了一种方法（参见JSFiddle）。

我现在遇到的问题是，当圆圈调整大小时背景图像会移动一点。

任何人都可以帮我弄清楚如何让背景图像静止不动。

打开时，圆圈中的图像需要保持相同的缩放级别。
圆圈需要居中，下半部分需要在窗外。

Circle css就是这样：

.circle {
    width: 0px;
    height: 0px;
    z-index: 10;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    left: 50%;
    -moz-transform: translate(-50%, 50%);
    -webkit-transform: translate(-50%, 50%);
    bottom: 0;
    -moz-transition: all 1.5s;
    -webkit-transition: all 1.5s;
}

JSFiddle：http://jsfiddle.net/GmvUQ/2/

更新

让我再解释一下。我注意到我的问题不够明确。我有一些关于我想要创建的效果的截图：

整个效果已经有效但是当转换正在进行时（图像的圆圈越来越大），圆圈内的图像会移动一点。

这可能是因为需要通过Javascript / CSS定位进行计算。

我想在调整大小过渡期间如何让这个图像完全静止。

谢谢！

Answer 1

DEMO：http://jsfiddle.net/GmvUQ/5/

更新了HTML

<div>
    <div class="buttons">
        <button onclick="changeboleto(0)">Click here</button>
        <button onclick="changeboleto(500)">Click here</button>
        <button onclick="changeboleto(1000)">Click here</button>
    </div>
    <div class="circle girl">
    </div>
    <div class="circle lamborghini">
    </div>
</div>

请注意，我已删除每个</div>中的嵌套.circle元素。相反，我为每个添加了一个额外的类，它设置了background-image（如果需要的话，还有一些定位）。

更新了CSS

.circle {
    width: 250px;
    height: 250px;
    z-index: 10;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-origin: content-box;
    background-position: center center;
}
.lamborghini {
    background-image: url(http://www.hdwallpapers.in/walls/2013_wheelsandmore_lamborghini_aventador-wide.jpg);
}
.girl {
    background-image: url(http://www.hdwallpapers.in/walls/colorful_background_girl-normal5.4.jpg);
    top: 50%;
}

.buttons {
    position: relative;
    z-index: 5;
}

我已将大部分CSS移到.circle类，因为它对两个图像集都很常见。请特别注意background-*属性的值。

更新了JQuery

function changeboleto(pix) {
    circleHeight = pix;
    circleWidth = pix;

    $('.circle').animate({
        'width' : circleWidth,
        'height': circleHeight
    }, 1500, 'linear');

    //css('width', circleWidth).css('height', circleHeight);
    changeCircleBackgroundToWindow();
}

function changeCircleBackgroundToWindow() {
    windowWidth = $(window).width();
    windowHeight = $(window).height();

    $(".circle > div").animate({
        'width' : windowWidth,
        'height': windowHeight
    }, 1500, 'linear');
    $(".circle > div").animate({
        'width' : windowWidth,
        'height': windowHeight
    }, 1500, 'linear');

    //$(".circle-background").css("width", windowWidth).css("height", windowHeight);
    //$(".circle-background2").css("width", windowWidth).css("height", windowHeight);
}

我没有混合使用JQuery和CSS转换，而是将所有动画集中在JQuery中。

我使用了animate()函数并指定了缓动方法。默认缓动为swing，但我使用linear，因为这会以恒定的速度推进动画。

修改

上述解决方案包括允许图像随动画缩放的CSS。但是，您要求图像始终保持相同的“缩放级别”。

要实现这一点，只需从CSS中删除一行，即这一行：

.circle {
    ...
    background-size: cover;
    ...
 }

Answer 2

我知道这已经晚了5年，但是我通过搜索引擎发现了这个话题，并认为自己会提出自己的想法。

这种效果也可以通过clip-path来实现，它比jquery的动画要宽容得多（如果为某些/足够的属性设置动画，它仍然会导致图像抖动）。

clip-path的另一个好处是，如果您要悬停而不是单击按钮，则根本不需要JavaScript。它还可以使HTML文件更简单。

我已经制作了原始问题的jsfiddle的更新版本http://jsfiddle.net/GmvUQ/13/，该版本演示了如何使用clip-path进行此操作。它仍然使用jquery来处理按钮单击，但是“魔术”都是通过CSS过渡而不是JavaScript动画实现的。

jQuery：

function changeboleto(pix) {
    ...
    $('.circle-background').css('clip-path', 'circle(' + pix/2 + 'px at 50% 100%)');
}

CSS（包括来自原始提琴的原始CSS）：

.circle-background {
    position: absolute;
    z-index: 10;
    clip-path: circle(0% at 50% 100%);
    background:url(http://www.hdwallpapers.in/walls/colorful_background_girl-normal5.4.jpg);
    background-size: cover;
    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    bottom: 0%;
    left: 50%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

这只是导致CSS在clip-path属性上过渡，从而使圆展开动画。由于图像本身永远不会移动，仅显示图像之间的边界就不会抖动。

Answer 3

Full screen demo

JSFiddle：http://jsfiddle.net/7bP7Z/4/ （点击查看事物增长）

好的，现在这个问题有了更多的说明，我已经重新审视了绘图板，并提出了更好的解决方案。

HTML

<div class="circle">
    <div class="circle-overlay"></div>
    <img src="http://www.hdwallpapers.in/walls/2013_wheelsandmore_lamborghini_aventador-wide.jpg" />
</div>

<div class="circle">
    <div class="circle-overlay"></div>
    <img src="http://www.hdwallpapers.in/walls/colorful_background_girl-normal5.4.jpg" />
</div>

注意结构的变化：

包含元素
“叠加”元素
</img>

CSS

.circle {
    position: relative;
    overflow: hidden;
}

.circle-overlay {
    position: absolute;
    left: 50%;
    margin-left: -150px;
    bottom: -150px;
    border-radius: 50%;
    width: 300px;
    height: 300px;
    box-shadow: 0px 0px 0px 3000px white;
}

简洁的CSS！

大多数代码用于定位我们的.circle-overlay类。这个类提供了一个透明的圆圈（使用border-radius），并利用我最喜欢的新CSS功能之一 - box-shadow - 来应用一个任意大的值的实心白色“轮廓”，覆盖下面的图像。玩一下box-shadow的颜色和大小（调整300px值），看看它是如何工作的。

JQuery的

$('.circle').click(function() {
    var c = $(this).children('.circle-overlay');
    var w = c.width() + 100;

    c.animate({
        'width' : w,
        'height': w,
        'bottom': (w*-0.5),
        'margin-left': (w*-0.5)
    }, 500, 'linear');
});

再一次，让事情变得美好而简单！

上面的JQuery执行一个非常简单的任务。它会增加circle-overlay的大小，同时保持其每次点击的底部中心位置。

这应该是一个非常流畅的动画，图像不应该“抖动”或“抖动”，因为图像没有被操纵。

背景图像摇摇欲坠div调整大小

更新

3 个答案: