20230217----重返学习-flex布局的项目属性及transform页面转换属性及transition过渡效果属性及animation动画

方朝端

已于 2023-03-31 22:42:28 修改

阅读量568

点赞数

分类专栏：重返学习文章标签：学习 javascript css3

于 2023-02-17 23:23:13 首次发布

本文链接：https://blog.csdn.net/seetoyou/article/details/129095163

版权

重返学习专栏收录该内容

126 篇文章 4 订阅

订阅专栏

day-009-nine-20230217-flex布局的项目属性及transform页面转换属性及transition过渡效果属性及animation动画

常见效果的思路和原理

鼠标移动到元素上切换背景图

元素变成圆

元素变成实心圆

元素变成空心圆

元素变成空心圆，移动前后颜色产生变化

元素围绕某个元素产生定位效果

给定元素选择器字符串，围绕这个元素产生定位效果的JavaScript方法化

元素变成三角形

元素变成实心三角形

用边框。

边框颜色
边框长度

元素变成空心三角形

两个三角形，一个颜色与主背景不一样，一个颜色与主背景一致。之后用定位。

对话框

对话框有定位，之后对话框背景有颜色。
对话框的::before设置为对话框背景颜色的实心三角形，与对话框的::after设定为与对话框边框颜色的实心三角形。
用绝对定位相对于对话框移动到想要位置。

鼠标移动到某个元素弹出弹框

弹框放在那个元素上，将那个元素设置position为相对定位或绝对定位或固定定位。
弹框设置为

谷歌浏览器自带截图

Ctrl+Shift+I 打开浏览器控制台。
Ctrl+Shift+P 打开浏览器浏览器运行命令条。
输入screenshot，在出来的下拉选择中选择相应的截图命令。
- 中文的控制台也可以不输入screenshot，而是输入截图。
截图好之后，就会弹出类似于下载文件的流程，可以改名和看到。

flex布局

容器和项目的布局

容器与项目的概念
- 设置了display:flex;的就是容器。容器内部的子元素就是容器的项目。
容器与项目的多层
- flex布局并不会继承，所以设置在容器上的属性并不会继承给子元素。
- 一个容器内的元素也可以是它自身子元素的容器，只要在项目上设置display:flex;就可以了。

flex容器属性

flex项目属性

flex项目属性设置在具体的某个item项目上。

order 项目排列顺序，即排列优先级
- 数值越小，排列越靠前，默认为0。
  - 0优先于1优先于10。
- 也可以使用负数，支持整数。
  - 小数不生效。
  - -1优先0优先于1优先于10。

flex-grow 剩余空间分配，定义项目的放大比例。

默认为0，即如果存在剩余空间，也不放大。

flex-grow 推算过程
当前项目伸长后盒子模型总宽度=项目原盒子模型总宽度+(容器总盒子模型总宽度-项目原总盒子模型总宽度)*(当前项目权重/(项目总权重))

<div class="box">
  <div class="item1">001</div>
  <div class="item2">002</div>
  <div class="item3">003</div>
</div>
<style>
  .box{
    width: 700px;
    height: 700px;
    display: flex;
    border: 1px solid blue;
  }
  .box>div{
    box-sizing: border-box;/* 为了计算，采用了border-box怪异盒子模型。 */
    border: 3px solid #ff0;
  }
  .item1{
    width: 100px;
    height: 100px;
    background-color: pink;
    flex-grow: 4;/*100+(700-(100+200+300))*(4/(4+3+3))=140px */
  }
  .item2{
    width: 200px;
    height: 200px;
    background-color: skyblue;
    flex-grow: 3;
  }
  .item3{
    width: 300px;
    height: 300px;
    background-color: red;
    flex-grow: 3;
  }
</style>

flex-grow 使用场景
- 两侧弹性布局
- 中间居中布局
对margin及padding的影响，看放大是对盒子模型的总宽度还是对width属性。
- 是对盒子模型总宽度进行作用。

flex-shrink 项目压缩
- flex-shrink 推算过程
- 一般使用场景就是同样宽高进行同比例缩小。
flex-basis 项目总占用空间
- 设置了值，则子项占用的空间为设置的值
- 没设置或为auto，那子项的空间为width的值
flex 该属性是flex-grow, flex-shrink 和 flex-basis的简写。默认值为0 1 auto。
- flex:1;等价于flex:1 1;
- flex:0;等价于flex:0 0;
- 两个快捷值:
  - auto 1 1 auto
  - none 0 0 auto
- flex推算过程:
align-self 设置项目有与其他项目对于当前所在主轴中纵轴的对齐方式，可覆盖align-items属性。

border的属性值顺序可互换

border: 1px solid rgb(255,255,0);与border: rgb(255,255,0) solid 1px;一样。

transform页面转换属性修改CSS视觉格式化模型的坐标空间

transform属性值

translate 位移
- transform:translateX(100px); 水平位移
- transform:translateY(100px); 垂直位移
- transform:translate(100px,200px); 复合位移
  - 第一个值代表的是水平位移
  - 第二个值代表的是垂直位移
scale 缩放
- transform:scale(x,y)
  - x代表的是缩放宽度的x倍
  - y代表的是缩放高度的y倍
