CSS专题之动画

最新推荐文章于 2024-04-09 16:48:16 发布

fengyinchao

最新推荐文章于 2024-04-09 16:48:16 发布

阅读量416

点赞数 1

分类专栏： CSS专题

本文链接：https://blog.csdn.net/fengyinchao/article/details/49532693

版权

CSS专题专栏收录该内容

9 篇文章 0 订阅

订阅专栏

三个关键属性：transform transition animation

基本知识：

1、变形Transform

1.1、缩放scale transform：scale(0.5，1.5) //水平缩小50%，垂直扩大150%，只有一个参数时两个方向一样

1.2、倾斜skew transform：skew(30deg，30deg)//两个方向的倾斜，只有一个参数时表示水平倾斜（左上）

1.3、移动translate transform：translate(30px，30px)//两个方向的平移，只有一个参数时表示水平平移（右上）

1.4、旋转rotate transform:rotate(45deg) //顺时针旋转45度

注意：使用transform方法变形时，是以元素的基准点进行的，使用transform-origin属性可改变基准点，水平方向可取left center right,垂直方向可取top center bottom

2、Transition

Transition:property duration timing-function,参数一指定对哪个参数进行平滑过渡，参数二指定多长时间内完成过度，参数三指定用什么方法进行过度

3、Animation

使用方法：

1、创建关键帧(注意:要兼容的话要加上前缀，如-webkit-等)

@keyframes 关键帧集合名{

0%{ 代码 }

50%{ 代码 }

100%{ 代码 }

}

2、在指定元素上使用关键帧

-webkit-animation-name: 关键帧名；

-webkit-animation-duration:5s;

-webkit-animation-timing-function:linear;

语法：

animation: name duration timing-function delay iteration-count direction;

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数，infinite表示无穷次。
animation-direction	规定是否应该轮流反向播放动画。

animation-direction: normal|alternate;

值	描述
normal	默认值。动画应该正常播放。
alternate	动画应该轮流反向播放。

代码实践：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS动画学习</title>
	<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
	<div class="test-transition">
		transition
	</div>
	<div class="transform-animate">
		<div class="test-transform_translate">
			transform:translate(x,y)
		</div>
		<div class="test-transform_scale">
			测试transform:scale(x,y)
		</div>
		<div class="test-transform_skew">
			测试transform:skew(x,y)
		</div>
		<div class="test-transform_rotate">
			测试transform:rotate()
		</div>
		<div class="test-animate">
			animation
		</div>
		<div class="sum">
			<ul>
				<h2>总结：</h2>
				<li>transition:属性名 几秒内完成 用什么样的速度完成</li>
				<li>transform有四种变换，通常结合transition一起使用，即将transform看作transition的属性名</li>
				<li>实现变化的时机是给需要变化的box添加hover伪类，伪类样式里填写变化后的样式，原来box里填写变化前的样式</li>
				<li>animate的使用只需两步：<br>1创建关键帧，在每一帧里写需要变化的属性;<br>2 对要进行变化的box添加animation属性，该属性有六个值：帧名 几秒内完成 完成速度函数 延迟多久才执行 重复次数 是否需要反向执行动画(normal/alternate)</li>
			</ul>
	
	</div>
	</div>
	
	
</body>
</html>

样式表文件：

.test-transition,.test-transform_translate,.test-transform_scale,
.test-transform_skew,.test-transform_rotate,.test-animate{
	width: 200px;
	height: 200px;
	text-align: center;
	line-height: 200px;
	background-color: #ccc;
	float: left;
	margin: 20px;
	border-radius: 100px;
}
.sum{
	font-family: '微软雅黑';
	width: 800px;
	height: 260px;
	background-color: #ccc;
	margin: 20px;
	float:left;
}
.test-transition{
	transition:background-color 2s linear;
}
.test-transition:hover{
	background-color: red;
}
.test-transform_translate,.test-transform_scale,
.test-transform_skew,.test-transform_rotate{
	transition: transform 2s linear;
	transform-origin:left top;
}
.test-transform_translate{
	transform:translate(0);	
}
.test-transform_translate:hover{
	transform:translate(150px);
}
.test-transform_scale{
	transform:scale(1);
}
.test-transform_scale:hover{
	transform:scale(1.5);
}
.test-transform_skew{
	transform:skew(0);
}
.test-transform_skew:hover{
	transform:skew(30deg);
}
.test-transform_rotate{
	transform:rotate(0);
}
.test-transform_rotate:hover{
	transform:rotate(360deg);
}
.test-animate{
	animation:changecolor 4s linear infinite alternate;
}
@keyframes changecolor{
	0%{
		background-color: blue;
	}
	50%{
		background-color: red;
	}
	100%{
		background-color: green;
	}
}

由于是动画效果，不好演示，就不上图了，可自行copy代码到浏览器看效果