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

Posted 2023-05-11

鼠标滑过背景图片，图片围绕圆心旋转，鼠标移出图片就停止转动。

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

<style>
imgwidth:50px;height:50px;display:block;-webkit-transition:0.4s linear;transition:0.4s ease-in;
img:hover-webkit-transform:rotate(360deg);transform:rotate(360deg);
</style>
<div>
<img src="http://www.baidu.com/img/bdlogo.gif">

参考技术A @-webkit-keyframes btnRotate 
0% 
-webkit-transform: rotateZ(0deg);
    
100% 
-webkit-transform: rotateZ(360deg);
    

#startMenu button:hover img 
-webkit-animation: btnRotate 1.5s linear infinite;

<img src="xxx">

楼上的代码，我试了一下，好像只能转一圈啊

我这个用的css3的动画效果，鼠标放上去，他会一直转，鼠标移开，就还原

追问

- -. 反转还原么？能不能用js控制，一开就暂停

追答

呃。。。这个他还原的时候就刷的一下还原了，没有那种转回去的效果

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

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

那样会比较好控制一些

追问

能不能也兼容FF？

本回答被提问者和网友采纳 参考技术B 一个土办法，你本来图片就是旋转的，但是分成两半，也就是一半旋转，另一边静止，默认背景为静止这一半，鼠标经过后css控制，读取另一半

请问那些鼠标点击有水波效果是怎么弄的？

不是flash弄的 也不是图片就是Win7系统 鼠标点击就有水波效果 那个是怎么弄的？

那可能是设置按下CTRL ,显示鼠标位置的. 如果设置了,按下鼠标,再按下CTRL就会有一圈一圈的线条. 参考技术A 到网上搜水波鼠标特效然后下载解压就完成了