CSS3

淅川
257 阅读14分钟

CSS3.png

一、 css3新增选择器

01. 子级选择器
  • 子级选择器用于选取带有特定父元素的元素。
  • 书写语法：element1>element2
  • 注：
    • 如果element2元素不是父元素的element1的直接子元素，则不会被选择。
    • 在 >符号之前书写父级的选择器
    • 在 >符号之后写子级选择器
    • 满足父子关系级关系方可选择中标签。
02. 兄弟选择器
选择器简介
element1+element2匹配同一个父元素中紧跟在element1后面的一个element2元素
element1~element2匹配同一个父元素中在的element1后面的所有的element2元素
.box1 > p {
        color: red;
    }
03. 相邻兄弟选择器
  • 相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素，而且二者有相同的父元素。
  • 书写语法:element1+element2。
  • 注：
    • 选中的是紧跟在E1之后的同级元素E2。
    • 只能选中紧跟在后面的一个E2元素。
    • 二者有相同的父元素，只能选择一个元素
    • +符号前后可以添加空格书写。
.box3 h1 + p{
    color: purple;
}
04. 其他兄弟选择器（普通兄弟选择器）
  • 其他兄弟选择器匹配同一个父元素中在element1后面的所有elment2元素。
  • 书写语法：element1~element2。
  • 注：
    • 选择element1之后出现的所有element2。
    • 两种元素必须拥有相同的父元素，但是element2不必直接紧随element1。
    • ~符号前后可以添加空格书写。
    • 可以选择后面的所有选择器；必须有相同的父元素
.box4 h1 ~ p{
    color: royalblue;
}
05.结构伪类选择器
选择器简介
E:first-child匹配父元素中的第一个子元素
E:last-child匹配父元素中的最后一个元素
E:nth-child(n)匹配父元素中的第n个字元素(n为even选中是偶数，n为odd选中是奇数)
E:first-of-type指定类型的第一个
E:last-of-type指定类型E的最后一个
E:nth-of-type指定类型E的第n个

  • nth-child(n)

    • n可以是数字，关键字和公式

    • n如果是数字，就是选择第n个

    • 常见的关键词even偶数，odd奇数

    • 常见的公式如下（如果n是公式，则从0开始计算，n是从0,1,2,3…一直递增）

    • 但是第0元素或者超出了元素的个数会被忽略。

      公式取值
      2n偶数
      2n+1奇数
      5n5 10 15…
      n+5从第五个开始（包含第五个）到最后，5 6 7 8 9 10…
      -n+5前5个(包含第五个)，5 4 3 2 1 0…

  • E:nth-child(n)和E:nth-of-type(n)的区别

    • E:nth-child(n) 匹配父元素的第n个子元素E，同时需要满足两个条件
    • E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E，会忽略其他同级的非同类型元素。
/* 结构选择器 */
/* 选中第一个子元素*/
.box5 :first-child{
    color: white;
}
/* 选中最后一个子元素*/
.box5 :last-child{
    color: red;
}
/* 选中指定的子元素*/
.box5 :nth-child(even){
    color: green;
}
/* 选中p标签下的第一个子元素*/
.box5 p:first-of-type{
    background-color: hotpink;
}
/* 选中p标签下的最后一个子元素*/
.box5 p:last-of-type{
    background-color: lightblue;
}
/* 选中p标签下指定的子元素*/
.box5 p:nth-of-type(odd){
    background-color: lightcoral;
}
06. 伪元素选择器

  • 新增伪元素 选择器 | 介绍 | | --------------- | --------------- | | E::before | 在E元素内部的前面插入一个元素 | | E::after | 在E元素内部的后面插入一个元素 | | E::first-letter | 选择到了E容器内的第一个字母 | | E::first-line | 选择到了E容器内的第一行文本

  • h5和传统写法区别

    • 单冒号E:before
    • 双冒号E::before
    • 浏览器对以上写法都能识别，双冒号是h5的语法规范。

  • 伪元素的注意事项

    • 伪元素只能给双标签添加，不能给单标签添加。
    • 伪元素的冒号前不能有空格，如E ::before这个写法是错误的。
    • 伪元素里面必须写上属性content:"";
    • before和after创建一个元素，但是属于行内元素。
    • 因为在DOM里面看不见刚才创建的元素，所以我们称为伪元素。
