HTML5+CSS3基础（day18）

最新推荐文章于 2024-10-02 07:15:00 发布

澈如冬雪^

最新推荐文章于 2024-10-02 07:15:00 发布

阅读量57

点赞数

文章标签： css3 html5 css

本文链接：https://blog.csdn.net/m0_52372037/article/details/128823833

版权

一、HTML5和CSS3提高（续）

1.CSS3的新特性

1.1

（1）伪元素选择器使用场景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>伪元素选择器使用场景-字体图标</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?30ruvw');
            src: url('fonts/icomoon.eot?30ruvw#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?30ruvw') format('truetype'),
                url('fonts/icomoon.woff?30ruvw') format('woff'),
                url('fonts/icomoon.svg?30ruvw#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }

        div::after {
            /* 定位 */
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            /* content: ''; */
            /* 加\转义字符转义一下 */
            content: '\e900';
            color: red;
            font-size: 18px;
        }
    </style>
</head>

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

</html>

（2）伪元素选择器使用场景2-仿土豆效果

<!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>伪元素选择器使用场景2-仿土豆效果</title>
    <style>
        .tudou {
            position: relative;
            width: 490px;
            height: 275px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .tudou::before {
            content: '';
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(imgs/arr.png) no-repeat center;
        }

        /* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */
        .tudou:hover::before {
            /* 这个block是显示元素 */
            display: block;
        }
    </style>
</head>

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

    </div>
</body>

</html>

（3）伪元素选择器使用场景3-伪元素清除浮动本质

1.2 CSS3盒子模型border-box

<!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>CSS3盒子模型</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            box-sizing: content-box;
        }

        p {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            /* CSS3 盒子模型 盒子最终的大小就是 width  200 的大小 */
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div>
        小猪佩奇
    </div>
    <p>
        小猪乔治
    </p>
</body>

</html>

1.3 CSS3其它特性（了解）

（1）CSS3图片模糊处理

在这里插入图片描述

<!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>图片模糊处理filter</title>
    <style>
        img {
            /* blur示一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */
            filter: blur(5px);
        }

        img:hover {
            filter: blur(0);
        }
    </style>
</head>

<body>
    <img src="imgs/111.jpg" alt="">
</body>

</html>

（2）计算盒子宽度calc函数

在这里插入图片描述

<!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>CSS3属性calc函数</title>
    <style>
        .father {
            width: 300px;
            height: 200px;
            background-color: pink;
        }

        .son {
            /* width: 150px; */
            /* width: calc(150px + 30px); */
            width: calc(100% - 30px);
            height: 30px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <!-- 要求我们的子盒子宽度永远比父盒子小30像素 -->
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

1.4 CSS3过渡（重点）

（1）CSS3新增属性过渡

<!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>CSS3过渡效果</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 最后两个可以省略不写 */
            /* transition: 变化的属性 花费的时间 运动曲线 何时开始； */
            /* 如果想要写多个属性，利用逗号进行分割 */
            /* transition: width .5s ease 1s, height .5s ease 1s; */
            /* transition: width .5s ease 0s, height .5s ease 1s; */
            /* transition: width .5s, height .5s; */
            /* transition: width .5s ease 1s; */
            /* 如果想要多个属性都变化，属性写all就可以了 */
            /* 谁做过渡，给谁加 */
            transition: all 0.5s;
        }

        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

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

</html>

（2）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>CSS3过渡练习-进度条</title>
    <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }

        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            /* 谁做过渡给谁加 */
            transition: all .7s;
        }

        .bar:hover .bar_in {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>

</html>