html/css小案例练习2【拉帘】
效果图：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keyword" content="css3阴影">
<meta name="Description" content="盒子练习复习">
<title>拉帘小案例（盒子模型练习）</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
background-color:black;
}
.wrap{
width: 800px;
height: 444px;
margin: 100px auto;/*上下100px 左右居中*/
}
.content{
position: relative;
width: 222px;/*盒模型计算：width+padding*2+border*2*/
height: 222px;
float: left;/*浮动*/
background-color: black;
border-radius: 50% ;
transition: .4s;
margin: 15px;
}
.content:hover{
transform: scale(1.2);
}
.hide{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;/*继承父级*/
border-radius: 50%;
background: rgba(0,0,0,0.5);
transition: .4s;
}
.content:hover .hide{
height: 0;
}
.content1:hover .hide{
top: 50%;/*hide下移50%*/
}
.imgs{
width: 200px;
height: 200px;
padding: 10px;
border-radius: 50%;
border: 1px solid #FFFFFF;/*边框*/
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">
<div class="hide"></div>
<img class="imgs" src="1.jpg" >
</div>
<div class="content content1">
<div class="hide"></div>
<img class="imgs" src="2.jpg" >
</div>
<div class="content">
<div class="hide"></div>
<img class="imgs" src="3.jpg" >
</div>
<div class="content content1">
<div class="hide"></div>
<img class="imgs" src="4.jpg" >
</div>
<div class="content ">
<div class="hide"></div>
<img class="imgs" src="5.jpg" >
</div>
<div class="content content1">
<div class="hide"></div>
<img class="imgs" src="6.jpg" >
</div>
</div>
</body>
</html>
页:
[1]