CSS3练习笔记-汉克狗

待记忆点：

1.transform

　　a: 关于transfrom:translate(-50%, -50%)实现水平居中

　　translate()函数是CSS3的新特性，在不知道自身宽高的情况下，可以利用它来进行水平垂直居中。

　　当使用：top：50%； left：50%，因为是左上角的圆点，所以并不会处于中心位置。

　　translate(-50%,-50%)这时候就能将目标在X,Y轴上移动自身，以至处于中心位置。

　　与margin-left和margin-top实现居中不同的是，margin-left必须知道自身宽高（margin  %：规定基于父元素的宽度的百分比的外边距。），

　　而translate可以在不知道宽高的情况下进行居中，translate（）函数中的百分比是相对于自身宽高的百分比，所以能进行居中。

.content {
    padding:10px;
    background:green;
    color:#fff;
    position:absolute;
    top:50%;
    left:50%;
    border-radius: 5px;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

*（参考叶子玉：https://www.cnblogs.com/knuzy/p/9993181.html）

2.animation