CSS3-7.1-CSS3的过渡与交换_css 三个div 轮流替换-优快云博客

本文链接：https://blog.youkuaiyun.com/QWH_PYTHON/article/details/100917201

CSS3-7.1-CSS3的过渡与交换

一：transition：过渡属性
二：transform：变换属性
- 1、transform
- 2、transform-origin

一：transition：过渡属性

CSS的transition允许CSS的属性值在一定时间区内平滑的过渡
鼠标点击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值
属性值顺序
- transition-property：参与过渡的属性
  - 可以单独指定某个CSS属性
  - all/none
- transition-duration：过渡开始到过渡完成的时间
  - 默认值是0，意味着不会有效果
  - 以秒或毫秒为单位
- transition-timing-function：过渡的样式属性
  - ease：默认值，逐渐变慢
  - linear：匀速
  - ease-in：加速
  - ease-out：减速
  - ease-in-out：加速然后减速
- transition-delay：过渡开始前的延迟时间
  - 默认值是0，可以忽略
  - 以秒或毫秒为单位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS过渡属性</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 20px;
			background-color: blue;
			/* 
				宽度属性过渡效果
				过渡时长2s,延时0.2s开始执行
				linear匀速过渡 
			*/
			transition: width 2s linear 0.2s;
			/* 兼容Firefox浏览器 */
			-moz-transition: width 2s linear 0.2s;
			/* 兼容Safair浏览器 */
			-webkit-transition: width 2s linear 0.2s;
		}
		div:hover{
			width: 400px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

效果动态图
在这里插入图片描述

二：transform：变换属性

通过使用变换属性可以对元素进行旋转、拉伸、翻转缩放等操作
变换属性分为2D变换与3D变换
通常与过渡属性搭配使用

变换属性
1.transform：定义元素向2D或3D变换
2.transform-origin：改变转换元素的位置

1、transform

定义元素向2D或3D变换
属性值
- none：元素不进行变化
- translate(x,y)：定义2D平移变换
- translate3d(x,y，z)：定义3D变换
- translateX(x)：定义沿X轴平移变换，Y轴与Z轴同理
- scale(x,y)：定义2D缩放变换
- scale3d(x,y,z)：定义3D缩放变换
- scaleX(x)：定义设置X轴的值进行缩放，Y轴与Z轴同理
- rotate(angle)：定义2D旋转，角度值后需跟角度单位deg
- skew(x-angle,y-angle)：定义沿着X轴和Y轴的2D倾斜转换

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>变换属性</title>
	<style type="text/css">
		div{
			width: 80px;
			height: 80px;
			/* 
				过渡时长1s,延时0s开始执行
				linear匀速过渡 
			*/
			transition: all 1s linear 0s;
		}
		.div1{
			background-color: red;
		}
		.div2{
			background-color: green;
		}
		.div3{
			background-color: blue;
		}
		.div4{
			background-color: pink;
		}
		/* 定义2D平移变换 */
		.div1:hover{
			transform: translate(20px,20px);
		}
		/* 定义2D等比缩放 */
		.div2:hover{
			transform: scale(2);
		}
		/* 定义沿着X轴和Y轴的2D倾斜转换 */
		.div3:hover{
			transform: skew(20deg,20deg);
		}

		.div4:hover{
			transform: rotate(360deg);
		}
	</style>
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>
	<div class="div4"></div>
</body>
</html>

效果动态图
在这里插入图片描述

2、transform-origin

设置旋转元素的基点位置
- 起始地址是左上角
2D转换元素可以改变元素的X轴和Y轴
3D转换元素还可以更改元素的Z轴
属性值
- x-axis
  - left、right、center
  - **px
  - 百分比
- y-axis
  - left、right、center
  - **px
  - 百分比
- z-axis
  - **px

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>基点位置</title>
	<style type="text/css">
		.div1{
			width: 80px;
			height: 80px;
			background-color: blue;
			/* 
				过渡时长1s,延时0s开始执行
				linear匀速过渡 
			*/
			transition: all 1s linear 0s;
			/* 基点是元素的右下角 */
			transform-origin: 100% 100%;
		}
		/* 定义2D旋转360deg */
		.div1:hover{
			transform: rotate(360deg);
		}
	</style>
</head>
<body>
	<div class="div1"></div>
</body>
</html>