1. @keyframes 规则
文字跟着区域走
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
span
{
position:relative;
animation:mymove1 5.3s infinite;
-webkit-animation:mymove1 5.3s infinite; /* Safari and Chrome */
}
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:50px; left:200px; background:blue;}
50% {top:100px; left:0px; background:yellow;}
75% {top:0px; left:0px; background:green;}
100% {top:200px; left:0px; background:red;}
}
@keyframes mymove1
{
0% {top:0px; left:0px; background:red;}
25% {top:50px; left:200px; background:blue;}
50% {top:100px; left:0px; background:yellow;}
75% {top:0px; left:0px; background:green;}
100% {top:200px; left:0px; background:red;}
}
</style>
</head>
<body>
<div></div>
<span>我在跟踪他 </span>
</body>
</html>