i've been looking everywhere how to achieve this effect of an animated spinning image that is covering the whole screen. Like this one .
bassically, what i want is to make it spin and to be fullscreen.
this is what i got so far, 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;
}
as you can see, i can make it spin but not fullscreen, is it possible? thank you!
Try using width:100%;
rather than width:1000px;
and height:100%
rather than height:1000px;
Cool effect by the way, I may have to find an excuse to use that trick.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.