前言
本文利用HTML+CSS在网页实现旋转动画，源码以及素材已经全部放到了Gitee仓库中，需要源码的小伙伴们到仓库自取（本文在仓库中对应的项目名为Rotate）
仓库地址：https://gitee.com/dream-flight/repository
提示：以下是本篇文章正文内容，下面案例可供参考
一、实现效果
本文代码要实现的旋转动画的最终显示效果
二、整体分析
在HTML界面实现旋转效果时，要完成以下几点：（在body标签中添加了一个div，class的值为picture，下面的操作都是对于picture的操作）
1. 设置背景图：
利用CSS属性中的background-image来设置要转动的背景图片
这个时候要注意到，本身图片是正方形的，HTML中没有定义圆形，所以要将正方形的图片修改为圆形时要设置CSS属性中的border-radius，通过调整圆角矩形的角度来构造出圆形
当border-radius的值大于等于正方形图片边长的一半时就会显示为圆形
2. 设置坐标系
需要将CSS属性中的position属性值设置为relative
因为将position属性设置为relative时支持动画
3. 创建动画，设置参数
利用CSS属性中的animation属性来创建动画并设置其参数
例如：animation:run 2s linear infinite;
在这行CSS属性的代码当中run为动画名称，由自己定义，2s为执行时间也是由自己定义，linear是为了解决之后旋转速度不均匀导致前快后慢不统一的情况，最后infinite的作用是让旋转动画反复执行
4. 定义动画的关键帧
代码如下（示例）：
@keyframes run{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
在CSS中@keyframes标签的意义为可以创建动画，创建动画是通过逐步改变从一个CSS样式设定到另一个CSS样式，指定的变化时发生时使用％，或关键字"from"和"to"，在这里使用的是"from"和"to"关键字。
这里的rotate为旋转，这段代码的意思是之前定义的animation动画名称从0°开始旋转到360°（正好旋转一周）
三、实现代码
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML实现旋转动画</title>
<style>
.picture{
width: 650px;
height: 650px;
background-image: url(./image/地球2.jpg);
border-radius: 325px;
position: relative;
animation: run 12s linear infinite;
}
@keyframes run{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
</style>
</head>
<body>
<h2>HTML实现旋转动画</h2>
<div class="picture"></div>
</body>
</html>
四、添加鼠标选中暂停效果
当鼠标移动到正在旋转的图片上时暂停图片的旋转只需要在<style></style>标签中添加一个对picture的选择器hover，当鼠标移动到图片时执行暂停命令即可
代码如下（示例）：
.picture:hover{
animation-play-state: paused;
}
play-state表示当前动画的播放状态，paused为暂停
运行效果
以上便是如何在HTML页面中实现旋转动画用到的知识点和简单的案例
3223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
