编写网站导航有感

编写网站导航有感(纯CSS)

父元素块

响应式的导航列表

line-height:20px;//撑开原理完成高度设置
padding:0 10px;//同样的撑开原理完成宽度设置
text-align:center;//比例美观

子元素块

响应式的高度动画

.father:hover .child{
    max-height:100px;
}
.child{
    max-height:0;
    overflow:hidden;
    transition:all 1s;/*简写动画*/
    /*复杂方法（兼容性良好）*/
    transition-timing-function:cubic-
bezier(0.2.0.5,0.2,1);
    transition-duration:800ms;
    transform:translate(0px,0px) translateZ(0px);
}