如何创建图像缩放效果（不在悬停时）

Question

如果您访问https://menupages.com/，则会看到背景图像在页面加载时自动放大。如何达到这种效果？

Answer 1

您可以通过使用关键帧，图像的缩放和不透明度来存档该效果。

这样的事情。

    keyframe zoomIn {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    20% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.25);
    }
}

并将其附加到img元素或类。

img {
...
animation-name: zoomIn;

}

要使眼睛满意，图像的长宽比应为2倍。