延迟动画.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>延迟动画</title>
<style type="text/css">
*{
padding: 0;margin: 0;
}
div{
width: 400px;
height: 400px;
margin: 0 auto;
background: url(../css/i/0.jpg) 0 0 no-repeat;
position: relative;
transition:.5s all ease;
overflow: hidden;
}
p{
position: absolute;
font-size: 30px;
color: orange;
top:60px;
left:20px;
transition:.5s all ease;
}
span{
position: absolute;
color: #666;
background: #fff;
padding:0 20px;
font-size: 16px;
line-height: 20px;
height: 20px;
left:-240px;
/* width: auto;
overflow:hidden;
text-overflow:clip;
width: 200px;
display: block;*/
/*word-break: keep-all;*/
transition:.5s all ease-in-out;
z-index: 10;
}
span:nth-of-type(1){
top:150px;
}
span:nth-of-type(2){
top:180px;
transition-delay:.2s;
}
span:nth-of-type(3){
top:210px;
transition-delay:.4s;
}
div:hover p{
transform: translateY(-20px);
}
div:hover span{
transform: translateX(260px);
}
div:hover{
/*background-position:-20px 0;*/
background-position:-30px 0;
/*background-color:rgba(255,255,255,.5);*/
}
div:hover a{
background: rgba(255,255,255,0.8);
}
a{
display: block;
position: absolute;
width: 400px;
height: 400px;
top: 0;
left:0;
z-index: 20;
background: rgba(255,255,255,0);
}
</style>
</head>
<body>
<div>
<p>平移动画2</p>
<a href="#" class="mydiv">
<span>1606最棒的</span>
<span>1606努力就会有收获 upupup</span>
<span>1606期待美好未来</span>
</a>
</div>
</body>
</html>