- transform:scale(n) 同时缩放宽度和高度的n倍，是transform:scale(n,n)的简写
rotate 代表旋转多少度，可以是负值,单位是deg
- transform:rotateX(45deg); 代表的是围绕着x轴旋转45deg
- transform:rotateY(45deg) 代表的是围绕着y轴进行旋转45deg
- transform:rotateZ(45deg); 代表围绕着z轴进行旋转45deg
skew 倾斜到二维平面。
- 这种转换是一种剪切映射 (横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。
- transform:skewX(45deg) 沿着X平面倾斜45deg
- transform:skewY(45deg) 沿着Y平面倾斜45deg
- transform:skew(10deg,15deg) 沿着x轴倾斜10deg和沿着y轴倾斜15deg
transform-origin 改变元素变形时候的作用原点
- 水平方向 left、 center、 right
- 垂直方向 top、center、bottom
- 一般只看到它明显作用于旋转化。

让一个元素在屏幕中水平垂直居中的方法

对父元素position: relative;以便让子元素相对父元素进行定位。
对子元素设置position: absolute;left: 50%;top: 50%;让子元素上边框在父元素上下的中间，子元素左边框在父元素左右的中间。
对子元素设置transform: translate(-50%, -50%);让子元素向左横向位移它自身盒子模型宽度的一半及子元素向上纵向位移它自身盒子模型高度的一半。

<div class="box">
  <div class="item"></div>
</div>
<style>
  .box {
    width: 400px;
    height: 300px;
    border: 1px solid rgb(255, 255, 0);
    position: relative;
  }
  .item {
    width: 100px;
    height: 200px;
    background-color: pink;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

不脱流，优化性能的方式

因为transform可以做出一些css效果，并且调用这个方法，不会引起其它元素位置变动导致页面重排，所以可以用它来做一些效果。

各种效果

元素显示的宽度及高度变化。
缩放引起注意
旋转转圈

transition过渡效果属性

过渡时机

过渡一定需要一个时机，常见时机:

:hover等伪类
用JavaScript给元素增加删除class类名导致样式变动。
用JavaScript修改css样式。
子元素新增或删除导致的宽高变化等

过渡属性

transition-property 过渡的属性

如果是多个属性可以用逗号隔开
transition-duration 过渡执行一次的总时间
transition-timing-function:linear; 过渡效果的运动曲线
transition-delay:1s; 过渡执行前的延迟时间

复合属性

transition:all 2s linear 1s;

顺序随意
- 第一个时间必定是过渡全部所需时间
推荐使用复合属性

z-index当前堆叠上下文中的堆叠层级定位层级

层级一样，源代码位于后面的定位元素优先显示
auto 默认值，盒子不会创建一个新的本地堆叠上下文。
- 在当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同。
整型数字是生成的盒子在当前堆叠上下文中的堆叠层级。
- 此盒子也会创建一个堆叠层级为 0 的本地堆叠上下文。
  - 意味着后代（元素）的 z-indexes 不与此元素的外部元素的 z-indexes 进行对比。
- 可以使用负数，正常元素可看作是0?
- 小数无效，相当不设置值。

animation动画

步骤

定义动画

用keyframes定义动画名其实keyframe就是慢慢改变样式的过程

@keyframes 动画名 {

  /* 动画序列 */
  /* 0%是动画的开始 */
  0% {
    width: 100px;
  }
  
  /* 50%是动画运行到50%的时候 */
  50% {
    width: 100px;
  }

  /* 100%是动画的结束 */
  100% {
    width: 200px;
  }
}

或

@keyframes 动画名 {
  /* from是动画的开始 */
  from{
    transform: translateX(0px);
  }

  /* to是动画的结束 */
  to{
    transform: translateX(400px);
  }
}

调用动画
- animation-name 指定要绑定到选择器的关键帧的名称
- animation-duration 动画指定需要多少秒或毫秒完成

动画的属性

animation-name: 要执行动画的名称; 动画名称 (必须写，动画才能运行)
animation-duration: 2s; 动画运行一次所需时间 (必须写，动画才能运行)
animation-timing-function: ease; 动画运行的运动曲线
animation-delay: 2s; 动画延迟多久才开始运行
- 默认是0s
animation-iteration-count: infinite; 规定动画运行的次数
- 可以是数字
  - 也可以是infinite
animation-direction: alternate; 动画运行一次之后是否反方向再运行一次
- 默认normal
- 反方向alternate
- 反方向也耗费animation-iteration-count的一次
animation-fill-mode: forwards; 是否回到起始状态
- 默认是backwards
- 在原地不回来了forwards
animation-play-state 定义一个动画是否运行或者暂停。
- 可以通过JavaScript查询它来确定动画是否正在运行。
- 它的值可以被设置为暂停和恢复的动画的重放。
  - 恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。
- 可选值
  - running 默认值，当前动画正在运行。
  - paused 当前动画已被停止。

动画例子(鼠标经过这个盒子，让他停止动画)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: lavender;

        /* 2、调用动画 */
        animation-name: run; /* 动画名称 */
        animation-duration: 2s; /* 持续时间 ：盒子从左到右花费的时间*/
        animation-timing-function: ease; /* 运动曲线 默认ease*/
        animation-delay: 2s; /* 动画延迟多久开始 默认是0s */
        animation-fill-mode: forwards; /* 是否回到起始状态 默认是backwards  在原地不回来了forwards  */
      }

      /* 其实keyframe就是慢慢改变样式的过程 */
      @keyframes run {
        /* 动画序列 */
        /* 0%是动画的 开始 */
        0% {
          transform: translateX(0px);
        }

        /* 动画关键帧 */
        50% {
          transform: translateX(200px);
        }

        /* 100%是动画的结束 */
        100% {
          transform: translateX(400px);
        }
      }

      div:hover {
        animation-play-state: paused; /* 暂停动画 */
      }
    </style>
  </head>

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

简写(推荐)

CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。