html 直线旋转,HTML实现旋转动画

文章目录

前言

一、实现效果

二、整体分析

1. 设置背景图：

2. 设置坐标系

3. 创建动画，设置参数

4. 定义动画的关键帧

三、实现代码

四、添加鼠标选中暂停效果

运行效果

前言

本文利用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. 创建动画