欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-18 19:15:51
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的参数
html5新增、css3动画、导航条、文字轮播和旋转木马
新增input标签
html5新增、css3动画、导航条、文字轮播和旋转木马
新增表单属性
html5新增、css3动画、导航条、文字轮播和旋转木马

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

相关标签: css html