<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 100px; /*宽*/
height: 100px; /*高*/
background-color: red; /*背景颜色*/
position: absolute; /*绝对定位*/
left: 0;
top: 0;
animation: long 6s linear infinite; /* 动画属性:动画名 动画时间 运行速率(匀速) 无线执行*/
}
@keyframes long{
/* 动画执行开始的样式 */
from{}
25%{
left: calc(100% - 100px); /*calc()函数用于动态计算长度值。*/
top:0
}
50%{
left: calc(100% - 100px);
top: calc(100% - 100px);
}
75%{
left: 0;
top: calc(100% - 100px);
}
/* 动画执行完毕的样式,回到开始的地方 */
to{
left: 0;
top: 0;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
(ps:刚接触前端,属于小白中的小白。如果有写的不好或不对的地方,请见谅。这是上课老师教的,今天又学会一招(^U^)ノ~YO。我会继续努力哒,(ง •_•)ง)