宽高变化动画代码，旋转动画代码（HTML5）

最新推荐文章于 2025-06-05 15:31:10 发布

原创最新推荐文章于 2025-06-05 15:31:10 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

本文通过两个具体实例展示了如何使用CSS3的@keyframes实现元素的旋转动画及宽高变化动画。详细介绍了动画的关键帧设置，包括动画名称、执行时间、速度曲线及循环次数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个图片是动态的，可以把代码复制下来看效果：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>动画</title>
<style type="text/css">
/* 上面的旋转动画代码 */
/* 定义动画，动画名：animat_rotate，可以取任意名字 */
/* 使用方式：animation: run 6s linear; */
@keyframes animat_rotate {
from {
/* 动画刚开始，角度 */
transform: rotate(0deg);
}
to {
/* 动画结束时，角度 */
transform: rotate(360deg);
}
}

/* ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== */

/* 下面的宽高变化动画代码 */

/* 定义动画，动画名：animat_changeWH，可以取任意名字 */
/* 使用方式：animation: animat_changeWH 6s linear; */
@keyframes animat_changeWH {
0% {
/* 动画刚开始，div的宽高 */
width: 200px;
height: 200px;
}
50% {
/* 动画执行一半时，div的宽高 */
width: 100px;
height: 400px;
}
100% {
/* 动画执行完毕时，div的宽高 */
width: 200px;
height: 200px;
}
}
</style>
</head>
<body>

<div style="animation: animat_rotate 6s linear infinite; width: 200px; height: 200px; margin: 64px 64px; background: url('http://file.popoho.com/wzfzl/20160706/q0rafysiogkco140510110S8-25.jpg') no-repeat;"></div>


<div style="animation: animat_changeWH 6s linear infinite; width: 200px; height: 200px; margin: 64px 64px; background-color: green;"></div>
</body>
</html>