html5css3:利用圆角做留言头像，鼠标经过加头像旋转

最新推荐文章于 2022-06-11 14:41:00 发布

原创最新推荐文章于 2022-06-11 14:41:00 发布 · 538 阅读

1 ·

CC 4.0 BY-SA版权

html5 专栏收录该内容

11 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>利用圆角做留言头像,这是我的写法，很低</title>
		<style type="text/css">
			body{
				background: #FFDEAD;
			}
			div{
				width:200px; height:200px;
				margin:50px auto;
				border-radius: 50% 50%;
				border:15px solid rgba(111,111,111,0.1);
			}
			div:first-child{
				overflow:hidden;
				background:url(img/1.jpg) no-repeat;
				background-size: cover;
				transition:transform 2s ease-in 0s;
			}
			div:first-child:hover{
				transform:rotate(360deg);
			}
			div:nth-child(2){
				overflow:hidden;
				background:url(img/2.jpg) no-repeat;
				background-size: cover;
				transition:transform 2s ease 0s;
			}
			div:nth-child(2):hover{
				transform:rotate(360deg);
			}
			div:last-child{
				overflow:hidden;
				background:url(img/3.jpg) no-repeat;
				background-size: cover;
				transition:transform 2s ease-in-out 0s;
			}
			div:last-child:hover{
				transform:rotate(360deg);
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>利用圆角做留言头像，别人的做法</title>
		<style type="text/css">
			img{
				width:200px;
				height:200px;
				border-radius:50%;
				border:10px solid rgba(121,123,124,0.5);
				transition:transform 2s ease-in 0s;
			}
			img:hover{
				transform:rotate(360deg);
			}
		</style>
	</head>
	<body>
		<img src="img/1.jpg" />
		<img src="img/2.jpg" />
		<img src="img/3.jpg" />
	</body>
</html>