请问鼠标滑过背景图片，图片围绕圆心旋转的效果怎么实现？css3也可以..

答案:3 悬赏:0 手机版

解决时间 2021-01-12 22:58

提问者网友：欲望失宠
2021-01-12 18:25

最佳答案

五星知识达人网友：空山清雨
2021-01-12 19:12

@-webkit-keyframes btnRotate {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(360deg);
}
}
#startMenu button:hover img {
-webkit-animation: btnRotate 1.5s linear infinite;
}楼上的代码，我试了一下，好像只能转一圈啊
我这个用的css3的动画效果，鼠标放上去，他会一直转，鼠标移开，就还原
追问- -. 反转还原么？能不能用js控制，一开就暂停追答呃。。。这个他还原的时候就刷的一下还原了，没有那种转回去的效果

用js和css去控制图片的旋转还原不太好做

如果你的项目需求真这么高的话，可以试试js矢量绘图

那样会比较好控制一些追问能不能也兼容FF？

全部回答

1楼网友：枭雄戏美人
2021-01-12 21:08

用css3的transition，很容易实现hover时旋转效果的：

2楼网友：大漠
2021-01-12 20:41

一个土办法，你本来图片就是旋转的，但是分成两半，也就是一半旋转，另一边静止，默认背景为静止这一半，鼠标经过后css控制，读取另一半

我要举报

如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！