仿掘金鼠标移动到头像上面，头像不停转动效果，而且越转越快

作者：Jasmine - 2020年06月17日

仿掘金鼠标移动到头像上面，头像不停转动效果，而且越转越快，用css3属性去实现的。

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		.avatar{
			flex: 0 0 auto;
			margin-right: 24px;
			width: 100px;
			height: 100px;
			background-color: #f9f9f9;
			border-radius: 50%
		}
		.avatar:hover {
			/*1turn：一圈，一个圆共一圈*/
			transform: rotate(666turn); 
			transition-delay: 1s;
			transition-property: all;
			transition-duration: 59s;
			transition-timing-function: cubic-bezier(.34, 0, .84, 1)
		}
	</style>
</head>
<body>
	<div class="user-info-block">
		<img class="avatar" src="avatar.png" >
	</div>
</body>
</html>

效果：

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/661

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！