旋转的背景图片

Question

我正在变得绝望..我尝试建立一个旋转背景图像的网站,自动调整到窗口的大小.我真的不是那么多html,css,javascript等,但我设法到目前为止,图片旋转并调整到窗口大小..但是当我缩小窗口真的很小,图片旋转出来的窗口..我希望你明白我的意思.

这是我的代码:

小提琴

HTML

<div id="bgcon">
    <div id="bgimg">
    </div>
</div>

CSS

html, body {
    padding:0;
    margin:0;
    width:100%;
    height:100%;
}
#bgcon {
    width:100%;
    height:100%;
    overflow:hidden;
}
#bgimg {
    content:"";
    position: fixed;
    width: 250%;
    height: 250%;
    top: -80%;
    left: -80%;
    z-index: -1;
    overflow:hidden;
    background-image: url("http://sidekickwallpapers.com/wp-content/uploads/2014/03/space-wallpapers-1920x1080-design-ideas-space-wallpapers-s3vgbbit.jpg");
    -webkit-animation:spin 150s linear infinite;
    -moz-animation:spin 150s linear infinite;
    animation:spin 150s linear infinite;
}
}
@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}
}

这就是问题所在:

我不确定是否有可能只用css创建它,但就像我说的那样,我并不是真的很喜欢它.

谢谢你的帮助!

Answer 1

您应该将 的 宽度和高度 设置bgcon为窗口宽度和高度最大值的较高比例，并保持正方形：

var bg = document.getElementById("bgimg");

window.onresize = function() { 
    /* Compare values and set width/height based on higher value */ 
    var max = Math.max(window.innerWidth, window.innerHeight);
    bg.style.width = 2.5*max + "px";
    bg.style.height = 2.5*max + "px";
    bg.style.marginTop = -1.25*max + "px"; // Half of width/height
    bg.style.marginLeft = -1.25*max + "px"; // Half of width/height
}
window.onresize(); // Run on load

HTML：

<div id="bgimg"></div>

和CSS：

#bgimg {
    position:fixed;
    /* Center element on page */
    top:50%; left:50%;
    /* You have to center the image using center center */
    background: url("http://sidekickwallpapers.com/wp-content/uploads/2014/03/space-wallpapers-1920x1080-design-ideas-space-wallpapers-s3vgbbit.jpg") center center no-repeat;
    animation:spin 150s linear infinite;
    transform-origin:center center; /* Makes it rotate about the center */
    /* Others */
}

演示

上面的demo之所以在大型浏览器中不完美是因为图片太小了。为了抵消这种情况，您可以删除no-repeat图像上的 ，它会重复自身，直到它占用的空间为止。或者您可以使用更大的图像。这是一个演示，其中包含更大的不同图像，显示其正常工作