前端小考点--(1)

最新推荐文章于 2024-05-08 02:34:15 发布

Huijie Xu

最新推荐文章于 2024-05-08 02:34:15 发布

阅读量142

点赞数

分类专栏：前端开发基础概念

本文链接：https://blog.csdn.net/Xu_cipu/article/details/100715783

版权

前端开发基础概念专栏收录该内容

21 篇文章 0 订阅

订阅专栏

CSS
transition
是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性
transition-property：要修改的属性值，如height，width等
transition-duration：以秒或毫秒为单位指定过渡动画所需的时间，默认为0，即不出现过渡效果，如2s，200ms等
transition-timing-function：定义过渡效果的速度随着时间怎么变化，如ease-in表示以慢速开始过渡，ease-out表示以慢速结束的过渡
transition-delay：定义在过渡开始之前需要延迟等待的时间，以秒(s)或毫秒(ms)为单位
小例子：正方形变圆形，border-radius配合 :hover伪类实现（完整html）

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div class="transfer"></div>
<style type="text/css">
	.transfer {
		height: 100px;
		width: 100px;
		border-radius: 0;
		transition: border-radius 2s;
		background: black;
	}
	.transfer:hover {
		border-radius: 50px;
	}
</style>
</body>
</html>

transform
用来旋转，缩放，倾斜或平移任何块级元素

rotate(angle) 定义元素2D旋转角度
translate(x,y) 定义元素在x、y方向上平移的距离
scale(x,y) 定义元素在2D x、y方向上缩放的大小
几个变形的简单完整html例子：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div id="rotate">Rotate</div>
<div id="tranlatewrapper">
	<div id="translate">Translate</div>
</div>
<div id="scale">Scale</div>

</body>
<style type="text/css">
	div {
		width: 100px;
		height: 100px;
		background: blue;
		color: white;
	}
	#rotate {
		transform: rotate(20deg); /*元素顺时针旋转20度*/
	}
	#tranlatewrapper {
		border: 2px solid;
		border-color: red;
		border-right: 0;
		border-bottom:0; 
		background:white;
	}
	#translate {
		transform: translate(20px,20px); /*元素相对于初始位置延x，y方向分别移动20px的距离*/
	}
	#scale {
		margin-top: 30px;
		transform: scale(1.1,1.1); /*元素在x和y方向分别扩大为原来的1.1倍*/
	}
</style>
</html>