CSS3妙用

scaleX的妙用

案例1

效果：

HTML:

<a href="javascript:;">我有下划线噢</a>

CSS:

a{
	text-decoration:none;
	position:relative;
	padding-bottom:5px;
}
a::after{
	content:'';
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:2px;
	background-color:red;
	transform:scaleX(0);
	transition:all .5s;
}
a:hover::after{
	transform:scaleX(1);
}

案例2

效果：

HTML：

<a href="#a" id="a">我有下划线噢</a>
<a href="#b" id="b">我有下划线噢</a>
<a href="#c" id="c">我有下划线噢</a>

CSS:

a{
	text-decoration:none;
	position:relative;
	padding:10px;
	border:1px solid #ccc;
}
a::after{
	content:'';
	position:absolute;
	left:10px;
	bottom:3px;
	width:calc(100% - 20px);
	height:1px;
	background-color:red;
	transform:scaleX(0);
	transition:all .5s;
}
a:target::after{
	transform:scaleX(1);
}

scaleY的妙用

案例1、配合animation制作loading

效果：

HTML：

<div id="box">
	<i></i>
	<i></i>
	<i></i>
	<i></i>
</div>

CSS:

#box{
	position:relative;
}
#box>i{
	position:absolute;
	top:0;
	width:4px;
	height:35px;
	background-color:#0bac84;
	border-radius:5px;
}
#box>i:nth-of-type(1){
	left:0px;
	animation:loading 1s ease-in .1s infinite;
}
#box>i:nth-of-type(2){
	left:8px;
	animation:loading 1s ease-in .3s infinite;
}
#box>i:nth-of-type(3){
	left:16px;
	animation:loading 1s ease-in .6s infinite;
}
#box>i:nth-of-type(4){
	left:24px;
	animation:loading 1s ease-in .3s infinite;
}
@keyframes loading{
	0%{
		transform:scaleY(1);
	}
	50%{
		transform:scaleY(0.5);
	}
	100%{
		transform:scaleY(1);
	}
}

translate的妙用

案例1、在不知道高度的情况下实现垂直居中

效果：

HTML：

<div id="box">
	translate
</div>

CSS:

#box{
	position:absolute;
	left:50%;
	top:50%;
	width:100px;
	height:100px;
	/*margin-left:-50px;
	margin-top:-50px;*/
	transform:translate(-50%,-50%);
	background-color:red;
}

我认为translate是根据元素的宽度和高度来计算的。也就是说如果写100%的话，实际上就是100px而我写了-50%就是它的一半所以和margin-left:-50px;效果是一样的。