遮罩
2021-07-16 本文已影响0人
唔哈哈哈哈
遮罩
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>遮罩</title>
<style type="text/css">
.box{
width: 250px;
height: 250px;
border: 5px solid #fff;
border-radius: 50%;
box-shadow: 0 0 5px #f00;
position: relative;
}
.box img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.box .cover{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
border-radius: 50%;
text-align: center;
line-height: 250px;
font-size: 25px;
color: #fff;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
/* .box:hover .cover{ */
.cover:hover{
opacity: 1;
transition: opacity 1s;
}
</style>
</head>
<body>
<div class="box">
<img src="images/pic3.jpg" alt="">
<!-- 遮罩层 -->
<div class="cover">
更换头像
</div>
</div>
</body>
</html>
其它遮罩
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>其它遮罩</title>
<style>
.box{
width: 250px;
height: 250px;
border: 5px solid #fff;
border-radius: 50%;
box-shadow: 0 0 5px #f00;
position: relative;
margin-top: 10px;
position: relative;
}
.box img{
width: 100%;
height: 100%;
border-radius: 50%;
}
/* 设置遮罩层的公共样式 */
.box1{
width: 100%;
height: 100%;
border-radius: 50%;
background-color: rgba(0,0,0,0.5);
text-align: center;
line-height: 250px;
font-size: 25px;
color: #fff;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
/* 设置第一个遮罩层效果 */
.box .cover1{
transform: translate(-260px);
}
.box:hover .cover1{
opacity: 1;
transform: translate(0px);
transition: opacity 2s,transform 2s;
}
/* 处理第二个遮罩层效果 */
.box .cover2{
transform: scale(0);
}
.box:hover .cover2{
opacity: 1;
transform: scale(1);
transition: opacity 2s,transform 2s;
}
/* 处理第三个遮罩层效果 */
.box .cover3{
transform: scale(0) rotate(360deg);
}
.box:hover .cover3{
opacity: 1;
transform: scale(1) rotate(0deg);
transition: opacity 2s,transform 2s;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/pic3.jpg" alt="">
<div class="box1 cover1">
更换头像
</div>
</div>
<div class="box">
<img src="./images/pic3.jpg" alt="">
<div class="box1 cover2">
更换头像
</div>
</div>
<div class="box">
<img src="./images/pic3.jpg" alt="">
<div class="box1 cover3">
更换头像
</div>
</div>
</body>
</html>
