我变得绝望了.. 我尝试建立一个具有旋转背景图像的网站,它会自动调整到窗口的大小。我不太喜欢 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 创建它,但就像我说的,我不太喜欢它。
感谢您的帮助!
最佳答案
您应该将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
,它会自己重复直到它占用的空间。或者您可以使用更大的图像。 Here is a demo用更大的、不同的图像显示它正常工作
关于javascript - 旋转背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23020637/