当前位置: 萬仟网 > IT编程>网页制作>Html5 > html5新增、css3动画、导航条、文字轮播和旋转木马

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

2021年01月06日  | 萬仟网IT编程  | 我要评论
html5新增1新增header — 头部标签nav — 导航标签article — 内容标签section — 块级标签aside — 侧边栏标签footer — 尾部标签音频 – audio视频 – videoaudio的使用格式audio的参数新增input标签新增表单属性css3动画导航条<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8

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>

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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

  • HTML5打造简易播放器:Chrome运行.mp3

    HTML5打造简易播放器:Chrome运行.mp3

    如今html已经是比较热门的了,各种关于html5的应用程序、游戏、应用商店等也如火如荼的展开了。各大主流也纷纷开始支持html5标准,以备打赢新的一轮浏览器... [阅读全文]
  • Canvas 文本转粒子效果的实现代码

    Canvas 文本转粒子效果的实现代码

    这篇文章主要介绍了Canvas 文本转粒子效果的实现代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧... 19-02... [阅读全文]
  • HTML5 Canvas阴影使用方法实例演示

    HTML5 Canvas阴影使用方法实例演示

    HTML5 Canvas中提供了设置阴影的四个属性值可以实现阴影文字、3D拉影效果、边缘模糊效果文字,具体的演示代码如下,想学习的朋友可以参考下... 13-0... [阅读全文]
  • CSS3实现的几个小loading效果

    昨晚上闲的没事突然想做几个小loading效果,下面是昨晚上做的几个小案例,分享给大家 1.水波loading:这个loading是我觉得非常简单,... [阅读全文]
  • html5应用缓存_动力节点Java学院整理

    html5应用缓存_动力节点Java学院整理

    HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用... ... [阅读全文]
  • 3种水平垂直的方式

    3种水平垂直的方式

    1 绝对定位 + 转换 2 弹性模型 3 单元格方式 ... [阅读全文]
  • 在显存显示字符串(调用子程序实现)

    [html]   assume cs:codesg,ds:datasg      datasg... [阅读全文]
  • H5+混合移动app应用开发——坑我太甚

    H5+混合移动app应用开发——坑我太甚

    用了MUI之后,才发现,那坑比我想象之中的要多得多,有些是H5的坑,有些是plus的坑,接下来我一一来吐槽一番。 IOS下面,上拉的时候,速度稍微快... [阅读全文]
  • canvas像素画板的实现代码

    canvas像素画板的实现代码

    本文实现一个类似像素风格的画板,可以像素小格子可以擦除,框选变色,可以擦出各种图形,非常具有实用价值,需要的朋友可以参考下... 18-11-21 [阅读全文]
  • ES6转ES5

    ES6转ES5

    本人近期接到一个天大的“好消息”:zxbc项目某些客户为保险业等种种原因要支持IE…… 2013年,ES6草案冻结,2015年6月,ES6正式通过,... [阅读全文]
验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com