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

最新推荐文章于 2023-02-17 23:23:13 发布

浮生醉清风i

最新推荐文章于 2023-02-17 23:23:13 发布

阅读量490

点赞数

分类专栏： Front end 文章标签： css3

本文链接：https://blog.csdn.net/weixin_41678001/article/details/126610762

版权

Front end 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、过渡效果

/* 指定执行过渡的属性，属性的值必须从一个确定值，指向了另一个确定值且值不能是auto */
transition-property: width, height;  

/* 执行过渡的持续时间 */
transition-duration: 2s;     

/* 过渡效果的延迟 延迟几秒后再执行 */
transition-delay: 2s;    

/* 执行过度的时间函数 */
transition-timing-function: ease;  
    - ease 先快后慢的运动  默认值
    - linear 线性匀速运动
    - ease-in 加速运动  
    - cubic-bezier()  指定时序函数
    - steps(2，start) 分步骤执行，最后一个参数可选 start 或 end 
        - start 在时间开始时执行过度  
        - end结束时开始过度 默认值

transition: all 2s; /* 复合属性定义 值没有先后顺序  需要注意延迟时间永远在持续时间后面*/

二、动画效果

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

/* 关键帧的名称必须唯一 */
@keyframes step1 {
    /* 动画开始位置 也可以用0% 100% 10% */
    from{
        margin-left: 0;
    }
    /* 动画结束位置 */
    to{
        margin-left: 600px;
    }
}
--------------------------------------
@keyframes step1 {
    0%{
        margin-left: 0;
    }
    20%{
        margin-left: 30px;
    }
    100%{
        margin-left: 600px;
    }
}

动画相关属性：

animation-name: step1;    /* 设置动画名称，值是关键帧的名字 */

animation-duration: 2s;   /* 设置动画持续时间 */

animation-delay: 2s;      /* 设置动画延迟几秒后开始执行 */

animation-iteration-count: infinite;   /* 设置动画执行次数*/ 
    - infinite  永远执行 
    - 2 整数类型 即为执行次数
 
animation-play-state: running;  /* 设置动画当前执行状态 */
    - running 运行  默认值  
    - pause 暂停  

animation-direction: alternate;  /* 设置动画方向 */
    - normal 正常 从起点到终点 默认值
    - reverse 从终点到起点
    - alternate  先从起点到终点，然后返回从终点到起点
    - alternate-reverse  alternate的反转状态

animation-fill-mode: none;  /* 设置动画填充模式，动画完成后停留的位置 */
    - none 初始位置 执行动画完毕后回到的位置  默认值 
    - forwards 停到终止位置
    - backwards 停到开始位置 
    - both 结合了前两个

animation-timing-function: ease-in-out; /* 设置动画时序效果，和过渡的效果一样 */

/* 设置动画的复合属性 值没有顺序 需要注意持续时间永远在延迟时间前面 */
animation: 2s;

三、变形

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

1. 平移

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

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

使用 translateZ的注意事项

transform: translateZ(100px);
    - 值越大离的越近，如果单纯设置这个属性 则不会有任何变化，需要设置一个视距。

html{
    /* 设置初始的视距 */
    perspective: 1000px;
}

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

.inner{
    /* 通过这种方式进行元素的水平和垂直两个方向居中 只适用于元素长宽确定 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.out{
    position: absolute;
    top: 50%;
    left: 50%;

    /*将元素向左向上拉50%的长度，适用于元素长宽不确定*/
    transform: translateX(-50%) translateY(-50%);  
}

2.旋转

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

3. 缩放

transform: scaleX(20);   /* 缩放 */ 
    - scaleX()  x轴缩放
    - scaleY()  y轴缩放
    - scale()   双向方大 

transform-origin: center;  /* 设置变形的原点 */

四、CSS中定义变量

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

五、Less语法

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

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

@import "index.less";

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

@a: 200px;     // 定义变量 a 为200px

// 方法一：直接引用
.box2{
  width: @a;  // 使用的时候直接使用变量名称
  height: @a;  
}

// 方法二：通过 $ 引用某个属性的值, $+属性名 引用某个属性的值 
.box2{
  width: @a;  
  height: $width;  
}

在类名上的使用：

@className: box1;   // 也可以直接定义一个类名

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

父元素选择器：

.box3{
  // 子元素选择器
  > .box4{
    // & 代表当前层级(.box3 > .box4)
    &:hover{}
  }

  // 后代选择器
  .box4{
    // & 代表当前层级(.box3 .box4)
    &:hover{}
  }

  // & 代表当前层级(.box3)  如果要是写 .box1:hover css会编译成 (.box1 .box1:hover)
  &:hover{}
}

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

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

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

.box1{
  .box2();
}

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

// box3样式 需要一个参数background-color, 默认值是red
.box3(@background-color: red){
  background-color: @background-color;
}

使用混合函数>>>:
@color: #bfa;
.box7{
  .box8(@color); // 按照顺序传参
  .box8(@background-color: @color);   // 指定变量传参
}

六、Flex弹性布局

设置一个元素为弹性布局

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

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

弹性容器的样式：

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

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

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

flex-wrap: wrap-reverse;
    - no-wrap  不换行
    - wrap     换行
    - warp-reverse    沿着元素侧轴反向换行

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

flex-flow: row wrap;

容器中主轴空白如何分配

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

弹性项的样式：

设置弹性项的伸展系数：

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

设置弹性项的收缩系数：

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

设置弹性项的基础长度：

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

弹性项的复合属性：

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

指定弹性项的顺序：

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