07. 属性选择器
  • 属性选择器用来选择包含指定属性的标签。
08. 选择器权重
  • 基础选择器：id选择器>类选择器>标签选择器>*
  • 伪类选择器、属性选择器的权重等于类选择器。
  • 伪元素选择器的权重等于标签选择器。

二、 css3盒模型

  • css3中可以通过box-sizing来指定盒模型，方便设置如何计算一个元素的总宽度和总高度。
  • box-sizing: content-box;正常的盒模型
    • Standard模式：盒子总体大小为width(height)+padding+border,内容区域是width和height部分。
  • box-sizing: border-box;怪异模型，
    • Quirks模式：怪异模式中，盒子总体大小为width和height，padding、border内容区域会收缩。

CSS3新增属性

01. 边框圆角

  • 属性名：border-radius

  • 作用：设置边框的圆角。

  • 属性值：可以是px，或者%，%参考的是盒子整体宽度、高度的%。 属性值 | 说明 | | ------------------ | ---------------------------------- | | x-radius/ y-radius | /分割两部分属性值，前面为水平半径，后面为垂直半径，得到的是椭圆角。 | | radius | 一个属性值，则水平和垂直都设置为同一个值，得到的是圆角。

  • 单一属性

    • border-top-left-radius:半径（左上角）
    • border-top-right-radius:半径（右上角）
    • border-bottom-left-radius:半径（左下角）
    • border-bottom-right-radius:半径（右下角）

  • 简写方法

    • border-radius相当于四个单一属性的简写方法，类似padding也有可以有四种值得写法。
    • border-radius:左上角 右上角 右下角 左下角；
    • border-radius:左上角 右上角和左下角 右下角；
    • border-radius:左上角和右下角 右上角和左下角；
    • border-radius：四个值相同；

  • /的属性值写法

    • border-radius属性值中出现了 / 斜线
      • / 前面可以设置水平方向四种值的写法
      • / 后面可以设置垂直方向四种值的写法。
      • border-radius:50% 20% 40% / 20% 30%;
02. css3文字阴影
  • text-shadow可向文本应用阴影,通过属性值能够规定水平阴影、垂直阴影、模糊距离、以及阴影的颜色
属性值简介
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊的距离。
color可选。阴影的颜色。
  • 文字阴影语法
    • text-shadow属性向文本添加阴影，属性值有2-3个长度值和一个可选的颜色值进行规定，省略的长度是0.
03. css3盒子阴影

  • 边框阴影

    • box-shadow属性用于对盒子边框添加阴影。 属性值 | 简介 | | -------- | ---------------- | | h-shadow | 必需。水平阴影的位置。允许负值。 | | v-shadow | 必需。垂直阴影的位置。允许负值。 | | blur | 可选。模糊的距离。 | | color | 可选。阴影的颜色。 | | spread | 可选。阴影的尺寸。 | | inset | 可选。将外部阴影改为内部阴影。

  • 边框阴影语法

    • box-shadow属性向盒子添加阴影，属性值有2-4个长度值、可选的颜色值以及可选的inset关键词来规定，省略的长度是0。
    • 多层阴影 
      • box-shadow属性也可以向盒子添加多个阴影，逗号分隔多个阴影的属性值。

      • 注意：多阴影中，先写的阴影压盖在后写的阴影上。
