index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
<div class="tt">H</div>
<div class="tt t1">e</div>
<div class="tt t2">l</div>
<div class="tt t3">l</div>
<div class="tt t4">e</div>
<div class="tt t5"> </div>
<div class="tt t6">W</div>
<div class="tt t7">o</div>
<div class="tt t8">r</div>
<div class="tt t9">l</div>
<div class="tt t10">d</div>
</div>
</body>
</html>
index.css
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
background: black;
}
.box{
margin: auto;
width: 50%;
background: black;
overflow: hidden;
}
.tt{
position: relative;
left: 0px;
transition: all 4s ease 0s;
opacity: 0;
transform:rotate(-0deg);
float: left;
color: seagreen;
}
.t1{
transition: all 4s ease 0.1s;
}
.t2{
transition: all 4s ease 0.2s;
}
.t3{
transition: all 4s ease 0.3s;
}
.t4{
transition: all 4s ease 0.4s;
}
.t5{
transition: all 4s ease 0.5s;
}
.t6{
transition: all 4s ease 0.6s;
}
.t7{
transition: all 4s ease 0.7s;
}
.t8{
transition: all 4s ease 0.8s;
}
.t9{
transition: all 4s ease 0.9s;
}
.t10{
transition: all 4s ease 1s;
}
body:hover .tt{
left: 330px;
opacity: 1;
transform:rotate(-720deg);
}
效果图：
