傳送門：
http://106.12.120.191/html/auto.html
效果圖如下：
html文件如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>auto</title>
<style type="text/css">
.square {
background-color: fuchsia;
position: relative;
width: 12.5rem;
height: 12.5rem;
margin-top: 3.125rem;
animation: retatea 5s ease 0s infinite alternate,change 5s ease infinite alternate;
}
@keyframes retatea {
from {
transform: rotate(0deg);
left: 0px;
}
to {
transform: rotate(360deg);
left: 800px;
}
}
@keyframes change {
0% {
background-color: fuchsia;
}
25% {
background-color: greenyellow;
}
50% {
background-color: royalblue;
}
75% {
background-color: lawngreen;
}
100% {
background-color: orangered;
}
}
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>