2,文件引用:,
<style type="text/css">
body{background: #EF7148}
img{cursor:pointer-webkit-animation: scaleout 1.3s infinite ease-in-outanimation: scaleout 1.3s infinite ease-in-out}
@-webkit-keyframes scaleout {
0% { -webkit-transform: scale(1.0) }
100% {
-webkit-transform: scale(1.1)
opacity: 0
}
}
@keyframes scaleout {
0% {
transform: scale(1.0)
-webkit-transform: scale(1.0)
} 100% {
transform: scale(1.1)
-webkit-transform: scale(1.1)
opacity: 0
}
}
</style>
<img src="图标.jpg" class='xuanzhuan' />
.xuanzhuan{animation:xz 1s linear infinite }@keyframes xz{
from {transform:rotate(0deg)}
to{transform:rotate(360deg)}
}infinite 旋转不限次数,也可以改成1,旋转一次
用css3的transition,很容易实现hover时旋转效果的:
<style>img{width:50pxheight:50pxdisplay:block-webkit-transition:0.4s lineartransition:0.4s ease-in}
img:hover{-webkit-transform:rotate(360deg)transform:rotate(360deg)}
</style>
<div>
<img src="http://www.baidu.com/img/bdlogo.gif">