利用css3动画，做一个鼠标经过图标，旋转360°的小特效

利用css3动画效果，做的一个平滑过渡的小特效，3d旋转的特效

 ------------------------------------------------

  动画设置：

@keyframes xuanzhuan {
  from {
    transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: linear;
  }
  20% {
    transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -300deg);
    animation-timing-function: linear;
  }
  40% {
    transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -240deg);
    animation-timing-function: linear;
  }
  60% {
    transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -180deg);
    animation-timing-function: linear;
  }
  80% {
    transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -60deg);
    animation-timing-function: linear;
  }
  to {
    transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);;
    animation-timing-function: linear;
  }
}

 

调用：

<style>
.demo {
	width: 100px;
	text-align: center;
}
.demo:hover {
	animation: xuanzhuan 0.5s 1;
	-webkit-animation: xuanzhuan 0.5s 1;
	-moz-animation: xuanzhuan 0.5s 1;
}
</style>

<h1 class="demo">s</h1>

 

转载于:https://www.cnblogs.com/siwei/p/7645823.html