繁体   English   中英

全屏旋转背景图像

[英]Fullscreen spinning background image

我一直在到处寻找如何实现覆盖整个屏幕的动画旋转图像的效果。 喜欢这个

令人费解的是,我想要使它旋转并全屏显示。

这是我到目前为止所获得的, http://losmosca.com.ar/reiki/

HTML:

<img src="img/bg.jpg" id='test' class='rotating'>

CSS3:

#test {
position:relative;
margin:0 auto;
width:1000px;
height:1000px;
}

@-webkit-keyframes rotating {
     from{
        -webkit-transform: rotate(0deg);
     }
     to{
        -webkit-transform: rotate(360deg);
     }
}

.rotating {
    -webkit-animation: rotating 1000s linear infinite;
}

如您所见,我可以使其旋转但不能全屏显示,这可能吗? 谢谢!

尝试使用width:100%; 而不是width:1000px;

height:100%而不是height:1000px;

顺便说一句,效果很酷,我可能不得不找借口使用该技巧。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM