如何使用CSS、JavaScript和HTML制作旋转的背景图片？

Question

这个想法是使一幅图片旋转（使用CSS动画），同时使这幅图片在旋转时始终覆盖整个窗口（使用Javascript）。

就像这样：

注意：我希望图片始终跨越整个窗口，因此需要使用Javascript动态修改图像的高度和宽度值。

- user3186555

---

有一点是确定的，图像必须至少比窗口宽度大1.414213562倍（根号2）。 - loveNoHate

不一定；在我的情况下，我需要精度，所以并不适用于所有情况。 - user3186555

在我看来，网站上的动画应该尽量减少。许多人发现它们很烦人。 - Ed Heal

背景图片的大小，一个正方形，可以使用在线**勾股定理计算器来确定。只需输入a和b（即x和y）的div元素或浏览器视口的尺寸即可获得答案。我的旧Stackoverflow Answer**与您所做的相反，它旋转了div本身。 - arttronics

Answer 1

使用CSS动画来实现。

@-webkit-keyframes rot {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rot {
    0% { -moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(360deg);}
}
@-o-keyframes rot {
    0% {-o-transform: rotate(0deg);}
    100% {-o-transform: rotate(360deg);}
}
@keyframes rot {
    0% {transform: rotate(0deg); }
    100% {transform: rotate(360deg);}
}

#a{
    position:relative;
    margin:42px;
    width:100px;
    height:100px;  
    border:1px solid black;
}
#b{
    position:absolute;
    width:142%;
    height:142%;
    border:1px solid black;
    left:-21px;
    top:-21px;
    -webkit-animation: rot 2s infinite;
    -moz-animation:    rot 2s infinite;
    -o-animation:      rot 2s infinite;
    animation:         rot 2s infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
    background:rgba(125,0,0,.5);
}

<div id="a">
  <div id="b"></div>
</div>

- Pranav C Balan

---

@DOCASAREL http://jsfiddle.net/0gLyhhzm/13/ - Pranav C Balan

@PranavCBalan 说“它在Chrome上无法运行”。 - user3186555

疯狂的代码在Chrome上不起作用 http://jsfiddle.net/0gLyhhzm/14/ - loveNoHate

@DOCASAREL http://jsfiddle.net/0gLyhhzm/19/ - Pranav C Balan

@DaMaxContent http://jsfiddle.net/0gLyhhzm/21/ - Pranav C Balan

这是您想要的内容：http://jsfiddle.net/0gLyhhzm/24/ - Gary Hayes