实现鼠标移入遮罩层动画
2019-10-31 本文已影响0人
帅帅哒主公
1.效果
遮罩层动画.gif
2.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移入遮罩层动画</title>
<style>
body{
margin: 0;/*清除浏览器格式*/
}
.wrap{
overflow: hidden;/*溢出隐藏，即当文字content盒子超出wrap盒子范围时进行隐藏*/
width: 351px;
height: 351px;
margin: 100px auto 0 auto;
background-image: url("images/bg-pic.png");
background-size: 100%;/*图片大小*/
transition: 1s;/*过渡*/
}
/*改变背景图片的变化效果*/
.wrap:hover{
background-size: 110%;/*1s时间图片放大*/
}
.content{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);/*rgba,三色，a表示透明度*/
transform: translateX(-351px);/*位移*/
transition: .5s;
}
/*鼠标悬停在图片时，将内容盒子右移351个像素，达到文字出现的效果*/
.wrap:hover .content{
transform: translateX(0);
}
.content h2{
margin-block-start:0;
margin-block-end:0;
height: 105px;
text-align: center;
line-height: 105px;/*行高等于盒子高度，使文字垂直居中*/
color: white;
}
.content ul li{
line-height: 30px;
color: white;
cursor: pointer;/*设置鼠标箭头样式*/
}
.content ul li:hover{
font-weight: bold;
font-size: 18px;
transition: 1s;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">
<h2>宝贝描述</h2>
<ul>
<li>男神好帅</li>
<li>男神可爱</li>
<li>男神有才</li>
<li>花开再见</li>
<li>男神归来</li>
</ul>
</div>
</div>
</body>
</html>
