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;效果是一样的。