【前端筆記】☞ CSS 擴展

1、響應式設計

#nav ul li a {web

    /* 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標籤的寬度,應變爲行內-塊級標籤*/spa

    display: inline-block;設計

    width: 200px;orm

 

    color: white;ip

    margin: 0px 20px 10px;ci

    font-size: 30px;it

    text-align: center;io

}

 

/* 響應式設計:監聽屏幕寬度或高度的變化。*/

/* 當屏幕的寬度或高度達到某個臨界值時,就執行下面的東西 */

@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;

    }

}

2、網頁中的過渡動畫

#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);

}

相關文章
相關標籤/搜索