请问鼠标滑过背景图片,图片围绕圆心旋转的效果怎么实现?css3也可以...
发布网友
发布时间：2022-04-26 00:44
共3个回答
热心网友
时间：2022-04-20 22:45
用css3的transition，很容易实现hover时旋转效果的：
img{width: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">
热心网友
时间：2022-04-21 00:03
@-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的动画效果，鼠标放上去，他会一直转，鼠标移开，就还原
热心网友
时间：2022-04-21 01:37
一个土办法，你本来图片就是旋转的，但是分成两半，也就是一半旋转，另一边静止，默认背景为静止这一半，鼠标经过后css控制，读取另一半
