標(biāo)題的平移效果怎么出不來(lái)啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<figure class="test1">
<img src="images/mm1.jpg"/>
? ? <figcaption>
? ? <h2>海賊王</h2>
? ? ? ? <p>我要成為</p>
? ? ? ? <p>海賊王一樣的男人</p>
? ? ? ? <p>ohhhhhhh ?Yeah</p>
? ? ? ? <div></div>
? ? </figcaption>
</figure>
<figure class="test2">
<img src="images/mm2.jpg"/>
? ? <figcaption>
? ? <h2>海賊王</h2>
? ? ? ? <p>我要成為</p>
? ? ? ? <p>海賊王一樣的男人</p>
? ? ? ? <p>ohhhhhhh ?Yeah</p>
? ? ? ? <div></div>
? ? </figcaption>
</figure>
<figure class="test3">
<img src="images/mm3.jpg"/>
? ? <figcaption>
? ? <h2>海賊王</h2>
? ? ? ? <p>我要成為</p>
? ? ? ? <p>海賊王一樣的男人</p>
? ? ? ? <p>ohhhhhhh ?Yeah</p>
? ? ? ? <div></div>
? ? </figcaption>
</figure>
</body>
</html>
@charset "utf-8";
/* CSS Document */
/*設(shè)置總體的樣式，圖片、標(biāo)題的樣式*/
body,figure,figcaption,h2,p{margin: 0;padding: 0;}
body{background-color:#CCC;}
/*給圖片加一個(gè)動(dòng)畫(huà)*/
figure img{opacity:0.8;}//設(shè)置圖片的透明度
/*添加一個(gè)動(dòng)畫(huà)時(shí)間，運(yùn)用了transition屬性*/
figure figcaption p{transition:all 0.35s;}
/*設(shè)置標(biāo)題的位置*/
figure{position:relative;width:33.33%;overflow:hidden;height:191px;float:left;}
figcaption{position:absolute;top:0px;left:0px;color:#f90;}
/*figure figcaption p{background-color:#FFF;font-family:"微軟雅黑";font-size:12px;margin:3px;}*/
@media screen and (max-width:600px){
figure{width:100%}
}
@media screen and (min-width:601px) and (max-width:1000px){
figure{width:50%}
}
@media screen and (min-width:1001px){
figure{width:33.33s%}
}
/*第一張圖片的設(shè)置*/
.test1{background:#0FF;}
/*對(duì)第一張圖p標(biāo)簽的動(dòng)畫(huà)設(shè)置*/
.test1 figcaption p{background-color:#FFF;font-family:"微軟雅黑";font-size:12px;margin:3px;text-align:center;transform:translate(-120px,0px);}
.test1 figcaption {padding:20px;}
/*鼠標(biāo)經(jīng)過(guò)的設(shè)置*/
.test1:hover figcaption p{transform:translate(0px,0px);}
2016-12-11
我也不知道啊，sorry