【前端笔记】☞ CSS 扩展

一、响应式设计

#nav ul li a {

    /* background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;" lang="en-US"> #5385ff; */

    /*float: left;*/

    /*a标签是行内标签，在一行可显示多个标签，其宽度等于内容的大小。要想固定a标签的宽度，应变为行内-块级标签*/

    display: inline-block;

    width: 200px;

    color: white;

    margin: 0px 20px 10px;

    font-size: 30px;

    text-align: center;

}

/* 响应式设计：监听屏幕宽度或高度的变化。*/

/* 当屏幕的宽度或高度达到某个临界值时，就执行下面的东西 */

@media screen and (max-width: 1210px) {

    /*改变a标签的宽度和字体大小*/

    #nav ul li a {

        width: 160px;

        font-size: 25px;

    }

}

@media screen and (max-width: 1010px) {

    /*改变a标签的宽度和字体大小*/

    #nav ul li a {

        width: 120px;

        font-size: 20px;

    }

}

@media screen and (max-width: 810px) {

    /*改变a标签的宽度和字体大小*/

    #nav ul li a {

        width: 80px;

        font-size: 15px;

    }

}

二、网页中的过渡动画

#footer .dock ul li {

    display: inline-block;

    margin: 0px 5px;

    /* 设置动画过渡的时长和效果（有线性、非线性） */

    -webkit-transition: 0.2s linear;

}

#footer .dock ul li a img {

    width: 50px;

    height: 50px;

}

/* 过渡形变动画 */

#footer .dock ul li:hover {

    /* 参照点（以坐标点的位置为参照点来进行形变：底部中心） */

    -webkit-transform-origin: bottomcenter;

    /* 设置形变（如：移动、放大、缩小等） */

    -webkit-transform: scale(1.6);

}