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

最新推荐文章于 2022-08-23 11:13:05 发布

原创最新推荐文章于 2022-08-23 11:13:05 发布 · 293 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

前端基础专栏收录该内容

7 篇文章

订阅专栏

html5新增

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

audio的使用格式

audio的参数

新增input标签
在这里插入图片描述
新增表单属性

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>

文字轮播
文字自动轮播

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

旋转木马
在这里插入图片描述

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