<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>动画</title>
<style type="text/css">
.box{
width: 300px;
height: 500px;
border: 2px solid blue;
/* step2:绑定动画
animation:动画名称 持续时间 次数 速度 延迟
infinite:无数次
*/
animation: change 2s infinite linear 1s;
text-align: center;
line-height: 200px;
}
/* 动画:
step:创建关键帧
@keyframes 动画名称{
form{}
to{}
}
step2:绑定动画
animation
*/
@keyframes change{
20%{/* 开始帧 */
transform: rotate(180deg);
background-color: palevioletred;
}
40%,55%{ /* 结束帧 */
width: 300px;
transform: rotate(180deg);
background-color: aquamarine;
}
60%,80%{ /*某种状态持续一段时间 */
width: 600px;
height: 800px;
background-color: antiquewhite;
}
100%{
width: 300px;
height: 500px;
background-color: green;
}
}
</style>
</head>
<body>
<div class="box">这是一个盒子</div>
</body>
</html>
前端 动画效果 (html)
最新推荐文章于 2024-07-24 23:00:08 发布