20-html和css提高

小林同学不吃肥肉

已于 2023-10-20 18:02:24 修改

阅读量29

点赞数

文章标签： html css 前端

于 2023-10-11 15:03:12 首次发布

本文链接：https://blog.csdn.net/weixin_59865114/article/details/133215898

版权

本文介绍了HTML5的新增标签，如语义化标签、多媒体标签和input类型的变化，以及CSS3中的新功能，如属性选择器、伪类选择器、伪元素和过渡效果的使用，还涵盖了2D转换、3D变换和动画案例，如旋转木马和盒子翻转。

摘要由CSDN通过智能技术生成

1.HTML5提高

1.1HTML5新增的标签

1.1.1语义化标签

在这里插入图片描述

1.1.2 多媒体标签

在这里插入图片描述

1.1.3 input类型

在这里插入图片描述

1.1.4 新增的表单属性

在这里插入图片描述

2.CSS新增标签

2.1属性选择器

例如： [data-name=“brand”]

在这里插入图片描述

注意：类选择器、属性选择器、伪类选择器的权重为10**

2.2结构类伪类选择器

用法：

        ul li:first-child {
            background-color: pink;
        }

由此选择器筛选出符合条件的子元素
在这里插入图片描述

2.2.1 nth-child(n)

在这里插入图片描述

2.2.2 nth-of-type

在这里插入图片描述

2.2.3区别

在这里插入图片描述

2.3 伪元素选择器 ★

利用CSS创建新标签元素，不再需要HTML标签，从而简化html的结构
在这里插入图片描述

因为before和after都是行内元素，所以用dispaly转换才能设置宽高

用法：

<style>
	.tudou{
	       width: 448px;
           height: 252px;
           background-color: pink;
	}
	.tudou::before {
			dispaly: block;
			width: 200px;
            height: 252px;
			background-color: blue;
	}
</style>
<body>
	<div class="tudou"></div>
</body>

效果：在这里插入图片描述

2.3.1应用

①设置土豆遮罩层

当鼠标经过土豆大盒子时，让before遮罩层显示

.tudou:hover::before{ } //一定不要有空格

        .tudou {
            position: relative;
            width: 448px;
            height: 252px;
            background-color: pink;
        }
        .tudou::before {
            position: absolute;  //鼠标放上去才显示遮罩层，所以不占位置
            content: '';
            display: none;  //隐藏
            width: 100%;
            height: 100%;
            background: url(images/sousuo.png) no-repeat center rgba(0, 0, 0, .3);
        }

        .tudou:hover::before {
            display: block;  //显示
        }

<body>
    <div class="tudou">
        <img src="images/tudou.jpg">
    </div>
</body>

效果：

2.4 CSS盒子模型

在这里插入图片描述

这样就规定为盒子的大小就是宽度，不用再考虑margin和padding会挤开盒子了

2.5 CSS过渡 ★

在这里插入图片描述

给谁做过渡，就给谁添加

2.5.1.应用

切换效果

原理：父盒子box是50px50px，子盒子tudou是100px50px，当鼠标放到父盒子box上时，子盒子通过绝对定位，向左移动一个图标的距离

        .tudou {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 50px;
            background-color: aqua;
            transition: all .5s;
        }

        .tudou img {
            float: left;
            width: 50px;
            height: 50px;
        }

        .box:hover .tudou {
            left: -50px    //子盒子tudou往左移动一半，即一个图标的距离
        }

———————————————————————

3.css

3.1 2D转换

transform：xxx

3.1.1 移动 translate

不会影响其他元素的位置
对于行内元素无效

在这里插入图片描述
应用★：

% ，transform:translate(-50%,-50%) //盒子往上走自己高度的一半

3.1.2 旋转 rotate ★

要跟单位deg

在这里插入图片描述

3.1.3 旋转中心点 transform-origin

3.1.4 缩放 scale

transform:scal(2,2)   //宽高放大两倍
transform:scal(2)     //也是宽高放大两倍
transform:scal(0.5，0.5) //宽高缩小一半

在这里插入图片描述

3.2综合写法

在这里插入图片描述

3.3动画的基本使用

在这里插入图片描述

from ，to等价于0%，100%

3.4 动画常用属性

匀速变化,animation-timing-function:linear

3.5热点图案例

        .ding {
            position: relative;
            width: 1210px;
            height: 766px;
            background: url(re.png) no-repeat;
        }

        .box {
            position: absolute;
            left: 789px;
            top: 307px;
            width: 10px;
            height: 10px;
            background-color: aqua;
            border-radius: 50%;
        }

        .box div[class^="bowen"] {
            position: absolute;
            让bowen盒子在父盒子里水平垂直，放大之后向四周发散
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            box-shadow: 0 0 12px aqua;
            border-radius: 50%;
            animation: bowen 1.2s infinite;
        }
        .bowen2 {
            animation-delay: 0.4s !important;
        }

        .bowen3 {
            animation-delay: 0.4s !important;
        }

在这里插入图片描述

3.6小熊动画

小熊动画

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: aqua;
        }

        .box {
            position: absolute;
            width: 200px;
            height: 100px;
            top: 250px;
            left: 10px;
            z-index: 1;
            background: url(media/bear.png) no-repeat;
            animation: bear 0.4s steps(8) infinite, move 4s forwards;
            /* animation-fill-mode: ; */

        }


        .bg {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 3840px;
            height: 336px;
            background: url(media/bg1.png);
            animation: bg_move 10s infinite linear;
            /* animation-timing-function: ; */
        }

        @keyframes bear {
            0% {}

            100% {
                background-position: -1600px 0;
            }
        }

        /* 让显示小熊的盒子移动 */
        @keyframes move {
            0% {
                left: 0;
            }

            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }

        @keyframes bg_move {
            100% {
                background-position: 3840px 0;
            }
        }
    </style>
</head>

<body>
    <div class="box">
    </div>
    <div class="bg"></div>
</body>

3.2 3D

3.2.1 旋转 rotate

在这里插入图片描述

3.2.2 立体环境 transform-style:preserve-3d

.csdnimg.cn/2235d0b629d44fd7a6bacccdb4edc34c.png)

3.2.3盒子翻转实例

三个盒子。1个盒子做翻转，包含的两个盒子做画面

盒子翻转

    <style>
        .box {
            position: relative;
            left: 300px;
            top: 100px;
            width: 300px;
            height: 300px;
            /*给谁做过渡就给谁加*/
            transition: all 0.5s;
            /* 给子盒子开启三维立体环境 */
            transform-style: preserve-3d;
            border-radius: 50%;
            text-align: center;
            line-height: 300px;
            font-size: 30px;
        }

        .box:hover {
            transform: rotateY(180deg);
        }

        .qian,
        .hou {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

        .qian {
            background-color: pink;
            z-index: 1;
        }

        .hou {
            background-color: blue;
            /* 为了实现翻转，先让后面的盒子翻转180°，等鼠标经过时再恢复 */
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="qian">11</div>
        <div class="hou">22</div>
    </div>
</body>

3.2.4 旋转木马案例

旋转木马

<style>
    body {
        /* 必须要放在body中才能正常 */
        perspective: 1000px;
    }

    section {
        position: relative;
        left: 500px;
        top: 100px;
        width: 300px;
        height: 200px;
        transform-style: preserve-3d;
        animation: move 10s infinite linear;
        transition: all 5s;
    }

    section div {
        position: absolute;
        width: 100%;
        height: 100%;
        background: url(media/dog.jpg) no-repeat;
    }

    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);
    }

    @keyframes move {
        0% {}

        100% {
            transform: rotateY(360deg);
        }
    }
</style>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>