html5和css3提高

已于 2022-05-07 14:07:02 修改
阅读量175 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： web开发 文章标签： html5
于 2022-05-05 00:25:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43716830/article/details/124578879

文章目录

html5新增语义标签

在这里插入图片描述

vedio视频标签

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

audio音频标签

在这里插入图片描述
在这里插入图片描述

html5新增的input表单

在这里插入图片描述

在这里插入图片描述

CSS3属性选择器

在这里插入图片描述
类选择器和属性选择器 伪类选择器 权重都是10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[value]{
            color: pink;
        }
        input[type="text"]{
            color: pink;
        }
        div[class^="icon"]{
            color: pink;
        }
        div[class$="data"]{
            color: pink;
        }
        div[class*="icon"]{
            color: pink;
        }
    </style>
</head>
<body>
    <input type="text" value="zyj">
    <input type="text">
    <input type="password" name="" id="">
    <div class="icon1">1</div>
    <div class="icon2">2</div>
    <div class="icon3">3</div>
    <div class="icon4">4</div>
    <div class="icon5">5</div>
    <div class="icon-data"></div>
    <div class="icon-value"></div>
    <div class="ic-icon-data"></div>
</body>
</html>

css3结构伪类选择器

在这里插入图片描述
在这里插入图片描述

css3伪元素选择器

在这里插入图片描述
标签和伪元素选择器权重为1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height: 200px;
            background-color: pink;
        }
        /*before生成的盒子是行内元素*/
        div::before{
            content: "我";
        }
        div::after{
            content: "zyj";
        }
    </style>
</head>
<body>
        <div>
            是
        </div>
</body>
</html>

在这里插入图片描述

盒子模型

在这里插入图片描述

滤镜filter

在这里插入图片描述

计算盒子宽度calc函数

在这里插入图片描述

.son{
	width:calc(100%-30px);/*比父亲小30px*/
	height:30px;
	background-color:skyblue;
}

过渡

在这里插入图片描述
在这里插入图片描述

2D转换：translate

在这里插入图片描述

2D转换：rotate

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            overflow: hidden;
            width: 100px;
            height: 100px;
            background-color: white;
            border: 1px solid black;
            margin: 100px auto;
        }
        div::before{
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            background-color: red;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 1s;
        }
        div:hover::before{
            transform: rotate(0deg);
        }
    </style>
</head>
<body>
    <div>

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

缩放：scale

在这里插入图片描述

2D综合写法

在这里插入图片描述

动画

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

实现北极熊奔跑动画

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #ccc;
        }
        .bear{
            position: absolute;
            width: 200px;
            bottom: 10px;
            height: 100px;
            background:url(resourse/xiong.png) no-repeat;
            /* 我们元素可以添加多个动画，用逗号分隔 */
            animation: bear 1s steps(8) infinite,move 3s forwards;
            z-index: 1;
        }
        .bg1{
            position: absolute;
            bottom: 0px;
            height: 300px;
            width: 100%;
            background: url(resourse/bg.png) repeat-x;
            animation: bg_change 5s linear infinite;
        }
        .bg2{
            position: absolute;
            bottom: 0px;
            height: 300px;
            width: 100%;
            background: url(resourse/bg2.png) repeat-x;
            animation: bg_change 5s linear infinite;
        }
        @keyframes bear {
            0%{
                background-position: 0 0;
            }
            100%{
                background-position: -1600px 0;
            }
        }
        @keyframes move{
            0%{
                left: 0;
            }
            100%{
                left:50%;
                transform: translateX(-50%);
            }
        }
        @keyframes bg_change {
            0%{
                background-position: 0 0;
            }
            100%{
                background-position: -3840px 0;
            }
        }
    </style>
</head>
<body>
    <div class="bear"></div>
    <div class="bg1"></div>
    <div class="bg2"></div>
</body>
</html>

3D

在这里插入图片描述

3D移动

在这里插入图片描述

在这里插入图片描述

3D旋转

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

双面盒子案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .body{
            perspective: 350px;
        }
        .box{
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all .6s;
            transform-style:preserve-3d ;
        }
        .box:hover{
            transform: rotateY(180deg);
        }
        .box .front,.back{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            font-size: 30px;
            color: #fff;
            text-align: center;
            line-height: 300px;
        }
        .front{
            background-color: pink;
            z-index: 1;
        }
        .back{
            background-color: purple;
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="front">zyj</div>
        <div class="back">come on!</div>
    </div>
</body>
</html>

旋转导航栏案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            margin: 100px;
        }
        ul li{
            width: 120px;
            height: 35px;
            list-style: none;
            perspective: 500px;
        }
        .box{
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all .4s;
        }
        .box:hover{
            transform: rotateX(90deg);
        }
        .front,.bottom{
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
        .front{
            background-color:pink;
            z-index: 1;
            transform: translateZ(17.5px);
        }
        .bottom{
            background-color: purple;
            /* 这个x轴一定是负值 */
            transform: translateY(17.5px) rotateX(-90deg);
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <div class="box">
                <div class="front"></div>
                <div class="bottom"></div>
            </div>
        </li>
    </ul>
</body>
</html>

木马轮播图


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            perspective: 1000px;
        }
        section{
            position: relative;
            width: 300px;
            height: 200px;
            margin: 150px auto;
            transform-style: preserve-3d;
            /* 添加动画效果 */
            animation: rotate 10s linear infinite;
        }
        section:hover{
            /* 鼠标放上停止动画 */
            animation-play-state: paused;
        }
        @keyframes rotate {
            0%{
                transform: rotateY(0);
            }
            100%{
                transform: rotateY(360deg);
            }
        }
        section div{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(resourse/background.jpg) no-repeat center;
        }
        section div:nth-child(1){
            transform: translateZ(300px);
        }
        section div:nth-child(2){
            transform: rotateY(60deg) translateZ(300px);
        }
        section div:nth-child(3){
            transform: rotateY(120deg) translateZ(300px);
        }
        section div:nth-child(4){
            transform: rotateY(180deg) translateZ(300px);
        }
        section div:nth-child(5){
            transform: rotateY(240deg) translateZ(300px);
        }
        section div:nth-child(6){
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值