的CSS - 动画背景图片 - 带环

我在寻找清洁的方式使用CSS3动画存档效果变焦效果：的CSS - 动画背景图片 - 带环

我有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％的宽度和高度。

我发现了一些例子，但其中大多数使用：悬停效果，并且我想在页面加载时有动画。

感谢您的咨询。

来源

2015-11-26 Marek Brzeziński

据我所知，您将需要使用JavaScript来添加页面加载一个类，那么一定量的时间之后将其删除 - 或者JavaScript来简单地在页面加载时执行动画 –

是的，我写道，我试图找到答案，但所有好的示例使用：悬停开始动画。 –

将图像背景大小开始大于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%; 
 
    } 
 
}

来源

2015-11-26 15:41:31

我可以使用div而不是body元素吗？ –

当然...这只是一个演示。 –

谢谢你！伟大的代码。 –

的CSS - 动画背景图片 - 带环

回答

相关问题