共计 1220 个字符,预计需要花费 4 分钟才能阅读完成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="guest-item">
<div class="img-header">
<img alt="nanfeng" src="guest-img1.png">
<div class="header-bg"></div>
</div>
<div class="text">
<h3> 南风 </h3>
<p> 寰球产品与规范副总裁 </p>
</div>
</div>
</body>
<style>
.guest-item .img-header {
margin: 0 auto;
text-align: center;
position: relative;
width: 182px;
height: 182px;
cursor: pointer;
}
.guest-item .img-header img {
display: inline-block;
width: 120px;
height: 120px;
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
margin-top: -60px;
margin-left: -60px;
border-radius: 100%;
transition: all 0.5s ease-out;
}
.guest-item .header-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url('guest-bg.png') no-repeat center top;
-webkit-transition: -webkit-transform 0.6s ease-out;
-moz-transition: -moz-transform 0.6s ease-out;
-o-transition: -o-transform 0.6s ease-out;
-ms-transition: -ms-transform 0.6s ease-out;
}
.guest-item:hover .header-bg {-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.guest-item:hover .img-header img {transform: scale(1.1);
}
.text {text-align: center;}
</style>
</html>
正文完