<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 50px;
height: 50px;
background-color: yellow;
margin: 20px auto;
transition: all 1s ease;
}
div:hover{
width:800px;
background-color: red;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</body>
</html>
設(shè)置五個(gè) div 的偽類 :hover 讓鼠標(biāo)劃過塊時(shí)塊展開
transition 后 all 讓所有的過渡動(dòng)畫生效 1s內(nèi)完成 ease 為過渡效果的運(yùn)動(dòng)效果 開始和結(jié)束為勻速 中間為快速 如果為 linear 為勻速
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{
width: 535px;
height:290px;
margin:20px auto;
position: relative;
overflow:hidden;
}
.box .son{
width: 535px;
height:290px;
background-color: black;
color:white;
text-align: center;
position: absolute;
top: 290px;
}
.box:hover .son{
top:0px;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/qq.jpg" alt="薛之謙" >
<div class="son"><p>這是薛之謙的照片</p></div>
</div>
</body>
</html>
設(shè)置一個(gè)父類div 里面用<img>標(biāo)簽導(dǎo)入一張圖片，在設(shè)置子類div里面添加文字“圖片的描述”
父類設(shè)置居中 開啟相對(duì)定位，子類開啟絕對(duì)定位，用top屬性使子類位于父類的下面
給父類設(shè)置屬性overflow為hidden，使超出父類的區(qū)域“一剪沒”，再給父類設(shè)置偽類:hover作用給子類，top屬性上調(diào)就可以使正常狀態(tài)下只有圖片，鼠標(biāo)劃過圖片時(shí)，文字的框上移
