我正在寻找使用 css3 动画来存档效果的干净方法:
我有一个 div,它有 css 样式:
background-image:url('image.png');
background-size:cover;
/* Just to note this page has 100% width and 100% height */
width:100%;
height:100;
这两条规则,使图像全屏。 现在,我正在寻找一种方法来创建缩放效果,比如说 5 秒。 因此,页面加载时的用户会看到完整的页面背景,背景越来越小,但始终是 100% 的宽度和高度。
我找到了一些例子,但大多数都使用 :hover 效果,我想在页面加载时有动画。
感谢您的建议。
最佳答案
开始时将图像背景大小设置为大于 100%,然后使用关键帧动画将其“缩小”到 100% 作为最终值。
对于循环,使用animation-direction: alternate;
body {
height: 100vh;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3999/Tilt-Shift_-_Cityscene.jpg);
background-size: 110% 110%;
background-position: center center;
animation: shrink 5s infinite alternate;
}
@keyframes shrink {
0% {
background-size: 110% 110%;
}
100% {
background-size: 100% 100%;
}
}
关于html - Css - 动画背景图像 - 带循环的缩放效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33942127/