文章目录
前言
一、实现效果
二、整体分析
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. 创建动画