如何使用css、javascript和html制作旋转bg图像？

其想法是让图像旋转（使用CSS动画），同时让图像在旋转时始终覆盖整个窗口（使用Javascript）

像这样：

---

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

使用css动画

@-webkit关键帧{
0%{-webkit变换：旋转（0度）；}
100%{-webkit变换：旋转（360度）；}
}
@-moz关键帧腐烂{
0%{moz变换：旋转（0度）；}
100%{moz变换：旋转（360度）；}
}
@-o-关键帧腐烂{
0%{-o变换：旋转（0度）；}
100%{-o变换：旋转（360度）；}
}
@关键帧腐烂{
0%{变换：旋转（0度）；}
100%{变换：旋转（360度）；}
}
#a{
位置：相对位置；
利润率：42px；
宽度：100px；
高度：100px；
边框：1px纯黑；
}
#b{
位置：绝对位置；
宽度：142%；
身高：142%；
边框：1px纯黑；
左：-21px；
顶部：-21px；
-webkit动画：无限；
-moz动画：无限；
-o-动画：无限；
动画：rot 2s无限；
-webkit动画计时功能：线性；
-moz动画计时功能：线性；
-o-动画-计时-功能：线性；
动画计时功能：线性；
背景：rgba（125,0,0,5）；
}

1是肯定的，图像至少要比窗口宽度（根2）大1.414213562倍。@DOCASAREL不一定；在我的场景中，我需要精确性，所以这不会适用于所有情况。网站上的IMHO动画最多应该是最小的。许多人发现它们会发光。背景图像的大小，一个正方形，可以通过在线测量来确定。只需为

a

和

b

（又称x和y）输入

div

元素或浏览器视口的尺寸即可获得答案。“我的旧版”与您的操作相反，它旋转

div

本身。@DOCASAREL@PranavCBalan它对chromecrazy不起作用对chrome@DOCASAREL@DaMaxContent不起作用