其他分享
首页 > 其他分享> > HTML5学习:第一阶段12

HTML5学习:第一阶段12

作者:互联网

一、逐帧动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            width:180px;
            height:300px;
            margin:100px auto;
            background:url(../images/bg.png) no-repeat;
            animation:dong 1s step-start infinite;
        }
        @keyframes dong{
            0%{
                background-position:0 0;
            }
            14%{
                background-position:-180px 0;
            }
            28%{
                background-position:-360px 0;
            }
            42%{
                background-position:-540px 0;
            }
            56%{
                background-position:-720px 0;
            }
            70%{
                background-position:-900px 0;
            }
            84%{
                background-position:-1080px 0;
            }
            100%{
                background-position:0 0;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

<!-- 
    animation-timing-function:
          linear 
          ease
          。。。

          step-start   从上一帧直接跳到下一帧,不会显示中间的过渡状态 
 -->

二、旋转相册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height:100%;
        }
        body{
            background:url(../images/bg2.jpg) no-repeat;
            /* 背景图的大小  水平方向  垂直方向 */
            background-size:100% 100%;
            /* 景深 */
            perspective: 2200px;
            /* 溢出隐藏 */
            overflow:hidden;
        }
        .box{
            position:fixed;
            top:0;
            bottom:0;
            left:0;
            right:0;
            margin:auto;
            width:200px;
            height:300px;
            background:url(../images/a.gif) no-repeat center center;
            /* 形成3d空间 */
            transform-style:preserve-3d;
            /* 旋转3d空间 */
            transform:rotateX(30deg) rotateY(30deg);
            /* 调用动画 */
            animation:donghua 10s linear infinite;
            
        }
        .box div{
            position:absolute;
            width:200px;
            height:300px;
            /* 设置变形原点 */
            transform-origin:center center -600px;
        }
        img{
            display:block;
            width:100%;
            height:100%;
        }
        .child1{
            transform:translateZ(600px);
        }
        .child2{
            transform:translateZ(600px) rotateY(36deg);
        }
        .child3{
            transform:translateZ(600px) rotateY(72deg);
        }
        .child4{
            transform:translateZ(600px) rotateY(108deg);
        }
        .child5{
            transform:translateZ(600px) rotateY(144deg);
        }

        .child6{
            transform:translateZ(600px) rotateY(180deg);
        }
        .child7{
            transform:translateZ(600px) rotateY(216deg);
        }
        .child8{
            transform:translateZ(600px) rotateY(252deg);
        }
        .child9{
            transform:translateZ(600px) rotateY(288deg);
        }
        .child10{
            transform:translateZ(600px) rotateY(324deg);
        }

        @keyframes donghua{
            0%{
                transform:rotateX(0) rotateY(0);
            }
            25%{
                transform:rotateX(10deg) rotateY(90deg);
            }
            50%{
                transform:rotateX(0deg) rotateY(180deg);
            }
            75%{
                transform:rotateX(-10deg) rotateY(270deg);
            }
            100%{
                transform:rotateX(0deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child1"><img src="../images/pic1.jpg" alt=""></div>
        <div class="child2"><img src="../images/pic2.png" alt=""></div>
        <div class="child3"><img src="../images/pic3.png" alt=""></div>
        <div class="child4"><img src="../images/pic4.png" alt=""></div>
        <div class="child5"><img src="../images/pic5.jpg" alt=""></div>
        <div class="child6"><img src="../images/pic6.png" alt=""></div>
        <div class="child7"><img src="../images/pic7.png" alt=""></div>
        <div class="child8"><img src="../images/pic8.png" alt=""></div>
        <div class="child9"><img src="../images/pic9.png" alt=""></div>
        <div class="child10"><img src="../images/pic10.png" alt=""></div>
    </div>
</body>
</html>

三、h5基础

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body,figure{
            margin:0;
            padding:0;
        }
        dialog{
            display:block;
        }
    </style>
</head>

<body>
    <section>我是section</section>
    <article>我是article</article>
    <aside>我是aside</aside>
    <header>我是头部</header>
    <footer>我是尾部</footer>
    <nav>我是导航</nav>
    <figure>
        <img src="../images/a.gif" alt="">
        <figcaption>我是萌萌哒</figcaption>  
    </figure>
    <main>我是主体内容</main>
    <hgroup>标题的分组</hgroup>
    <mark>我是mark</mark>
    <time>时间</time>
    <dialog>我是对话框</dialog>
    hello
</body>

</html>
<!-- 
      section元素 表示页面中的一个区块
      article元素 表示一块与上下文无关的独立的内容,偏向内容的展示
      aside元素 在article之外的,与article内容相关的辅助信息 
      header元素 表示页面中一个内容区块或整个页面的标题
      footer元素 表示页面中一个内容区块或整个页面的脚注
      nav元素 表示页面中导航链接部分
      figure元素 表示一段独立的内容,使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
      main元素 表示页面中的主要的内容


      hgroup标题的一个分组
      mark定义高亮显示的文本(span),默认有黄色的背景,是内联元素
      time时间,内联元素
      dialog标记定义一个对话框(会话框)类似微信
 -->

四、多媒体标准

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 视频 -->
    <!-- <video controls  loop poster="../images/a.gif">
        <source type="video/mp4" src="">
    </video> -->

    <!-- 音频 -->
    <audio controls loop>
        <source type="audio/mpeg" src="">
    </audio>
</body>
</html>
<!-- 
    视频:
        <video></video>:
            src:资源路径
            controls:如果设置了这个属性,那么用户就能看到播放按钮
            autoplay:自动播放
            muted :静音属性
            loop:重复播放
            poster:规定视频正在下载时显示的图像,直到用户点击播放按钮


    音频:
        <audio></audio>:
            src:资源路径
            controls:如果设置了这个属性,那么用户就能看到播放按钮
            autoplay:自动播放
            muted :静音属性
            loop:重复播放

    source标签:定义媒介资源的

        type属性:
            视频:
                video/mp4  video/ogg    video/webm
            音频:
                audio/mpeg  audio/ogg

 -->

五、h5表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="" autocomplete="off" novalidate>
        <!-- <input type="email"> -->
        <!-- <input type="url"> -->
        <!-- <input type="range"> -->
        <!-- <input type="number" min="10" max="20" step="3" name="num"> -->
        <!-- <input type="color"> -->
        <!-- <input type="time"> -->
        <!-- <input type="month"> -->
        <!-- <input type="week"> -->
        <!-- <input type="date"> -->
        <!-- <input type="text" name="phone" pattern="^1[3|5|6|7|8|9]\d{9}$"> -->
        <!-- <input type="file" multiple> -->
        <!-- <input type="url" list="datalist">
        <datalist id="datalist">
            <option value="百度"></option>
            <option value="淘宝"></option>
            <option value="京东"></option>
        </datalist>    



        <input type="submit"> -->
    </form>


    <form action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
        <input id="a" type="range" min="0" max="100">100+
        <input id="b" type="text" value="50">=
        <output name="x" for="a b"></output>
    </form>
</body>
</html>
<!-- 
    新增type类型
        Type=“email”   限制用户必须输入email类型
        Type=“url”        限制用户必须输入url类型
        Type=“range”   产生一个滑动条表单
        Type=“number”
        Type=“search”   产生一个搜索意义的表单
        Type=“color”     生成一个颜色选择的表单
        Type=“time”      限制用户必须输入时间类型
        Type=“month”        限制用户必须输入月类型
        Type=“week”        限制用户必须输入周类型
        Type=“datetime-local”        选取本地时间
        type=”date”


    新增的表单属性
        required     监测是否为空。
        min      最小
        max      最大
        step     步幅  确定一个法定值。 -3 0 3 6 9
        ***autocomplete    是否自动提示信息    属性值   on    off
        ***placeholder    文本框的提示信息
        autofocus      自动聚焦。一个页面只能由一个。
        **pattern    后面的属性值是一个正则表达式。
        novalidate     取消验证
        multiple     选择(上传)多个
        list     必须结合datalist标签,绑定datalist  id名称。

    新增表单标签
        <form action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
            <input id="a" type="range" min="0" max="100">100+
            <input id="b" type="text" value="50">=
            <output name="x" for="a b"></output>
        </form>

 -->

六、css3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!-- 
    css3属性:渐变、2d、3d、文本阴影...

    渐进增强:
        煤油灯 蜡烛  钨丝灯  白炽灯  led灯
        针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

    优雅降级:
        劳斯莱斯  奥迪  雪佛兰   五菱  公交车
        针对高版本浏览器进行构建页面,保证最佳的功能、用户体验,然后再针对低级浏览器进行效果、交互兼容
 -->

七、知识点梳理

<!-- 
    1.逐帧动画
          animation-timing-function:step-start;

    2.h5:
        语义化标签:
           section 
           main
           header
           footer
           nav
           article
           figure+figcaption
           aside

           time
           mark
           dialog
           ...

    3.多媒体标签:

       视频:
           <video controls loop autoplay muted poster="图片路径">
               <source type="" src="">
           </video>

       音频:
           <audio  controls loop autoplay muted >
               <source type="" src="">
           </audio>


    4.h5表单:
        type新增:
            email
            range
            url
            number
            date
            color
            month
            ....

        新增属性:
            required
            autocompelete="on / off"
            placeholder=""
            min
            max
            step
            pattern
            list
            ...
        
        新增的标签:
            <datalist>
                <option></option>
            </datalist> 

            output

    5.渐进增强


      优雅降级
 -->

 

标签:12,translateZ,--,transform,rotateY,HTML5,background,600px,第一阶段
来源: https://blog.csdn.net/weixin_44202489/article/details/111364809