在一个平滑的背景过渡和缩放动画不适合容器

  • Z时代
  • 2024-01-10
  • 分类：问答

基于我在这里找到的一些例子，所以我试图混合两个效果：在缓慢放大动画中平滑的背景变化。事情是一旦缩放动画从1.0 to 1.{whatever}的比例开始，它在div的边界外生长，而我想保留固定div的尺寸。请注意0​​包含在代码中，它仅适用于初始比例。在一个平滑的背景过渡和缩放动画不适合容器

你可以找到例子，我在这里挣扎：http://mattosuch.eu/test.html

感谢

回答：

您可以创建一个外div每个div元素比例，并给予CSS到新创建的div这样。

div.outer{ 
height: 200px; /*Equal to real height of your inner div with `transform:scale(1,1)`*/ 
width: 200px; /*Equal to real width of your inner div with `transform:scale(1,1)`*/ 
overflow: hidden;  
}

回答：

您可能只使用CSS，动画和伪元素伪造背景动画关于衰落效应：

这里是3图像用作背景的衰落和彼此的缩放后的例子。

div {  
    margin: 1em;  
    box-shadow: 0 0 5px;  
    width: 200px;  
    height: 200px;  
    background: url(/wp-content/uploads/new2022/20220327voicc/115152426.jpg) center;  
    background-size: auto 100%;  
    position: relative;  
    overflow: hidden;  
    animation: scale 12s infinite;  
    position: relative;  
}  
div:before,  
div:after {  
    content: '';  
    background: url(/wp-content/uploads/new2022/20220327voicc/116152426.jpg) center;  
    background-size: auto 100%;  
    position: absolute;  
    top: 0;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    animation: scale 12s -6s infinite, hide 12s -6s infinite;  
    z-index: 2;  
    opacity: 0;  
}  
div:after {  
    background: url(/wp-content/uploads/new2022/20220327voicc/117152426.jpg)center;  
    background-size: auto 100%;  
    animation: scale 12s 6s infinite, hide 12s 6s infinite;  
}  
@keyframes scale {  
    80% {  
    background-size: auto 200%;  
    }  
}  
@keyframes hide {  
    50% {  
    opacity: 1;  
    }  
    from,  
    to {  
    z-index: 1;  
    }  
}

<div>  
    <!-- empty div to show fading backgrounds. Without CSS or a screen reader it is empty -->  
</div>

1元件（+ 2pseudos元件）给出的机会，以负载3。

您可以通过不透明度和通过背景大小通过动画缩放来设置褪色动画效果。

您可以重置动画的长度以及要设置动画的步骤的值和数量。 你也可以使用背景位置和切换多个背景图像的位置，而不透明度设置为0.例如使用4的图像，一个伪使用多个bg图像，这是切换位置，而看不见。 https://codepen.io/gc-nomade/pen/zzbXem

以上是 在一个平滑的背景过渡和缩放动画不适合容器 的全部内容， 来源链接： utcz.com/qa/261093.html

回到顶部