猿问

有关css3 transition的问题。请问为什么没有文字慢慢浮上去的效果呀

<!DOCTYPE HTML>

<head>

 <script type="text/javascript" src="jquery-2.1.4.min.js">  

 </script>

 <style type="text/css">

.test{

  width: 200px;

  height: 200px;

  margin: 30px auto;

  border: 1px solid red;

}

.img{

  width: 200px;

  height: 200px;

  background-image: url("images/trustcentre.jpg");

}

.text{

  display: none; 

  width: 200px;

  height: 200px;

   transition:all 5s;

  -webkit-transition:all 5s; 

  -moz-transition:all 5s;

  -o-transition:all 5s;

}

.test:hover .text{

 display:block;

 background: #fff;

 opacity: .5;

  transform:translate(0px,-200px);

  -webkit-transform:translate(0px,-200px); 

  -moz-transform:translate(0px,-200px);

  -o-transform:translate(0px,-200px);

 -webkit-transform: translate(0px,-200px);

}

 </style>

</head>

<body>

<div class="test">

<div class="img"></div>

<div class="text">鼠标hover 以后，图片上面出现一个遮罩透明度变化，显示设置好的文字，完全使用css 实现鼠标hover 以后，图片上面出现一个遮罩透明度变化，显示设置好的文字，完全使用css  </div>

</div>

</body>

</html>


qq_穆_2
浏览 3998回答 1
1回答

我喺黄铭_M君

先理解好transition是怎么一回事吧,  .text前后的css属性都对不上此外display:block/none是没有transition效果的..把display去掉.. 给.text加上透明度和高度变化..另外你现在的遮罩加在.text错了吧..要不另外加遮罩要不直接改.img的透明度.img{ width: 200px; height: 200px; background: blue; opacity: 1; transition:opacity 3s;}.text{ overflow:hidden; opacity: 0; height: 0px; transition:all 3s;}.test:hover .img{ opacity:.5;}.test:hover .text{ width: 200px; height: 200px; opacity: 1; transform:translate(0px,-200px);}
0
随时随地看视频慕课网APP

相关分类

CSS3
我要回答