04. css3过渡属性

  • 动画效果

    • CSS3出现之前，前端一般使用Flash动画或JavaScript制作动画。
    • 帧动画：通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。

  • 过渡属性

    • 属性名：transition
    • 作用：在不使用Flash动画或JavaScript的情况下，使用transition可实现补间动画（过渡效果），并当元素只有“属性”发生变化时即存在两种状态（我们用A和B代指），那么A和B之间就可以实现平滑的过渡的动画效果。为方便看效果，使用：hover切换状态。
    • transition:过渡的属性 过渡时间 运动曲线 延时时间; 属性 | 描述 | | -------------------------- | ---------------------- | | transition | 用于在一个属性中设置四个过渡属性。 | | transition-property | 规定应用过渡的CSS属性的名称。 | | transition-duration | 定义过渡效果花费的时间。默认是0 | | transition-timing-function | 规定过渡效果的时间曲线。默认是“ease ” | | transition-delay | 规定过渡效果何时开始。默认是0；

  • transition-property过渡属性

    • none表示没有属性过渡
    • all表示所有变化的属性都过渡
    • 属性名 使用具体的属性名，多个属性名中间逗号分隔

  • -时间

    • 过渡时间：以s秒为单位。
    • 延时时间：以s秒为单位。0s也必须加单位。

  • transition-timing-function时间曲线 值 | 描述 | | ------------------------- | ----------------------------------------------------------------- | | linear | 规定以相同速度开始至结束的过渡效果。（匀速直线） | | ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果。（先快后慢） | | ease-in | 规定以慢速开始的过渡效果。（越来越快） | | ease-out | 规定以慢速结束的过渡效果。（越来越慢） | | ease-in-out | 规定以慢速开始和结束的过渡效果。 | | cubic-bezier(x1,y1,x2,y2) | 在cubic-bezier函数中定义自己的值。x1、x2取是0至1之间的数值，y1、y2取值任意，四个值表示拉扯的点的两个坐标。

05. 2D转换
  • 2D转换
    • 属性名：transform
    • 作用：对元素进行移动、缩放、转动、拉长或拉伸。配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
    • 属性值：多种转换方法的属性值，可以实现不同的转换效果。
  • 位移translate（）
  • transform的属性值为translate（）时，可以实现位移效果。
  • 书写语法： 值 | 说明 | | -------------- | ----------------------------------- | | translate(x,y) | x,y分别为水平和垂直方向位移的距离，可以为px值或百分比，区分正负。 | | translate(x) | 只有一个数值，表示水平方向的位移

  • 缩放scale（）

    • transform的属性值为scale（）时，可以实现元素缩放效果。

    • 书写语法：

      值说明
      scale(x,y)x,y分别为改变元素的宽度和高度的倍数
      scale(n)只有一个值，表示宽度和高度同时缩放n倍
      scaleX(n)改变元素的宽度
      scaleY(n)改变元素的高度

  • 旋转rotate()

    • transform属性值设置为ratate()时，实现元素的旋转。
    • 书写语法：
    • rotate(数字deg)
    • deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转。2D的旋转只有一个属性值。
    • 注意：元素旋转后，坐标轴也跟着发生转变
    • 因此，多个属性值同时设置给transform时，书写顺序不同导致的转换效果有差异。

  • 倾斜skew（）

    • transform属性值设置为skew()时，实现元素的倾斜。
    • 书写语法：transform：skew（数字deg,数字deg）;
    • 两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个数值不写默认为0

  • 基准点transform-origin属性
    • 作用：设置调整元素的水平和垂直方向原点的位置。
    • 调整元素的基准点。
    • 属性值：包含两个，中间使用空格分隔。 值 | 说明 | | - | ----------------------------------------- | | x | 定义X轴的原点在何处。可能的值：left、center、right、像素值、百分比 | | y | 定义Y轴的原点在何处。可能的值：top、center、bottom、像素值、百分比

卡包特效实例

06. 3D转换

