Html
    Css
    Js
.photo {
	position:relative;
	width:200px;
	height:200px;
	border-radius:50%;
	background:#ff8868;
	overflow:hidden;
}
.yuan {
	text-align:center;
	color:#fff;
	line-height:100px;
	font-size:25px;
	background:#333;
	position:absolute;
	border-radius:50%;
	width:100px;
	height:100px;
	left:100px;
	top:130px;
}
.yuan {
	transition:all 0.2s ease-in;
}
.photo img {
	transition:all 0.2s ease-in;
}
a:hover .yuan {
	transform:translate(-42px,-72px) scale(2) rotate(360deg);
	opacity:0.7;
	font-size:14px;
}
a:hover .photo img {
	transform:scale(1.3);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.8.3
 立即下载

鼠标移入事件

纯css鼠标移入事件

0