小K的H5之旅-HTML5與CSS3部分新屬性淺見

時間 2019-11-25

標籤 h5 之旅 html5 html css3 css 部分屬性淺見欄目 HTML5 简体版

原文原文鏈接

1、HTML部分

一、HTML5新特色

向下兼容、用戶至上、化繁爲簡、無插件範式、訪問通用性、引入語義、引入原生媒體支持、引入可編程內容css

二、HTML5標籤語法

能夠省略的元素：空元素語法的元素{br} ;能夠省略結束標籤的元素 {p,li,h}；能夠所有省略標籤的元素 {html,head,body}html

>>>儘可能不用！！web

具備boolean值的屬性：屬性名=屬性值 >>> 能夠只寫屬性名編程

屬性值的引號可省略：具備多個屬性值的不能省ide

三、HTML新增結構標籤（變形的具備特定語義的div）

*section：表示頁面中的內容區塊，近似於div，至關於主體部分，能夠取代id大塊，與div相比語義上地位更加劇要。函數

*article：表明一塊與當前頁面不相關的內容動畫

**header：頭部url

**footer：尾部spa

hgroup：標題組插件

*Nav：導航欄

*aside：與文章相關的內容，栗子有微博中的「相關文章」

【結構以下圖】

2、CSS3部分

一、transform定義變換

經常使用變換：

平移 translate

縮放 scale

定義旋轉 rotate

可同時進行多種變換，變換之間用逗號分隔

二、transform-origin 定義變換起點

可選值：left/center/right top/center/bottom

或者直接寫x y軸座標點

三、transition 定義過渡

四個屬性值：

①參與過分的屬性：能夠單獨指定某個CSS，也能夠all（所有）、none（沒有）

②過分開始到過渡完成的時間：.3s .5s（栗子）

③過分的樣式函數：常選擇ease

④過渡開始前的延遲時間：通常省略

transition屬性能夠同時定義多個過渡效果，用逗號分隔

（栗子）transition: color .3s ease,border .5s ease;

四、animation 動畫

step一、聲明一個動畫的關鍵幀

@keyframes{

}

階段寫法：

每一個階段用百分比表示，從0%到100%

或者用from{} to{}

step二、在CSS選擇器中使用animation動畫屬性，調用聲明好的關鍵幀（通常採起縮寫形式，寫法順序以下圖）

下面是一個K作的一個小小的animation，代碼以下（由於搞了半天視頻上傳沒弄上去，就先這樣了，之後K搞明白了必定會再上傳效果視頻滴~）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>炸飛機！！</title>
        <style type="text/css">
            body{
                /*background-color: #000000;*/
                background-image: url(img/QQ圖片20170316141436.png);
                background-repeat: no-repeat;
                background-size: cover;
            }
            .div{
                width: 100px;
                height: 100px;
                border-radius: 50px;
                /*background-color: #1E90FF;*/
                -webkit-animation: colorback 5s ease infinite alternate forwards; 
                
            }
            @-webkit-keyframes colorback{
                    0% {background-color: #000000;}
                    10% {background-color: #111111;}
                    20% {background-color: #222222;}
                    30% {background-color: #333333;}
                    40% {background-color: #444444;}
                    50% {background-color: #555555;}
                    60% {background-color: #666666;}
                    70% {background-color: #777777;}
                    80% {background-color: #888888;}
                    90% {background-color: #999999;}
                    100% {background-color: #AAAAAA;}
                }
                .picture{
                    width: 90px;
                    height: 30px;
                    position: fixed;
                    top: 110px;
                    left: 110px;
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-image: url(img/QQ20170316110112.jpg);
                    -webkit-animation: fly 3s 0s linear;
                }
                @-webkit-keyframes fly{
                    0% {
                        top: 110px;
                        left: 110px;
                    }
                    100% {
                        top: 120px;
                        left: 50%;
                    }
                }
                
                .lighter{
                    display: block;
                    position: fixed;
                    bottom: 0;
                    left: 50%;
                    -webkit-animation: lighter 2s linear normal;
                    width: 50px;
                    height: 150px;
                }
                @-webkit-keyframes lighter{
                    0% 
                    { transform: scale(1);
                    bottom: 0;
                    }
                    50% 
                    { transform: scale(0.5);
                    bottom: 30%;}
                    100% 
                    { transform: scale(0);
                    bottom: 60%;}
                }
                .light{
                    display: block;
                    position: fixed;
                    bottom: 60%;
                    left: 30%;
                    -webkit-animation: light  1s 2s linear normal;
                    transform: scale(0);
                }
                @-webkit-keyframes light{
                    0% 
                    { transform: scale(0);
                    }
                    100% 
                    { transform: scale(0.6);
                }
        </style>
    </head>
    <body>
        <div class="div"></div>
        <div class="picture"></div>
        <img src="img/QQ圖片20170316141417.png" class="lighter"/>
        <img src="img/QQ圖片20170316141427.png" class="light" />
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。