CSS3新特性

CSS3新特性

  • 1.CSS3的现状
  • 2. CSS3新增选择器
    • 2.1 属性选择器
    • 2.2 结构伪类选择器
    • 2.3 伪元素选择器
    • 2.4 伪元素使用小案例
    • 2.5 伪元素清除浮动原理
    • 2.6 CSS3 盒子模型
    • 2.7 CSS3其他特性
      • 2.7.1 filter()函数---图片模糊
      • 2.7.2 calc()计算函数
    • 2.8 过渡
      • 2.8.1 过渡练习-进度条
  • 3. 狭义的HTML5 和CSS3
  • 4. 广义的HTML5 和CSS3

1.CSS3的现状

2. CSS3新增选择器

CSS3新特性_第1张图片

CSS3新特性_第2张图片

2.1 属性选择器

CSS3新特性_第3张图片

注意:div[class=“icon”] 其权重为11,他由标签选择器div和属性选择器[class=“icon”] 组成

2.2 结构伪类选择器

CSS3新特性_第4张图片

CSS3新特性_第5张图片

解释:-n+5,因为n是从0开始,0,1,2,3…, -n就是0,-1,-2,-3…,再加5就是5,4,3,2,1,0,就是取前五个

CSS3新特性_第6张图片

2.3 伪元素选择器

CSS3新特性_第7张图片

使用div::before 会在div内部最前面创建一个行内元素,div::after会在div内部的最后面创建一个行内元素

CSS3新特性_第8张图片

CSS3新特性_第9张图片

2.4 伪元素使用小案例

CSS3新特性_第10张图片
CSS3新特性_第11张图片

<!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>
        @font-face {
            font-family: 'iconfont';
            src: url('font/iconfont.ttf?t=1656768109335') format('truetype');
        }
        div {
            position: relative;
            width: 200px;
            height: 50px;
            border: 1px solid red;
        }

        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: "iconfont" !important;
            content: '\e6cd';
        }
    </style>
</head>

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

</html>

2.5 伪元素清除浮动原理

CSS3新特性_第12张图片

CSS3新特性_第13张图片

2.6 CSS3 盒子模型

CSS3新特性_第14张图片

2.7 CSS3其他特性

2.7.1 filter()函数—图片模糊

CSS3新特性_第15张图片
CSS3新特性_第16张图片

2.7.2 calc()计算函数

CSS3新特性_第17张图片

2.8 过渡

CSS3新特性_第18张图片

CSS3新特性_第19张图片

<!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 1s ease 0.5s;
        }
        div:hover {
            width: 400px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果如下:

CSS3新特性_第20张图片
CSS3新特性_第21张图片

2.8.1 过渡练习-进度条

CSS3新特性_第22张图片

<!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>CSS过渡练习-进度条</title>
    <style>
        .bar {
            width: 200px;
            height: 20px;
            border: 2px solid black;
            border-radius: 10px;
            margin: 0 auto;
        }
        .bar-in {
            width: 0px;
            height: 20px;
            background-color: red;
            border-radius: 10px;
            transition: width 3s;
        }
        .bar:hover .bar-in {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="bar">
        <div class="bar-in"></div>
    </div>
</body>
</html>

3. 狭义的HTML5 和CSS3

CSS3新特性_第23张图片

4. 广义的HTML5 和CSS3

CSS3新特性_第24张图片

你可能感兴趣的:(#,CSS,css3,css,前端)