HTML实现旋转动画
前言
本文利用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页面中实现旋转动画用到的知识点和简单的案例
上一篇: pytorch模型转onnx
下一篇: neural_network