定位与伪类选择器的使用

<style>

*{
margin:0;
padding:0;
list-style:none;
}
.first{
width:200px;
height:240px;
float:left;
border-radius: 5px;
margin:50px 20px;
text-align:center;
background:navajowhite;
position:relative;
}
.first img{
width:100px;
height:100px;
border:3px solid white;
border-top-left-radius: 50px;
border-bottom-right-radius:50px;
position:absolute;
left:50px;
top: -50px;
transition:all 0.4s;
}
.first:hover img{
width:100px;
height:100px;
border:3px solid indianred;
border-radius:50px;
}
.first h4{
width:200px;
height:20px;
position:absolute;
top:70px;
}
.first span{
display:block;
width:200px;
height:20px;
color:gray;
position:absolute;
top:100px;
}
.first p{
width:200px;
font-size:14px;
position:absolute;
top:130px;
}
.first .ball{
width:200px;
height:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
position:absolute;
bottom:0px;
background:indianred;
transition:all 0.4s;
}
.first:hover .ball{
width:200px;
height:40px;
position:absolute;
top:200px;
background:indianred;
}
.secound{
width:200px;
height:240px;
float:left;
border-radius: 5px;
margin:50px;
text-align:center;
background:navajowhite;
position:relative;
}
.secound img{
width:200px;
height:140px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
position:absolute;
left:0px;
bottom:0px;
transition: all 1s;
}
.secound:hover img{
transform:scale(0,0);
}
.ouhou{
position: absolute;
top:-60px;
}
.secound:hover .ouhou{
position:absolute;
top:60px;
}
.secound h4{
width:200px;
height:20px;
position:absolute;
top:65px;
}
.secound span{
display:block;
width:200px;
height:20px;
color:gray;
font-size:14px;
position:absolute;
top:85px;
}
.secound p{
width:180px;
padding:0px 10px;
font-size:14px;
position:absolute;
top:105px;
}
.third{
width:200px;
height:240px;
float:left;
border-radius: 5px;
margin:50px 20px;
text-align:center;
z-index:1;
background:navajowhite;
position:relative;
overflow:hidden;
transform-style:preserve-3d;
perspective: 400px;
}
.third img{
width:200px;
height:140px;
position:absolute;
bottom:0px;
left: 0px;
transition:all 0.4s;
}
.third:hover img{
width:200px;
height:140px;
transform-origin:bottom;
transform:roteta-X(120deg);
}
.forth{
width:200px;
height:240px;
float:left;
border-radius: 5px;
margin:50px 20px;
text-align:center;
background:navajowhite;
position:relative;
}
.forth:after{
content:"";
border-top:35px solid white;
border-right:100px solid transparent;
border-bottom:35px solid transparent;
border-left:100px solid transparent;
position:absolute;
top:40px;
left:0px;
}
.forth h4{
width:180px;
height:20px;
padding:0px 10px;
position:absolute;
top:70px;
}
.forth span{
display:block;
font-size:14px;
width:180px;
height:20px;
padding: 0px 10px;
color:gray;
position:absolute;
top:90px;
}
.forth p{
width:180px;
padding:0 10px;
font-size:14px;
position:absolute;
top:110px;
}

</style>

<div class="first">
<img src="../img/silly qiuqiu.jpg">
<h4>healthy</h4>
<span>john</span>
<p>Eating dangsheng and huangqi is good for our body!</p>
<div class="ball"></div>
</div>
<div class="secound">
<img src="../img/silly qiuqiu.jpg">
<div class="ouhou">
<h4>球球</h4>
<span>西伯利亚</span>
<p>仙女星系银河系太阳系地月系地球亚洲中国吉林省松原市长山镇扛把子</p>
</div>
</div>
<div class="third">
<img src="../img/silly qiuqiu.jpg">
</div>
<div class="forth">
<h4>夜猫子</h4>
<span>东北省</span>
<p>仙女星系银河系太阳系地球亚洲中国东北省库特跟市毛格镇二进屯</p>
</div>

定位与伪类选择器的使用

原文：https://www.cnblogs.com/magnum-2077/p/15008542.html