• CSS动画 && Flex弹性布局 && Less

    一、过渡效果

    1. /* 指定执行过渡的属性，属性的值必须从一个确定值，指向了另一个确定值且值不能是auto */
    2. transition-property: width, height;  
    3.  
    4. /* 执行过渡的持续时间 */
    5. transition-duration: 2s;     
    6.  
    7. /* 过渡效果的延迟 延迟几秒后再执行 */
    8. transition-delay: 2s;    
    9.  
    10. /* 执行过度的时间函数 */
    11. transition-timing-function: ease;  
    12.     - ease 先快后慢的运动  默认值
    13.     - linear 线性匀速运动
    14.     - ease-in 加速运动  
    15.     - cubic-bezier()  指定时序函数
    16.     - steps(2，start) 分步骤执行，最后一个参数可选 start 或 end 
    17.         - start 在时间开始时执行过度  
    18.         - end结束时开始过度 默认值
    19.  
    20. transition: all 2s; /* 复合属性定义 值没有先后顺序  需要注意延迟时间永远在持续时间后面*/

    二、动画效果

    首先需要设置动画的关键帧

    1. /* 关键帧的名称必须唯一 */
    2. @keyframes step1 {
    3.     /* 动画开始位置 也可以用0% 100% 10% */
    4.     from{
    5.         margin-left: 0;
    6.     }
    7.     /* 动画结束位置 */
    8.     to{
    9.         margin-left: 600px;
    10.     }
    11. }
    12. --------------------------------------
    13. @keyframes step1 {
    14.     0%{
    15.         margin-left: 0;
    16.     }
    17.     20%{
    18.         margin-left: 30px;
    19.     }
    20.     100%{
    21.         margin-left: 600px;
    22.     }
    23. }

    动画相关属性：

    1. animation-name: step1;    /* 设置动画名称，值是关键帧的名字 */
    2.  
    3. animation-duration: 2s;   /* 设置动画持续时间 */
    4.  
    5. animation-delay: 2s;      /* 设置动画延迟几秒后开始执行 */
    6.  
    7. animation-iteration-count: infinite;   /* 设置动画执行次数*/ 
    8.     - infinite  永远执行 
    9.     - 2 整数类型 即为执行次数
    10.  
    11. animation-play-state: running;  /* 设置动画当前执行状态 */
    12.     - running 运行  默认值  
    13.     - pause 暂停  
    14.  
    15. animation-direction: alternate;  /* 设置动画方向 */
    16.     - normal 正常 从起点到终点 默认值
    17.     - reverse 从终点到起点
    18.     - alternate  先从起点到终点，然后返回从终点到起点
    19.     - alternate-reverse  alternate的反转状态
    20.  
    21. animation-fill-mode: none;  /* 设置动画填充模式，动画完成后停留的位置 */
    22.     - none 初始位置 执行动画完毕后回到的位置  默认值 
    23.     - forwards 停到终止位置
    24.     - backwards 停到开始位置 
    25.     - both 结合了前两个
    26.  
    27. animation-timing-function: ease-in-out; /* 设置动画时序效果，和过渡的效果一样 */
    28.  
    29. /* 设置动画的复合属性 值没有顺序 需要注意持续时间永远在延迟时间前面 */
    30. animation: 2s;

    三、变形

    变形是通过CSS来改变元素形状或者位置，不会影响布局，也不会脱离文档流。

    1. 平移

    平移的元素位置是相对于自己原来的位置。

    1. transform: translateY(-100px);
    2.     - translateX(100px)  沿着x轴平移100px
    3.     - translateY(100px)  沿着y轴平移100px
    4.     - translateZ(100px)  沿着z轴平移100px Chrome浏览器不支持

    使用 translateZ的注意事项

    1. transform: translateZ(100px);
    2.     - 值越大离的越近，如果单纯设置这个属性 则不会有任何变化，需要设置一个视距。
    3.  
    4. html{
    5.     /* 设置初始的视距 */
    6.     perspective: 1000px;
    7. }

    ※：设置水平和垂直两个方向居中。

    1. .inner{
    2.     /* 通过这种方式进行元素的水平和垂直两个方向居中 只适用于元素长宽确定 */
    3.     position: absolute;
    4.     top: 0;
    5.     bottom: 0;
    6.     left: 0;
    7.     right: 0;
    8.     margin: auto;
    9. }
    10.  
    11. .out{
    12.     position: absolute;
    13.     top: 50%;
    14.     left: 50%;
    15.  
    16.     /*将元素向左向上拉50%的长度，适用于元素长宽不确定*/
    17.     transform: translateX(-50%) translateY(-50%);  
    18. }

    2.旋转

    1. transform: rotateX(45deg);
    2.     - rotateX(45deg)  沿着x轴旋转
    3.     - rotateY(45deg)  沿着y轴旋转
    4.     - rotateZ(45deg)  沿着z轴旋转
    5.     - deg是度数 turn 圈数

    3. 缩放

    1. transform: scaleX(20);   /* 缩放 */ 
    2.     - scaleX()  x轴缩放
    3.     - scaleY()  y轴缩放
    4.     - scale()   双向方大 
    5.  
    6. transform-origin: center;  /* 设置变形的原点 */

    四、CSS中定义变量

    1. html{
    2.     --width: 300px;   /* '--' + '变量名', 代表一个变量 */
    3.     --height: 300px;
    4.     --color: red;     /* 定义一个变量 color代表颜色值 */
    5. }
    6. .box1{
    7.     width: var(--width);           /* var(--变量名) 代表取值 */
    8.     height: var(--height);
    9.     margin: calc(var(--width) / 2);  /* calc 计算函数 */
    10.     background-color: var(--color);
    11. }

    五、Less语法

    Less是一套和CSS有点相似的语法，我们通过Less的语法写代码可以直接自动生成CSS文件，以及Less和CSS的映射文件(*.css.map)。

    引入一个 Less 文件：通过@import进行引入。

    @import "index.less";

    定义一个变量：※：在Less中可以先使用变量，然后在定义。

    1. @a: 200px;     // 定义变量 a 为200px
    2.  
    3. // 方法一：直接引用
    4. .box2{
    5.   width: @a;  // 使用的时候直接使用变量名称
    6.   height: @a;  
    7. }
    8.  
    9. // 方法二：通过 $ 引用某个属性的值, $+属性名 引用某个属性的值 
    10. .box2{
    11.   width: @a;  
    12.   height: $width;  
    13. }

    在类名上的使用：

    1. @className: box1;   // 也可以直接定义一个类名
    2.  
    3. // 如果在标识类名 则需要加上@{变量名}来表示是一个类，不能直接@变量名
    4. .@{className}{
    5.   // 需要加双引号  也是需要@{变量名}来表示路径
    6.   background-image: url("@{className}/img.png");
    7. }

    父元素选择器：

    1. .box3{
    2.   // 子元素选择器
    3.   > .box4{
    4.     // & 代表当前层级(.box3 > .box4)
    5.     &:hover{}
    6.   }
    7.  
    8.   // 后代选择器
    9.   .box4{
    10.     // & 代表当前层级(.box3 .box4)
    11.     &:hover{}
    12.   }
    13.  
    14.   // & 代表当前层级(.box3)  如果要是写 .box1:hover css会编译成 (.box1 .box1:hover)
    15.   &:hover{}
    16. }

    继承：可以在某种样式的基础上继续自定义，继承多个 class 用逗号隔开。

    1. .box1:extend(.box2, .box3){
    2.   background-color: deeppink;
    3. }

    混合：将某个样式直接引入到当前样式中。

    1. .box1{
    2.   .box2();
    3. }

    混合函数：将某个样式定义成函数的样式，定义好入参的顺序以及默认值

    1. // box3样式 需要一个参数background-color, 默认值是red
    2. .box3(@background-color: red){
    3.   background-color: @background-color;
    4. }
    5.  
    6. 使用混合函数>>>:
    7. @color: #bfa;
    8. .box7{
    9.   .box8(@color); // 按照顺序传参
    10.   .box8(@background-color: @color);   // 指定变量传参
    11. }

    六、Flex弹性布局

    设置一个元素为弹性布局

    1. div{
    2.     display: flex;         /* 开启弹性布局 块元素 */
    3.     display: inline-flex;  /* 行内元素 */
    4. }

    设置了display: flex / inline-flex 的元素为弹性容器，其直接子元素为弹性项，其子子元素就不是弹性项；一个元素既可以是弹性项，也可以是弹性容器。在弹性容器中 元素的排列方向称为主轴，与主轴垂直方向成为侧轴。

    弹性容器的样式：

    设置容器的样式(类似于浮动的样式)

    1. flex-direction: row;
    2.     - row                按照从左到右的顺序排列(类似 float: left)
    3.     - row-reverse        按照从右到左的顺序排列(类似 float: right)
    4.     - column             按照从上到下的顺序排列
    5.     - collummn-reverse   按照从下到上的顺序排列

    设置元素超出容器大小是否自动换行

    1. flex-wrap: wrap-reverse;
    2.     - no-wrap  不换行
    3.     - wrap     换行
    4.     - warp-reverse    沿着元素侧轴反向换行

    flex-flow 是 flex-direction 和 flex-wrap的简写属性，值没有顺序要求。

    flex-flow: row wrap;

    容器中主轴空白如何分配

    1. justify-content: space-evenly;
    2.     - flex-start  所有元素按着主轴起始边排列     
    3.     - flex-end    所有元素按照主轴终边排列
    4.     - center      所有元素居中排列
    5.     - space-around    空白环绕每一个元素
    6.     - space-between   空白均匀分布到元素间
    7.     - space-evenly    空白分布每一个元素单侧(兼容性差)

    弹性项的样式：

    设置弹性项的伸展系数：

    1. /* 当父元素有多余空间时子元素如何伸展 */
    2. flex-grow: 1;
    3.     - 0          不伸展
    4.     - 其他数值    父元素剩余空间会按照比例进行分配

    设置弹性项的收缩系数：

    1. /* 指定收缩系数 */
    2. flex-shrink: 0;
    3.     - 1 默认值
    4.     - 0 不收缩
    5.     - 其他整数  按照比例进行收缩

    设置弹性项的基础长度：

    1. flex-basis: 50px;   /* 指定元素主轴上的基础长度 */    
    2.     - 如果主轴是横向的则该值指定宽度 
    3.     - 如果主轴是纵向的则该值指定高度
    4.     - 默认值是auto 标识参考元素的高和宽

    弹性项的复合属性：

    1. flex: 1 1 auto;  /* 弹性元素的复合属性 */  
    2.     - 值的顺序要求:  增长 缩减 基础  
    3.     - none 代表弹性元素没有弹性 相当于  0 0 auto   
    4.     - auto 相当于 flex: 1 1 auto  
    5.     - initial 相当于 flex: initial 0 1 auto

    指定弹性项的顺序：

    1. li:nth-child(1){
    2.     order: 1;   /* 排列顺序 值越小优先级越高*/
    3. }

  • 相关阅读:
    Flutter Event 派发
    【数据分享】2023年我国科技型中小企业数据（免费获取/Excel格式/Shp格式）
    多因素身份认证 (MFA) 插件：手机验证码认证因素配置流程
    使用Docker构建轻量级Linux容器
    GitHub操作之跨团队操作
    软件之间沟通的大喇叭：Android四大组件之广播机制
    如何应用Python助你在股票中获利？
    正则表达式
    深入解析Kafka消息传递的可靠性保证机制
    1731. 每位经理的下属员工数量
  • 原文地址：https://blog.csdn.net/weixin_41678001/article/details/126610762