<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/css.css">
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 480px;
height: 300px;
overflow: hidden;
position: relative;
float: left;
}
.wenzi{
position: absolute;
top:0;
left: 0;
}
.pingyi{
background-color: #000000;
}
.pingyi .wenzi{
padding: 20px;
color: #FAF8F8;
}
.pingyi .wenzi p{
color: #747373;
background-color:#FFFFFF;
margin-top: 5px;
transform: translate(-300px);
}
.pingyi:hover img{
opacity: 0.7;
transition: opacity 3s ease-in;
}
.pingyi:hover .wenzi p{
transform: translate(0);
transition:translate 3s ease-in;
}
.pingyi:hover .wenzi p:nth-of-type(1){
transition-delay:0.2s;
}
.pingyi:hover .wenzi p:nth-of-type(2){
transition-delay:0.4s;
}
.pingyi:hover .wenzi p:nth-of-type(3){
transition-delay:0.6s;
}
</style>
</head>
<body>
<div class="box pingyi">
<img src="image/c.jpg" alt="">
<div class="wenzi">
<h4>平移动画</h4>
<p>文字说明1</p>
<p>文字说明2</p>
<p>文字说明3</p>
</div>
</div>
</body>
</html>不知道哪里有问题，设置的延时没有显现。
希望有前辈可以帮忙看下
pingyi:hover .wenzi p{} transition：去掉translate
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/css.css">
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 480px;
height: 300px;
overflow: hidden;
position: relative;
float: left;
}
.wenzi{
position: absolute;
top:0;
left: 0;
}
.pingyi{
background-color: #000000;
}
.pingyi .wenzi{
padding: 20px;
color: #FAF8F8;
}
.pingyi .wenzi p{
color: #747373;
background-color:#FFFFFF;
margin-top: 5px;
transform: translate(-300px);
}
.pingyi:hover img{
opacity: 0.7;
transition: opacity 3s ease-in;
}
.pingyi:hover .wenzi p{
transform: translate(0);
transition: 3s ease-in;
}
.pingyi:hover .wenzi p:nth-of-type(1){
transition-delay:0.2s;
}
.pingyi:hover .wenzi p:nth-of-type(2){
transition-delay:0.4s;
}
.pingyi:hover .wenzi p:nth-of-type(3){
transition-delay:0.6s;
}
</style>
</head>
<body>
<div class="box pingyi">
<img src="image/c.jpg" alt="">
<div class="wenzi">
<h4>平移动画</h4>
<p>文字说明1</p>
<p>文字说明2</p>
<p>文字说明3</p>
</div>
</div>
</body>
</html>