4

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

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

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

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

圆形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 定位进行计算。

我想要一些帮助如何让这个图像在调整大小转换期间完全静止。

谢谢！

4

3 回答 3

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>

请注意，我已经删除了</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;
    ...
 }
于 2013-10-29T17:00:04.093 回答
1

我知道这已经晚了 5 年，但我通过搜索引擎找到了这个帖子，并认为我会提供我自己的想法。

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

如果您正在执行悬停而不是单击按钮，那么 clip-path 具有根本不需要 javascript 的额外好处。它还可以生成更简单的 HTML 文件。

我制作了原始问题的 jsfiddle 的更新版本，http://jsfiddle.net/GmvUQ/13/，它演示了使用剪辑路径执行此操作。它仍然使用 jquery 来处理按钮点击，但“魔法”都是通过 CSS 转换而不是 javascript 动画发生的。

查询：

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 属性上进行转换，从而为圆圈展开动画。因为图像本身从不移动，只是它显示的边界，它从不摇晃。

于 2018-11-15T19:49:45.923 回答
0

全屏演示

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应用一个任意大值的纯白色“轮廓”，覆盖它下面的图像。试一试 的颜色和大小（调整 300px 值），box-shadow看看它是如何工作的。

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同时在每次点击时保持其底部中心定位。

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

于 2013-10-30T10:42:26.197 回答