gpt4 book ai didi

html - 过渡中背景抖动

转载 作者:太空狗 更新时间:2023-10-29 15:06:57 26 4
gpt4 key购买 nike

我有两个 div 元素,它们的宽度可以通过 javascript 上的点击事件来控制。无论是点击事件(切换类名)还是悬停事件,其伪元素的背景图像似乎都在晃动(在 chrome,即 edge 和 safari 上确认)。

我查过 SO 和谷歌,但似乎是改变背景大小本身的问题,这是我在这里没有做的。

section {
width: 100%;
max-width: 1920px;
position: relative;
min-height: 700px;
overflow: hidden;
}

.container {
width: 99%;
height: 700px;
position: absolute;
transition: 1s linear width;
overflow: hidden;
}

.left {
top: 0;
left: 0;
background: transparent;
transform: skew(20deg) translateX(-50%);
border-radius: 0 20px 20px 0;
}

.left::after {
content: "";
position: absolute;
top: 0;
left: 50%;
height: 100%;
width: 100vw;
transform: skew(-20deg);
background-image: url(https://cdn.pixabay.com/photo/2018/12/04/22/38/road-3856796__340.jpg);
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}

.right {
top: 0;
right: 0;
border-radius: 20px 0 0 20px;
transform: skew(20deg) translateX(50%);
}

.right::after {
content: "";
position: absolute;
top: 0;
right: 50%;
height: 100%;
width: 100vw;
transform: skew(-20deg);
background-image: url(https://media.istockphoto.com/photos/taking-a-walk-in-the-woods-picture-id1130258547?s=2048x2048);
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}

.right:hover {
width: 250%;
}
<section>
<div class="container left"></div>
<div class="container right"></div>
</section>

最佳答案

我优化了代码并考虑使用左/右来定义元素的大小然后通过平移更改宽度过渡。

section {
max-width: 1920px;
position: relative;
overflow: hidden;
height: 500px;
}

.container {
position: absolute;
top: 0;
bottom:0;
transition:transform 1s linear;
overflow: hidden;
transform: skew(20deg);
}

.left {
left: -60vw; /*to create the overflow*/
right: calc(55% + 10px); /*10px distance between both element*/
border-radius: 0 20px 20px 0;
}

.right {
right: -80vw;
left: 45%; /*100% - 55% (the right value of .left)*/
border-radius: 20px 0 0 20px;
}

.left::after,
.right::after {
content: "";
position: absolute;
top: 0;
left: -40%;
bottom: 0;
right: -40%;
transform: skew(-20deg);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
transition:transform 1s linear;
}

.left::after {
background-image: url(https://cdn.pixabay.com/photo/2018/12/04/22/38/road-3856796__340.jpg);
transform-origin: bottom;
}

.right::after {
transform-origin: top;
background-image: url(https://media.istockphoto.com/photos/taking-a-walk-in-the-woods-picture-id1130258547?s=2048x2048);
}

.right:hover {
transform: skew(20deg) translateX(-60vw);
}

.right:hover::after {
transform: skew(-20deg) translateX(60vw);
}
<section>
<div class="container left"></div>
<div class="container right"></div>
</section>

关于html - 过渡中背景抖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55183005/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com