首页 > 代码库 > 小K的H5之旅-HTML5与CSS3部分新属性浅见

小K的H5之旅-HTML5与CSS3部分新属性浅见

2024-09-09 12:33:10   217人阅读

一、HTML部分

1、HTML5新特点

     向下兼容、用户至上、化繁为简、无插件范式、访问通用性、引入语义、引入原生媒体支持、引入可编程内容

2、HTML5标签语法

     可以省略的元素：空元素语法的元素{br} ;可以省略结束标签的元素 {p,li,h}；可以全部省略标签的元素 {html,head,body}

                      >>>尽量不用！！

     具有boolean值的属性：属性名=属性值 >>> 可以只写属性名

     属性值的引号可省略：具有多个属性值的不能省

3、HTML新增结构标签（变形的具有特定语义的div）

     *section：表示页面中的内容区块，近似于div，相当于主体部分，可以取代id大块，与div相比语义上地位更加重要。

     *article：代表一块与当前页面不相关的内容

     **header：头部

     **footer：尾部

     hgroup：标题组

     *Nav：导航栏

     *aside：与文章相关的内容，栗子有微博中的“相关文章”

【结构如下图】

技术分享

 

二、CSS3部分 

1、transform定义变换

     常用变换：

     平移 translate

     缩放 scale

     定义旋转 rotate

     可同时进行多种变换，变换之间用逗号分隔

 

2、transform-origin 定义变换起点

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

     或者直接写x y轴坐标点

 

3、transition 定义过渡

     四个属性值：

         ①参与过度的属性：可以单独指定某个CSS，也可以all（全部）、none（没有）

         ②过度开始到过渡完成的时间：.3s .5s（栗子）

         ③过度的样式函数：常选择ease

         ④过渡开始前的延迟时间：一般省略

         transition属性可以同时定义多个过渡效果，用逗号分隔

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

 

4、animation 动画

step1、声明一个动画的关键帧

         @keyframes{

 

         }

     阶段写法：

     每个阶段用百分比表示，从0%到100%

     或者用from{} to{}

step2、在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>

 

 

 

 

 

 

小K的H5之旅-HTML5与CSS3部分新属性浅见


联系
我们