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