<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 字体旋转进入动画</title>
<style>
.box {width:1000px;height:264px;overflow:hidden;position:relative;font-size:0;}
.box span {font-size:200px;color:red;position:absolute;display:inline-block;width:200px;text-align:center;}
.box span:nth-child(1) {animation:animate1 3s infinite;}
.box span:nth-child(2) {animation:animate2 3s infinite;color:#6c20da;}
.box span:nth-child(3) {animation:animate3 3s infinite;color:blue;}
.box span:nth-child(4) {animation:animate4 3s infinite;color:green;}
.box span:nth-child(5) {animation:animate5 3s infinite;color:yellow;}
@keyframes animate1 {
0% {
left:1000px;
transform: rotate(360deg);
}
50% {
left:0;
transform: rotate(0);
}
100% {
left:1000px;
transform: rotate(720deg);
}
}
@keyframes animate2 {
0% {
left:1000px;
transform: rotate(360deg);
}
50% {
left:200px;
transform: rotate(0);
}
100% {
left:1000px;
transform: rotate(720deg);
}
}
@keyframes animate3 {
0% {
left:1000px;
transform: rotate(360deg);
}
50% {
left:400px;
transform: rotate(0);
}
100% {
left:1000px;
transform: rotate(720deg);
}
}
@keyframes animate4 {
0% {
left:1000px;
transform: rotate(360deg);
}
50% {
left:600px;
transform: rotate(0);
}
100% {
left:1000px;
transform: rotate(720deg);
}
}
@keyframes animate5 {
0% {
left:1000px;
transform: rotate(360deg);
}
50% {
left:800px;
transform: rotate(0);
}
100% {
left:1000px;
transform: rotate(720deg);
}
}
</style>
</head>
<body>
<div class="box">
<span>H</span>
<span>T</span>
<span>G</span>
<span>Y</span>
<span>M</span>
</div>
</body>
<script>
</script>
</html>
