【第二部分 | CSS】8：一篇文章了解 CSS3新特性

最新推荐文章于 2024-07-18 13:56:09 发布

Graskli

最新推荐文章于 2024-07-18 13:56:09 发布

阅读量734

点赞数

分类专栏：【前端】HTML CSS JS 基础文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_57265007/article/details/127182664

版权

【前端】HTML CSS JS 基础专栏收录该内容

30 篇文章 5 订阅

订阅专栏

xxx-child 和 xxx-of-type 的区别

| 【复习】伪类选择器、结构伪类选择器、伪元素选择器的区别

修改中心点 transoform-origin

案例：通过animation-timing-function 逐个显示文字

| 概述

新增的CSS3特性有兼容性问题，ie9+才支持
移动端支持优于 PC 端
不断改进中
应用相对广泛
现阶段主要学习：新增选择器和盒子模型以及其他特性

| 属性选择器

CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

属性选择器
结构伪类选择器
伪元素选择器

属性选择器，按照字面意思，都是根据标签中的属性来选择元素

重点： E[att="val"] 选取具有att属性且属性值等于val的E元素

示例代码：

 /* 只选择 有value属性的input 选取出来 */
input[value] {
    color: pink;
} 

/* 只选择 type =text 文本框的input 选取出来 */
input[type=text] {
    color: pink;
}

/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
div[class^=icon] {
    color: red;
}

/* 选择首先是section 然后 具有class属性 并且属性值 必须是 data结尾的这些元素 */
section[class$=data] {
    color: blue;
}

属性选择器，按照字面意思，都是根据标签中的属性来选择元素
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器
属性选择器也可以选择出来自定义的属性
注意：类选择器、属性选择器、伪类选择器，权重为 10 如：div[class^=iconname] 权重为：标签选择器 + 属性选择器 = 11

| 结构伪类选择器

E:xxx-child

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

重点： nth-child(n) {...}

匹配到父元素的序号为奇数的子元素

ul li:nth-child(odd){} odd 是关键字奇数的意思（3个字母）
匹配到父元素的序号为偶数的子元素

ul li:nth-child(even){} even（4个字母）

匹配到父元素的前3个子元素

ul li:nth-child(-n+3){}

选择器中的 n 是怎么变化的呢？

因为 n是从 0 ，1，2，3.. 一直递增

所以 -n+3 就变成了
- n=0 时 -0+3=3
- n=1时 -1+3=2
- n=2时 -2+3=1
- n=3时 -3+3=0

一些常用的公式