transform属性不止能实现2D，也可以制作3D立体转换效果，比普通的x，y轴组成的平面效果多了一条z轴

  • 透视
    • 透视可以将一个2D平面，在转换的过程中，呈现3D效果。
    • 透视特点：近大远小。
    • 注意：并非任何情况下需要透视效果，根据开发需要进行设置，如果需要展示z轴的变化，则设置透视效果。
  • 透视属性perspective
    • 属性名：perspective
    • 作用：设置在z轴的视线焦点的观察位置，从而实现3D查看效果。
    • 属性值：像素值，数组越大，观察点距离z轴原点越远，图形效果越完整且接近原始尺寸。
    • 注意：透视属性需要设置给3D变化元素的父级。
  • 3D旋转
    • 3D旋转比2D旋转更复杂。需要分别对三个方向的旋转角度值：
    • 属性值： 值 | 说明 | | -------------- | ----------- | | rotateX(angle) | 定义沿着X轴的3D旋转 | | rotateY(angle) | 定义沿着Y轴的3D旋转 | | rotateZ(angle) | 定义沿着Z轴的3D旋转
    • 注意：属性值的角度区分正负，正数表示沿对应坐标轴顺时针方向旋转，负数表示沿对应坐标轴逆时针方向旋转。
  • 3D位移

    • 类似地，位移也分三个方向的移动：

    • 属性值： 值 | 说明 | | ------------- | ---------------- | | translateX(x) | 设置X轴的位移值。 | | translateY(y) | 设置Y轴的位移值 | | translateZ(z) | 定义3D位移，设置Z轴的位移值。

    • 属性值为像素值或百分比，正负表示位移的方向。正值向对应轴的正方向移动，负值向对应轴的负方向移动。

  • transform-style属性
    • 用于设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标轴。
    • 属性值：
    • flat：所有子元素在2D平面呈现
    • preserve-3d:保留3D空间
    • 3D元素构建是指某个图形是由多个元素构成，可以给这些元素的父元素设置transform-style:preserve-3d,来使其变成一个真正的3D图形。
    • 一般来说，该属性设置3D变化图形的父级元素。
07. 动画
  • css3中提供了自己的动画制作方法，这可以在许多网页中取代动画图片。Flash动画以及JavaScript。
  • css3动画分为两步：创建动画、绑定动画。
  • @keyframes规则
    • @keyframes中规定某项CSS样式，就能创建由从一种样式逐渐变化为另一种样式的效果。
    • 可以改变任意多的样式任意多的次数。
    • 需要使用百分比来规划变化发生的时间，或用关键词"from"和“to”，等同于0%和100%。
    • 0%是动画的开始，100%是动画的完成。
  • @keyframes书写方法
@keyframes动画名称{
动画过程，可以添加任意百分比处的动画细节
}
  • animation属性
    • 需要将@keyframes中创建的动画捆绑到某个选择器，否则不会产生动画效果。
    • animation属性用于对动画进行捆绑。
    • 其中必须设置动画名称和过渡时间，其他属性值可以根据需求设置。
    • 语法：
div{
animation：动画名称 过渡时间 速度曲线 动画次数 延时时间；
}

  • 实现动画主要由两个部分组成

    • 声明并设置关键帧
<style>
@keyframes fly{
            0%{
                left:5%;
                top:10px;
                transform:rotate(5deg);
            }
            50%{
                left:40%;
                top:100px;
                transform:rotate(25deg);
            }
            100%{
                left:75%;
                top: 15px;
                transform:rotate(0deg);
            }
        }
</style>
  • 调用关键帧:animation:
  • 语法顺序:animation:1 2 3 4 5 6 7
属性说明
animation-name1.由@keyframes创建的动画名称
animation-duration2.动画时间
animation-timing-function3.动画的速度曲线
animation-delay4.延迟时间
animation-iteration-count5.动画的播放次数值通常为整数,默认值为:1特殊值infinte:表示动画无限次播放
animation-direction6.动画的播放方向normal 默认值,动画按正常播放reverse 动画反向播放alternate 动画在奇数次(1 3 5...)正向播放,在偶数次(2 4 6...)反向播放atlernate-reverse动画在奇数次(1 3 5...)反向播放,在偶数次(2 4 6...)正向播放
animation-play-state;7.动画的播放状态tunning 将暂停的动画重新播放paused 将正在播放的元素动画停下来
08. 正方体
  • 思路：
    • 根据6个div元素来显示正方体的每一个面
    • 根据transform 的 属性 rotate角度调节
    • 将每一个div的背景设置为背景图片，
    • 然后根据正方体的每一个面需要的角度用rotateX或者rotateY来调整
    • 最后根据translateZ轴来移动图片，来组成一个正方体
    • 最后用@keyframes来旋转图片的角度
09. 加载动画

avatar
文章
阅读
粉丝