小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>