html5新增、css3动画、导航条、文字轮播和旋转木马

程序员文章站 2021-12-07 10:08:49

html5新增1新增header — 头部标签nav — 导航标签article — 内容标签section — 块级标签aside — 侧边栏标签footer — 尾部标签音频 – audio视频 – videoaudio的使用格式audio的参数新增input标签新增表单属性css3动画导航条

html5新增

1新增
header — 头部标签
nav — 导航标签
article — 内容标签
section — 块级标签
aside — 侧边栏标签
footer — 尾部标签
音频 – audio
视频 – video

audio的使用格式
html5新增、css3动画、导航条、文字轮播和旋转木马
audio的参数

新增input标签

新增表单属性

css3动画

html5新增、css3动画、导航条、文字轮播和旋转木马

导航条
html5新增、css3动画、导航条、文字轮播和旋转木马

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .fight {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            
        }
        .box {
            position: absolute;
            width: 20px;
            height: 3px;
            border: 1px solid red;
            bottom: 0px;

        }
        .child {
            width: 5px;
            height: 3px;
            background-color: red;
        }
        .box:hover {
            animation: moves 1s ;
        }
        .box:hover .child {
            height: 100%;
            animation: mouse 1s ;
        }
        @keyframes moves {
            0% {
                height: 3px;
            }
            100% {
                height: 5px;
            }
        }
        @keyframes mouse {
            0% {
                width: 5px;
            }
            100% {
                width: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="fight">
        <div class="box">
            <div class="child"></div>
        </div>
    </div>
</body>
</html>

文字轮播
html5新增、css3动画、导航条、文字轮播和旋转木马

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字滚动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
       .box {
           height: 100px;
           min-width: 1500px;
           background-color: red;
           margin: 100px auto;
           overflow: hidden;
       }
       .child {
           text-align: center;
           position: relative;
           width: 200%;
           animation: move 15s linear infinite;
       }
       p {
           font-size: 20px;
           color: wheat;
           position: absolute;
           top: 0;
           width: 50%;
       }
       p:first-child {
           left: 10%;
       }
       p:last-child {
           left: 60%;
       }
       @keyframes move {
           0% {
               transform: translateX(0);
           }
           100% {
               transform: translateX(-50%);
           }
       }
    </style>
</head>
<body>
    <div class="box">
       <div class="child">
        <p>
            csdn服务于应用型学习院校,致力于打造优质教育服务平台,依托互联网构建高品质学习社区。csdn目前面向社会开放单招培训课程,趣味编程,编程基础等基础性课程。
        </p>
        <p>
            csdn服务于应用型学习院校,致力于打造优质教育服务平台,依托互联网构建高品质学习社区。csdn目前面向社会开放单招培训课程,趣味编程,编程基础等基础性课程。

        </p>
       </div>
    </div>
</body>
</html>

旋转木马
html5新增、css3动画、导航条、文字轮播和旋转木马

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转木马</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            perspective: 1200px;
        }
        .box {
            position: relative;
            width: 360px;
            height: 480px;
            /* background-color: red; */
            margin: 300px auto;
            animation: rotate 10s linear infinite;
            transform-style: preserve-3d;
        }
        .box div {
            position: absolute;
            left: 0;
            top: 0;
            width: 360px;
            height: 480px;
            /* border: 1px solid red; */
            background-size: contain;
        }
        .box div:nth-child(1) {
            background-image: url(./imgs/1.jpg);
            z-index: 6;
            transform: rotateY(0) translateZ(350px);
        }
        .box div:nth-child(2) {
            background-image: url(./imgs/2.jpg);
            z-index: 5;
            transform: rotateY(60deg) translateZ(350px);
        }
        .box div:nth-child(3) {
            background-image: url(./imgs/3.jpg);
            z-index: 4;
            transform: rotateY(120deg) translateZ(350px);
        }
        .box div:nth-child(4) {
            background-image: url(./imgs/4.jpg);
            z-index: 3;
            transform: rotateY(180deg) translateZ(350px);
        }
        .box div:nth-child(5) {
            background-image: url(./imgs/5.jpg);
            z-index: 2;
            transform: rotateY(240deg) translateZ(350px);
        }
        .box div:nth-child(6) {
            background-image: url(./imgs/6.jpg);
            transform: rotateY(300deg) translateZ(350px);
            z-index: 1;
        }
        @keyframes rotate {
            0% {
                transform: rotateY(0);
            }

            100% {
                transform: rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

本文地址：https://blog.csdn.net/fackyoufack/article/details/112281573