有关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_穆_21回答
-
我喺黄铭_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);}
随时随地看视频慕课网APP
相关分类
CSS3