css（6）过渡，动画

花京院嚯

已于 2022-02-23 23:38:14 修改

阅读量868

点赞数

分类专栏：笔记文章标签： css3

于 2022-02-23 23:32:50 首次发布

本文链接：https://blog.csdn.net/m0_62520946/article/details/123056119

版权

笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

过渡（transition）

1）transition-property

2）transition-duration

3）transition-timing-function

animation-timing-function

animation-iteration-count

过渡（transition）

通过过渡可以指定一个属性发生变化时的切换方式

通过过渡可以创建一些非常好的效果，提高用户的体验

1）transition-property

指定要执行过渡的属性

如果所有属性都需要过渡，则使用all关键字，大部分属性都支持过渡效果

注意：过渡必须是从一个有效数值到另一个有效数值进行过渡

2）transition-duration

指定过渡效果的持续时间

时间单位：s ms 1s=1000ms

3）transition-timing-function

过渡的时序函数，指定过渡的执行方式

可选值	作用
ease	默认值，慢速开始，先加速，再减速
linear	匀速运动
ease-in	加速运动
ease-out	减速运动
ease-in-out	先加速，后减速
steps()	分步执行过渡效果可以设置一个第二个值 end，在时间结束时执行过渡（默认值） start，在时间开始时执行过渡

外加：cubic-bezier()来指定时序函数 https://cubic-bezier.com

4)transition-delay

过渡效果的延迟，等待一段时间再执行过渡

举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
				
			.box1{
				width: 800px;
				height: 800px;
				background-color: silver;
				overflow: hidden;
			}
				
			.box1 div{
				width: 100px;
				height: 100px;
				margin-bottom: 100px;
			}
			.box2{
				background-color: #bfa;
				/*transition: all 2s;*/
				transition-property: all;
				transition-duration: 100ms;
				transition-timing-function: linear;
				transition-delay: 2s;
			}
			.box1:hover .box2{
				width: 200px;
				height: 200px;
				
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
	</body>
</html>

效果：

动画

和过渡类似，都是可以实现一些动态的效果，不同点：动画可以自动触发动态效果

设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行的每一个步骤

animation-name

对当前元素生效的关键帧的名字

animation-duration

动画的执行时间

animation-timing-function

动画执行速度

animation-iteration-count

动画执行次数

可选值：

次数
infinate 无限执行

animation-direction

指定动画运行的方向

可选值：

normal 默认值，从from向to运行，每次都如此
reverse 从to向from运行重复执行动画时反向执行
alternate 从from 向 to 运行，重复执行时反向执行
alternate-reverse 从to向from 运行，重复执行动画时反向执行
running 默认值，动画执行
paused 动画暂停

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 800px;
				height: 800px;
				background-color: silver;
				overflow: hidden;
				
			}
			.box1 div{
				width: 100px;
				height: 100px;
				margin-bottom: 100px;
				margin-left: 0;
				
			}
			.box2{
				background-color: orange;
				/*transition-property: all;*/
				margin-left: 10px;
				animation-name: test;
				animation-duration: 2s;
				animation-iteration-count: infinite;
				animation-timing-function: ease-in-out;
				animation-direction: reverse;
				animation-play-state: running;
				animation-fill-mode: forwards;
			}
			/*.box1:hover div{
				margin-left: 700px;
				
			}*/
			@keyframes test{
				from{
					margin-left: 0;
				}
				to{
					margin-left: 700px;
				}
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
	</body>
</html>

变形

通过css来改变元素的形状或位置，变形不会影响页面的布局，transfrom用来设置元素的变形效果

平移	作用
translateX()	沿着X轴方向平移
translateY()	沿着Y轴方向平移
translateZ()	沿着Z轴方向平移
平移元素，百分比是相对于自身计算的

举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		body{
			background-color: silver;
		}
			.box1{
				width: 200px;
				height: 200px;
				background-color: #BBFFAA;
				margin: 0 auto;
				margin-top: 200px;
				
				transform: translateX(50%);
			}
			/*.box2{
				background-color: orange;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}*/
			.box3,.box4{
				width: 220px;
				height: 300px;
				background-color: white;
				float: left;
				margin: 0 10px;
				transition: all .3s;
			}
			.box4:hover,.box3:hover{
				transform: translateY(-4px);
				box-shadow: 0 0 10px rgba(0,0,0,.3);
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
		
	</body>
</html>

效果：

Z轴平移

调整元素在Z轴的位置，正常情况下就是调整元素和人眼之间的距离

Z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，若需要看见效果，必须要设置网页的视距

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html{
				perspective: 800px;
				
			}
			body{
				border:1px red solid;
				background-color: rgb(241,241,241);
				
			}
			.box1{
				width: 200px;
				height: 200px;
				background-color: #bfa;
				margin: 200px auto;
				transition: 2s;
				
			}
			body:hover .box1{
				transform: translateZ(300px);
			}
		</style>
	</head>
	<body>
		<div class="box1">
			
		</div>
	</body>
</html>

效果：

旋转

通过旋转可以使元素沿着X，Y或Z轴旋转指定的角度

rotateX()
rotateY()
rotateZ()

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
				
			html{
				perspective: 800px;
				
			}
			body{
				border: 1px red solid;
				background-color: rgb(241,241,241);
				
			}
			
			.box1{
				width: 200px;
				height: 200px;
				background-color: #BBFFAA;
				margin: 200px auto;
				transition: 2s;
				
				
			}
			body:hover .box1{
				/*transform:rotateX(45deg);*/
				/*transform: rotateY(180deg) translateZ(400px);*/
				transform: translateZ(400px) rotateY(180deg);
				
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
	</body>
</html>

效果：

花京院嚯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css（6）过渡，动画

过渡（transition）通过过渡可以指定一个属性发生变化时的切换方式通过过渡可以创建一些非常好的效果，提高用户的体验1）transition-property指定要执行过渡的属性如果所有属性都需要过渡，则使用all关键字，大部分属性都支持过渡效果注意：过渡必须是从一个有效数值到另一个有效数值进行过渡2）transition-duration指定过渡效果的持续时间时间单位：s ms 1s=1000ms3）transition-timing-function过渡的
复制链接

扫一扫