21、animation——active动画
2022-06-07 本文已影响0人
小黄不头秃
代码
让一个小方块来回跑。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
.box1{
width: 800px;
height: 800px;
background-color: silver;
overflow: hidden;
}
.box1 div{
width: 100px;
height: 100px;
margin-bottom: 100px;
}
.box2
{
background-color: #bbffaa;
animation: test;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction:alternate-reverse;
animation-play-state: running;
animation-fill-mode: backwards;
}
@keyframes test{
from{
margin-left: 700px;
}
to{
margin-left: 0px;
}
}
/*
动画一定要设置一个关键帧
动画执行的每一个步骤
animation-iteration-count: infinite；执行无限次
animation-direction:reverse;执行方向alternate-reverse往复执行
animation-play-state: running;动画执行paused动画暂停
animation-fill-mode: backwards;执行完后停下来的位置
*/
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>
33.jpg
