                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /CSS3图片动态提示效果

初始页面刷新浏览器时有文字退出效果，但是我希望初始时没有效果

<div class="center_div">
	  	<img src="img/bg.jpg" width="280" height="380"/>
        <div class="center_div_p">
        	<p>我们一起向快乐出发</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;}

麻烦老师帮我看看，如何达到初始时是没有动画，只有鼠标移动到图片上时才有动画？

11:49

远缡…

2016-05-31

源自：CSS3图片动态提示效果 3-1

关注问题我要回答

811

操作

收起

2 回答

慕丝8042145
2018-12-26

对呀这个问题怎么解决

0 回复有任何疑惑可以回复我~

收起回答

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>动画效果</title>
</head>
<body>
 <figure>
     <img src="img/1.jpg">
     <figcaption>
         <h2>平移动画</h2>
            <p>图片描述</p>
            <p>图片描述</p>
            <p>图片描述</p>
        </figcaption>
    </figure>
</body>
</html>

hover就是指鼠标悬停事件，所以鼠标悬停时就会触发你所设置的动画效果。hover后的代码就是设置的动画效果。