css动画效果

掘金头像旋转效果

<div class="dv-tris-nr">
                      <img
                        :src="item"
                      />
</div>



<style>
.dv-tris-nr img:hover{
		transform: rotate(666turn);  //定义了transform的2d旋转，turn表示 圈(单位) 。
		transition-duration: 59s;  //定义了执行时间。
		transition-timing-function: cubic-bezier(.34, 0, .84, 1)  //定义执行速度
		}
</style>
  
}

图片360度变大旋转

<style>
.dv-tris-nr img:hover{
		transform:rotate(360deg) scale(1.5);
	 	animation: rotation 3s linear infinite;
	 	transition-duration:1s;
	 	}
</style>

图片旋转控制旋转速度

<style>
@-webkit-keyframes rotation{

    from {-webkit-transform: rotate(0deg);}

    to {-webkit-transform: rotate(360deg);}

}
.dv-tris-nr img:hover{
		-webkit-transform: rotate(360deg);

         animation: rotation 0.2s linear infinite;

    	-moz-animation: rotation 0.2s linear infinite;

    	-webkit-animation: rotation 0.2s linear infinite;

    	-o-animation: rotation 0.2s linear infinite;
	 	}
</style>