欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML实现旋转动画

程序员文章站 2022-07-13 11:43:24
...


前言

本文利用HTML+CSS在网页实现旋转动画,源码以及素材已经全部放到了Gitee仓库中,需要源码的小伙伴们到仓库自取(本文在仓库中对应的项目名为Rotate)

仓库地址:https://gitee.com/dream-flight/repository


提示:以下是本篇文章正文内容,下面案例可供参考

一、实现效果

本文代码要实现的旋转动画的最终显示效果

HTML实现旋转动画

二、整体分析

在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实现旋转动画


以上便是如何在HTML页面中实现旋转动画用到的知识点和简单的案例

相关标签: 笔记 html css