div调整大小时背景图像不稳定

Question

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

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

谁能帮我弄清楚如何让背景图像静止。

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

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

演示：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>

请注意，我已删除每个 .circle 中的嵌套 </div> 元素。相反，我为每个类添加了一个额外的类，它设置了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 的 animate 更宽容一些（如果你为某些/足够的属性设置动画，它仍然会导致图像抖动）。

clip-path 有一个额外的好处，那就是如果你正在做，比如说，悬停而不是按钮点击，则根本不需要 javascript。它还可以生成更简单的 HTML 文件。

我制作了原始问题的 jsfiddle http://jsfiddle.net/GmvUQ/13/ 的更新版本，它演示了如何使用剪辑路径进行此操作。它仍然使用 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 的大小，同时在每次点击时保持其底部居中定位。

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