<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.clear{
clear: both;
}
#div{
width: 200px;
height: 200px;
border: 1px solid transparent;
background-color: white;
-------相对于原位置移动-------
position: relative;
-------动画：名称；完成全部运动的时间；循环播放；交互循环-------
animation: a 10s infinite alternate;
}
--------------------------------------------动画内容：名称所对应的div-------------------------------------------------------
@keyframes a{
--------------------------------------------运动至0%时所产生的变化-------------------------------------------------------
0% {
background-color:blueviolet ;
--------------------------------------------边框变圆角：15%-------------------------------------------------------
border-radius: 15%;
--------------------------------------------盒子阴影：右侧阴影大小；下侧大小；颜色-------------------------------------------------------
box-shadow:-10px 10px slategrey;
left: 0px;
top:80px
}
25% {
/*width: 0px;
height: 0px;
border-top: 100px solid cornflowerblue;
border-left: 100px solid transparent;
border-right: 100px solid transparent;*/
background-color:cornflowerblue ;
border-radius: 30%;
box-shadow:-15px 0px 3px slategrey;
left: 600px;
top:80px
}
50% {
background-color: chartreuse;
border-radius: 50%;
box-shadow: 0px -10px 3px slategrey;
left: 600px;
top: 300px;
}
75% {
background-color: orange;
border-radius: 30%;
box-shadow: 10px 0px 3px slategrey;
left: 0px;
top: 300px;
}
100% {
background-color: blueviolet;
border-radius: 15%;
box-shadow: -10px 10px slategrey;
left: 0px;
top: 80px;
}
}
</style>
</head>
<body>
<div id="div"></div>
</body>
</html>