<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div class="change">
</div>
<style type="text/css">
.change{
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
background-color: bisque;
width: 200px;
height: 200px;
animation:change 1s linear infinite;
}
@keyframes change
{
0%{transform:rotate(0deg);}
25%{transform:rotate(90deg);}
50%{transform:rotate(180deg);}
75%{transform:rotate(270deg);}
100%{transform:rotate(360deg);}
}
</style>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div class="change">
</div>
<style type="text/css">
.change{
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
background-color: bisque;
width: 200px;
height: 200px;
animation:change 1s linear infinite;
}
@keyframes change
{
0%{transform:rotate(0deg);}
25%{transform:rotate(90deg);}
50%{transform:rotate(180deg);}
75%{transform:rotate(270deg);}
100%{transform:rotate(360deg);}
}
</style>
</body>
</html>