示例：选择ul中的第三个li标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 选择ul中的li，且该li被选中的条件为：第3个li */
        ul li:nth-child(3) {
            background-color: pink;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

E:xxx-of-type

该选择器的作用，和 E:xxx-child 作用、语法完全一致。

xxx-child 和 xxx-of-type 的区别

区别

xxx-child 是把所有【同级别所有HTML标签】都标号，按照序号寻找，若对应的标签不是xxx，则不予选择

即：先找序号标签，再确定是不是xxx标签，是的话则选择反之则不选择

xxx-of-type 是把【同级别的xxx标签】都标号，按照序号寻找，最终寻找的是第 th个xxx标签

即：先找出所有的xxx标签，再按序号定位xxx标签

原理

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        /* p:nth-child(4) 代表：把当前【同级别的所有标签】作为孩子，然后【寻找第4个孩子】，但是发现4号不是p标签，因此不会选择 */
        .a p:nth-child(4) {
            background-color: pink;
        }

        /* p:nth-type(4) 代表：把当前【同级别的所有 p 标签】作为孩子，然后【寻找第4个p标签】并选择 */
        .a p:nth-of-type(4){
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="a">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <div>4</div>
        <p>5</p>
    </div>
</body>
</html>

伪类选择器小结

结构伪类选择器一般用于选择父级里面的第几个孩子
nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E 找第n个孩子
关于 nth-child（n）我们要知道 n 是从 0 开始计算的，要记住常用的公式
如果是无序列表，我们肯定用 nth-child 更多
类选择器、属性选择器、伪类选择器，权重为 10

| 伪元素选择器

基础知识及语法

什么是伪元素选择器？

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
通过伪元素选择器创建出的元素，不会成为HTML的一部分。
使用场景：如盒子里的小箭头、鼠标经过时的遮罩等都可以使用伪元素选择器

伪元素选择器的语法

声明了::before或::after的元素中，必须声明 content:'（伪元素的内容）' 否则伪元素选择器不生效
有时候也可以写成 :before :after 这样子写，是为了照顾低版本浏览器。在解析的时候，浏览器会自动解析成 :: （双冒号）

什么是元素内部的前面和后面？

比如我有一个盒子，里面的内容是【我是一个盒子】

这个时候，若添加了 ::before{ content=''; 前面 } ，则表示 “在【我是一个盒子】前面添加【前面】”

这个时候，盒子里的内容就是【前面我是一个盒子】

总得来说，前后是相对于盒子中的内容而言的，【前面】则相当于在内容左边；【后面】则相当于在内容右边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box::before {
            content: '内容';
        }
    </style>
</head>
<body>
    <div class="box">我是一个盒子</div>
</body>
</html>

一些注意点

before 和 after 创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法： element::before {}
before 和 after 必须有 content 属性
before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
伪元素选择器和标签选择器一样，权重为 1
伪元素选择器常常结合“定位——子绝父相”来使用

应用场景一：字体图标

在实际工作中，字体图标基本上都是用伪元素来实现的，好处在于我们不需要在结构中额外去定义字体图标的标签，通过content属性来设置字体图标的编码

步骤：

结构中定义div盒子
在style中先申明字体 @font-face
在style中定义after伪元素 div::after{...}
在after伪元素中设置content属性，属性的值就是字体编码
在after伪元素中设置font-family的属性
利用定位的方式，让伪元素定位到相应的位置；记住定位口诀：子绝父相

<head>
    ...
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?1lv3na');
            src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?1lv3na') format('truetype'),
                url('fonts/icomoon.woff?1lv3na') format('woff'),
                url('fonts/icomoon.svg?1lv3na#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: '\e91e';
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div></div>
</body>

应用场景二：清除浮动

回忆一下清除浮动的方式：

额外标签法也称为隔墙法，是 W3C 推荐的做法。
父级添加 overflow 属性
父级添加after伪元素
父级添加双伪元素

额外标签法也称为隔墙法，是 W3C 推荐的做法

注意： 要求这个新的空标签必须是块级元素

后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化

| 【复习】伪类选择器、结构伪类选择器、伪元素选择器的区别

| CSS3盒子模型

新盒子模型：包含了padding和border

CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变

box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）
box-sizing: border-box 盒子大小为 width推荐使用

今后的CSS初始化代码

如果盒子模型我们改为了box-sizing: border-box ，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）

/* 今后CSS全局初始化的代码 */
* {
	/* 清除边距 */
	margin: 0;  
	padding: 0;
	
	/* 指定CSS3的盒子模型，这样就不会撑大盒子了 */
	box-sizing: border-box;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 今后CSS全局初始化的代码 */
        * {
            /* 清除边距 */
            margin: 0;  
            padding: 0;
            
            /* 指定CSS3的盒子模型，这样就不会撑大盒子了 */
            box-sizing: border-box;
        }

        div {
            height: 400px;
            width: 400px;
            margin: 100px auto;
            
            border: 30px solid pink;
            padding: 30px;

            background-color: blue;
        }

    </style>
</head>
<body>
    <div></div>
</body>
</html>

| CSS3其他特性

滤镜filter 让图片变模糊

filter CSS属性将模糊或颜色偏移等图形效果应用于元素

语法：

filter:   函数(); -->  例如： filter: blur(5px);  -->  blur模糊处理  数值越大越模糊

calc函数计算盒子的宽度（好东西！）

calc() 此CSS函数让你在声明CSS属性值时执行一些计算

语法：

width: calc(100% - 80px);

括号里面可以使用 + - * / 来进行计算

| 过渡

基本介绍与语法

概述

过渡动画： 是从一个状态渐渐的过渡到另外一个状态

可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但是不会影响页面布局。

我们现在经常和 :hover 一起搭配使用

语法

设置单个属性过渡：

transition: 要过渡的属性  花费时间  运动曲线  何时开始;  /* 过渡属性  花费时间   这两个属性必须写 */

设置多个属性过渡：

transition: 
要过渡的属性A  花费时间  运动曲线  何时开始,
要过渡的属性B  花费时间  运动曲线  何时开始,
要过渡的属性C  花费时间  运动曲线  何时开始,
……
要过渡的属性n  花费时间  运动曲线  何时开始;

设置所有的属性都过渡：推荐这种写法

transition: all  花费时间  运动曲线  何时开始;

语法说明

属性：想要变化的 css 属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以
花费时间：单位是秒（必须写单位s！！！！！） 比如 0.5s
运动曲线：默认是 ease （可以省略）
何时开始：单位是秒（必须写单位s！！！！！！） 可以设置延迟触发时间默认是 0s （可以省略）
后面两个属性可以省略
记住过渡的使用口诀：谁变化，给谁加过渡。比如A→B，则给A加过渡*
下面给出了运动曲线的属性名称

过渡练习

步骤：

创建两个div的盒子，属于的嵌套关系，外层类名叫 bar，里层类名叫 bar_in
给外层的bar 这个盒子设置边框，宽高，圆角边框
给里层的bar_in 设置初试的宽度，背景颜色，过渡效果
给外层的 bar 添加 hover事件，当触发了hover事件让里层的bar_in 来进行宽度的变化

代码：

<head>
    ...
    <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }
        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            /* 谁做过渡给谁加    请务必记得给时间加上单位s 否则过渡不生效*/ 
            transition: all .7s;
        }
        .bar:hover .bar_in {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>

页内锚点过渡跳转

使用CSS3的scroll-behavior属性即可

/* 添加页内跳转过渡*/
body,html{
    scroll-behavior: smooth;
}

| 2D转换 transform

transform 可以实现元素的位移、旋转、缩放

需要注意的是：转换只是给出了元素状态的最终变化，而不是动画！因此常常搭配hover和transition使用

位移 translate

这是除了浮动、定位外的第三种定位方法

/* 距离左侧100px，上侧200px */
transform: translate(100px,200px);

应用：鼠标悬浮的时候，盒子向上浮动
父元素使用了transform，子元素也会共同继承。子元素若再设置transform，会导致子元素比父元素移动更多

示例

        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            
            transition: all 0.5s;
        }

        .box1:hover {
            /* 距离左侧100px，上侧200px */
            transform: translate(100px,200px);
        }

旋转 rotate

<span style="background-color:#f8f8f8"><span style="color:#333333">
transform: rotate(度数)
</span></span>

rotate括号内的是度数，且需要跟一个单位 deg
角度>0 则顺时针；角度<0 逆时针
应用案例：1.把矩形顺时针旋转45deg，然后去掉两条边，制作三角。 2.动画效果。
本质：以中心点建立直角坐标系 y↑→x
默认以中心点的原点旋转。若rotateX，则按照以中心点建立的直角坐标系的x轴旋转

修改中心点 transoform-origin

示例代码：

		.box4 {
            height: 100px;
            width: 100px;
            margin: 50px auto;
            background-color: pink;

            transition: all 0.5s;
            /* 设置旋转的中心点位左下角 */
            transform-origin: left bottom;
        }
        .box4:hover {
            transform: rotate(360deg);
        }

缩放 scale

transform: scale(x,y);

代码示例

		.box5 {
            height: 100px;
            width: 100px;
            background-color: pink;
            margin: 100px auto;

            transition: all 0.5s;
        }
        .box5:hover {
            transform: scale(3,3);
        }

应用案例：鼠标经过的时候，图形变大（如：按钮等等交互元素）

| 动画

概述

动画和过渡的区别：动画可以实现更多变化、更多控制如自动播放
动画的基本使用步骤先定义，再使用
动画定义的本质是：关键帧

动画序列（关键帧）

动画的定义和使用

基本语法

/* 定义动画 */
@keyframes 名字 {
	XXX% {
		//...
	}
}


/* 使用动画 */
animation-name: 名字;

/* 设置动画时间 */
animation-duration: 时间s; （记得带单位）

代码示例

    <style>
        /* 定义box1动画 */
        @keyframes box1 {
            0% {
                transform: translateX(0px);
            }

            10% {
                transform: translate(100px,100px);
            }

            30% {
                transform: translate(200px,200px);
            }

            50% {
                transform: translate(300px,300px);
            }

            70% {
                transform: translate(200px,200px);
            }

            90% {
                transform: translate(100px,100px);
            }

            100% {
                transform: translateX(100px);
            }
        }

        /* 使用动画 */
        .box1 {
            height: 100px;
            width: 100px;
            background-color: pink;

            /* 调用动画 */
            animation-name: box1;

            /* 持续时间 */
            animation-duration: 6s;
        }

    </style>

动画的属性

属性

可以为动画添加相关属性，实现动画的开始时间、速度曲线、播放次数/循环播放等
常用属性如下：

动画曲线 animation-timing-function的相关可选值如下：
应用案例：逐个显示文字

案例：通过animation-timing-function 逐个显示文字

/* 大盒子标题及其样式 */
.blogenter .title {

    /* 初始width为0，之后通过animation相关属性 确定width */
    width: 0px;
    height: 80px;
    margin: 0 auto;
    margin-bottom: 100px;


    font-family: 'Microsoft YaHei';
    font-size: 60px;
    font-weight: 700;
    text-align: center;

    color: rgb(253, 254, 255);
}


/* 添加动画：步长显示，一个一个显示标题  技巧：overflow:hidden + 运用一个特性：盒子长度不够会把文字挤下去*/
.blogenter .title {
    overflow: hidden;
}
@keyframes showtitle {
    from {
        width: 32px;
    }
    to {
        width: 470px;
    }
}
.blogenter .title {
    animation-name: showtitle;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

| * 3D转换

3D转换是一个CSS3动画的相关知识，比较复杂，在这里只是做一个简单的介绍。

3D转换和2D转换并不是割裂开的，3D的有些语法使用的是2D的语法。最大的不同是：3D转换有z轴、有透视、有z轴的位移、有3D呈现等

translateZ 一般需要结合透视才能看到效果

translateZ 都使用 px 作为单位

透视 perspective

透视写在被观察元素的父盒子上！

perspective的值越小，相当于眼睛离被观察物体越近，投影到父元素的影子就越大！

实际上，transform:translateZ(100px)相当于下图的z perspective:xxxpx相当于下图的d d要比z大才能在屏幕上有投影！

代码示例

<!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: 100px;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px auto;

            transform: translate3d(0,0,100px);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

3D旋转 rotate3d(x,y,z)

类似的还有 transform:rotateY、transform:rotateZ 等等

下面介绍一下 transform:rotateX

示例代码：鼠标放置之后，图片旋转

		.box2 {
            /* 透视要给父元素加 */
            perspective: 500px;
        }
        .box2 img {
            display: block;
            height: 300px;
            margin: 100px auto;
            /* 过渡效果 */
            transition: all 1s;
        }
        .box2 img:hover {
            /* 绕着X轴旋转（以中心为原点建立数学直角坐标系 的x轴） */
            transform: rotateX(180deg);
        }