                        課程
                    
                        /前端開發(fā)
                        
                            /CSS3
                        
                        /CSS3圖片動(dòng)態(tài)提示效果

初始頁(yè)面刷新瀏覽器時(shí)有文字退出效果，但是我希望初始時(shí)沒(méi)有效果

<div?class="center_div">
	??	<img?src="img/bg.jpg"?width="280"?height="380"/>
????????<div?class="center_div_p">
????????	<p>我們一起向快樂(lè)出發(fā)</p>
??????????<p>憧憬，自由</p>
????????</div>
??????
	??</div>

*{padding:?0px;?margin:?0px;}
.center_div{width:280px;?height:?380px;?
??position:?relative;?margin:?auto;overflow:?hidden;
}
.center_div?.center_div_p{??position:?absolute;?top:0px;?left:0px;?}
.center_div?.center_div_p?p{?
??transition:?transform?0.5s;color:?#fff;?width:150px;line-height:?25px;transform:?translate(-150px,0px);
??}

.center_div:hover?.center_div_p?p{transform:?translate(0px,0px);}
.center_div?.center_div_p?p:nth-of-type(1){transition-delay:?0.5s;}
.center_div?.center_div_p?p:nth-of-type(2){transition-delay:?1s;}

麻煩老師幫我看看，如何達(dá)到初始時(shí)是沒(méi)有動(dòng)畫，只有鼠標(biāo)移動(dòng)到圖片上時(shí)才有動(dòng)畫？

11:49

遠(yuǎn)縭…

2016-05-31

源自：CSS3圖片動(dòng)態(tài)提示效果 3-1

關(guān)注問(wèn)題我要回答

844

操作

收起

2 回答

慕絲8042145
2018-12-26

對(duì)呀這個(gè)問(wèn)題怎么解決?

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

qq_諾L一世相伴_0
2016-05-31

@charset?"utf-8";
*{margin:0px;padding:0px;}
figure{position:relative;width:33.33%;height:350px;overflow:hidden;float:left;}
figcaption{position:absolute;top:0px;left:0px;color:#FFF;font-family:"微軟雅黑";margin:5px?10px;}
@media?screen?and?(max-width:600px){
?figyre{width:100%}
}
@media?screen?and?(min-width:601px)?and?(max-width:1000px){
?figure{width:50%}
}
@media?screen?and?(min-width:1001px){
?figure{width:33.33%}
}
figure?figcaption?p,h2,div{transition:all?0.35s;}
figure?img{transition:all?0.35s;opacity:0.8;}
.test1{background:#2f0000;}
.test1?figcaption?p{background:#fff;color:#333;margin:5px;text-align:center;transform:translate(-130px,0px);}
.test1?figcaption{padding:20px;}
.test1:hover?figcaption?p{transform:translate(0px,0px);}
.test1?figcaption?p:nth-of-type(1){?transition-delay:0.05s;}
.test1?figcaption?p:nth-of-type(2){?transition-delay:0.1s;}
.test1?figcaption?p:nth-of-type(3){?transition-delay:0.15s;}
.test1:hover?img{transform:?translate(-50px,0);?opacity:0.5;}

<!doctype?html>
<html>
<head>
?<meta?http-equiv="content-type"?content="text/html;?charset=utf-8">?
????<link?href="style.css"?type="text/css"?rel="stylesheet">
?<title>動(dòng)畫效果</title>
</head>
<body>
?<figure>
?????<img?src="img/1.jpg">
?????<figcaption>
?????????<h2>平移動(dòng)畫</h2>
????????????<p>圖片描述</p>
????????????<p>圖片描述</p>
????????????<p>圖片描述</p>
????????</figcaption>
????</figure>
</body>
</html>

hover就是指鼠標(biāo)懸停事件，所以鼠標(biāo)懸停時(shí)就會(huì)觸發(fā)你所設(shè)置的動(dòng)畫效果。hover后的代碼就是設(shè)置的動(dòng)畫效果。