第八章 CSS3动画

最新推荐文章于 2024-07-09 05:45:50 发布

斑马有点困

最新推荐文章于 2024-07-09 05:45:50 发布

阅读量55

点赞数

分类专栏： # web前端笔记文章标签： css3 动画 css

本文链接：https://blog.csdn.net/qq_36827283/article/details/125187005

版权

笔记同时被 2 个专栏收录

56 篇文章 1 订阅

订阅专栏

web前端

14 篇文章 0 订阅

订阅专栏

css3动画

CSS3变形

CSS3变形是一些效果的集合
如平移、旋转、缩放、倾斜效果
每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div{
				height: 200px;
				width: 300px;
				background-color: aquamarine;
				margin-top: 50px;
			}
			.d1{
				/*旋转30°*/
				transform: rotate(30deg);
			}
			.d2{/*元素从其当前位置移动，根据给定的
			 left（x 坐标） 和 top（y 坐标） 位置参数：*/
				transform: translate(50px,30px);
			}
			.d3:hover{/*元素的尺寸会增加或减少，
			根据给定的宽度（X 轴）和高度（Y 轴）参数：*/
				transform: scale(1.5,1.5);
			}
			.d4:hover{/*元素翻转给定的角度，根据给定的
			水平线（X 轴）和垂直线（Y 轴）参数：*/
				transform: skew(40deg,30deg);
			}
			.d5:hover{
				/*matrix() 方法需要六个参数，包含数学函数
				，允许您：旋转、缩放、移动以及倾斜元素*/
				transform:matrix(0.866,0.5,-0.5,0.866,0,0);
			}
		</style>
	</head>
	<body>
		<div class="d1"></div>
		<div class="d2"></div>
		<div class="d3"></div>
		<div class="d4"></div>
		<div class="d5"></div>
		<div
		
	</body>
</html>

CSS3 过渡

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

在这里插入图片描述

属性	描述	CSS
[transition](mk:@MSITStore:D:\课件\Web前端 - 副本\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/cssref/pr_transition.asp.htm)	简写属性，用于在一个属性中设置四个过渡属性。	3
[transition-property](mk:@MSITStore:D:\课件\Web前端 - 副本\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/cssref/pr_transition-property.asp.htm)	规定应用过渡的 CSS 属性的名称。	3
[transition-duration](mk:@MSITStore:D:\课件\Web前端 - 副本\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/cssref/pr_transition-duration.asp.htm)	定义过渡效果花费的时间。默认是 0。	3
[transition-timing-function](mk:@MSITStore:D:\课件\Web前端 - 副本\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/cssref/pr_transition-timing-function.asp.htm)	规定过渡效果的时间曲线。默认是 “ease”。	3
[transition-delay](mk:@MSITStore:D:\课件\Web前端 - 副本\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/cssref/pr_transition-delay.asp.htm)	规定过渡效果何时开始。默认是 0。	3

在默认样式中声明元素的初始状态样式
声明过渡元素最终状态样式，如悬浮状态
在默认样式中通过添加过渡函数，添加一些不同的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			div{
				height: 450px;
				width: 600px;
				background-image: url(img/1.jpg);
				/*变化的属性 过度时间  过度速度样式 延迟时间*/
				transition: height 5s linear 1s,width 5s ease 3s;
			}
			div:hover{
				height: 100px;
				width: 100px;
			}
			.img1{
				height: 300px;
				transition: transform 5s linear;
			}
			.img1:hover{
				transform: rotate(3600deg);
			}
			
		</style>
	</head>
	<body>
		<div>
			
		</div>
		<img src="img/9.jpg" class="img1">
	</body>
</html>

CSS3动画

animation实现动画主要由两个部分组成
通过类似Flash动画的关键帧来声明一个动画
在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画</title>
		<style>
			div{
				height: 200px;
				width: 200px;
				background-color: blue;
				position: absolute;
				animation: two 5s;
			}
			
			@keyframes frist{
				from{
					background-color: blue;
					transform: rotate(0deg) translate(0px,0px);
					
				}to{
					background-color: red;
					transform: rotate(3600deg) translate(500px,300px);
					
				}
			}
			@keyframes two{
				0%{
					background-color: blue;
					transform: rotate(0deg);
					left: 0px;
				}
				25%{
					background-color: yellow;
					transform: rotate(360deg);
					left: 200px;
					}
				50%{
					background-color: red;
					transform: rotate(880deg);
					left: 400px;
				}
				75%{
					background-color: chartreuse;
					transform: rotate(2160deg);
					left: 600px;
				}
				100%{
					background-color: blue;
					transform: rotate(0deg);
					left: 0px;
				}	
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>