CSS3 动画相关属性实例大全（三)（columns、filter、flex、flex-basis 、flex-grow、flex-shrink属性）

CSS3 动画相关属性实例大全（三)

（columns、filter、flex、flex-basis 、flex-grow、flex-shrink属性）

本文目录：

一、columns属性（设置元素的列宽和列数）

二、filter属性（调整图像、背景和边框的渲染）

三、flex属性（设置弹性项目增大或缩小）

[四、flex-basis 属性（ flex 元素在主轴方向上的初始大小）](#四、flex-basis 属性（ flex 元素在主轴方向上的初始大小）)

[五、flex-grow属性（flex 项主尺寸的 flex 增长系数）](#五、flex-grow属性（flex 项主尺寸的 flex 增长系数）)

[六、flex-shrink属性（ flex 元素的收缩规则）](#六、flex-shrink属性（ flex 元素的收缩规则）)

上一篇：CSS3 动画相关属性实例大全（二)（bottom 、box-shadow、clip、color 、column-count、column-gap、column-rule、column-rule-c）

一、columns属性（设置元素的列宽和列数）

columns 用来设置元素的列宽和列数。

css 复制代码

    <style>
        #animation34 {
            width: 250px;
            height:250px;
            border: 1px solid black;
            background-color:lightblue;
            color:black;
            -webkit-animation: animation34a 1s infinite; 
            animation: animation34a 1s infinite;
        }
        @-webkit-keyframes animation34a {
            50%  {-webkit-columns: 50px 4;}
        }
        @keyframes animation34a {
            50% {columns: 50px 4; }
        }
    </style>

css 复制代码

<div id="animation34">当你孤单无助地面对强敌时，谁会是那个信得过的战友？逆境清醒送你一只守护兔，她会像你爱她一样爱着你，她并不厉害，但即使失败了，小小的她也会再度勇敢站起来，保护自己的朋友们。</div>

改变 columns 属性：间隔50px，4列

二、filter属性（调整图像、背景和边框的渲染）

filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

css 复制代码

    <style>
        img {
            -webkit-animation: animation35 1s infinite;
            animation: animation35 1s infinite;
        }
        @-webkit-keyframes animation35 {
           80% {
             -webkit-filter: grayscale(100%); 
             filter: grayscale(100%);
        }
       }
        @keyframes animation35{
        80% {
          -webkit-filter: grayscale(100%); 
          filter: grayscale(100%);
        }
     }
    </style>

css 复制代码

<div><img src="2023p1.png"  width="200" height="200"></div>

filter: blur(5px);

改变改变图片的颜色，将图像转换为灰阶

滤镜函数

注释：使用百分比值（例如 75％）的滤镜，也接受该值是十进制（例如 0.75）。

滤镜	描述
none	默认值。规定无效果。
blur(px)	对图像应用模糊效果。较大的值将产生更多的模糊。如果为指定值，则使用 0。
brightness(%)	调整图像的亮度。 * 0％将使图像完全变黑。 * 默认值是 100％，代表原始图像。 * 值超过 100％将提供更明亮的结果。
contrast(%) contrast(200%)	调整图像的对比度。 * 0％将使图像完全变黑。 * 默认值是 100％，代表原始图像。 * 超过 100％的值将提供更具对比度的结果。
drop-shadow(h-shadow v-shadow blur spread color) filter: drop-shadow(5px 5px 10px red) invert(40%);	对图像应用阴影效果。可能的值： * h-shadow - 必需。指定水平阴影的像素值。负值会将阴影放置在图像的左侧。 * v-shadow - 必需。指定垂直阴影的像素值。负值会将阴影放置在图像上方。 blur -可选。这是第三个值，单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多（阴影会变得更大更亮）。不允许负值。如果未规定值，会使用 0（阴影的边缘很锐利）。 spread - 可选。这是第四个值，单位必须用像素。正值将导致阴影扩展并增大，负值将导致阴影缩小。如果未规定值，会使用 0（阴影与元素的大小相同）。注释：Chrome、Safari 和 Opera，也许还有其他浏览器，不支持第 4 个长度；如果添加，则不会呈现。 color - 可选。为阴影添加颜色。如果未规定，则颜色取决于浏览器（通常为黑色）。这个例子创建了红色的阴影，水平和垂直方向均为 8px，带有 10px 的模糊效果： filter: drop-shadow(8px 8px 10px red); 提示：这个滤镜类似 box-shadow 属性。
grayscale(%) filter: grayscale(80%);	将图像转换为灰阶。 * 0% (0) 是默认值，代表原始图像。 * 100％将使图像完全变灰（用于黑白图像）。注释：不允许负值。
hue-rotate(deg) filter: hue-rotate(120deg);	在图像上应用色相旋转。该值定义色环的度数。默认值为 0deg，代表原始图像。注释：最大值是 360deg。
invert(%) filter: invert(75%);	反转图像中的样本。 * 0% (0) 是默认值，代表原始图像。 * 100％将使图像完全反转。注释：不允许负值。
opacity(%) filter: opacity(25%);	设置图像的不透明度级别。opacity-level 描述了透明度级别，其中： * 0% 为完全透明。 * 100% (1) 是默认值，代表原始图像（不透明）。注释：不允许负值。提示：这个滤镜类似 opacity 属性。
saturate(%) filter: saturate(30%);	设置图像的饱和度。 * 0% (0) will make the image completely un-saturated. * 100% is default and represents the original image. * Values over 100% provides super-saturated results. 注释：不允许负值。
sepia(%) filter: sepia(60%);	将图像转换为棕褐色。 * 0% (0) 是默认值，代表原始图像。 * 100％将使图像完全变为棕褐色。注释：不允许负值。
url()	url() 函数接受规定 SVG 滤镜的 XML 文件的位置，并且可以包含指向特定滤镜元素的锚点。实例： filter: url(svg-url#element-id)
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

三、flex属性（设置弹性项目增大或缩小）

|---|---|
| flex CSS 简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。初始值 flex-grow: 0 flex-shrink: 1 flex-basis: auto 可以使用一个，两个或三个值来指定 flex属性。单值语法: 值必须为以下其中之一：一个无单位数 (<number>): 它会被当作 flex:<number> 1 0; <flex-shrink>的值被假定为 1，然后<flex-basis> 的值被假定为0。一个有效的宽度 (width) 值：它会被当作 <flex-basis> 的值。关键字none，auto或initial. 双值语法: 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。第二个值必须为以下之一：一个无单位数：它会被当作 <flex-shrink> 的值。一个有效的宽度值：它会被当作 <flex-basis> 的值。三值语法：第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。第三个值必须为一个有效的宽度值，并且它会被当作 <flex-basis> 的值。 ||

|-------------------|------------------------------------------------------------------------------------------------|
| 取值 | |
| initial | 元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为"flex: 0 1 auto"。 |
| auto | 元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto". |
| none | 元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。 |
| <'flex-grow'> | 定义 flex 项目的 flex-grow 。负值无效。省略时默认值为 1。 (初始值为 0) |
| <'flex-shrink'> | 定义 flex 元素的 flex-shrink 。负值无效。省略时默认值为1。 (初始值为 1) |
| <'flex-basis'> | 定义 flex 元素的 flex-basis 属性。若值为0，则必须加上单位，以免被视作伸缩性。省略时默认值为 0。(初始值为 auto) |

css 复制代码

    <style>
        #flex-container {
          border: 1px solid black;
          width: 200px;
          height: 100px;
          display: flex;
          flex-direction: row;
        }

        #flex-container > .flex-item {
          flex: auto;
          background-color:lightblue;
        }

        #flex-container > .animation36 {
          width: 5rem;
          background-color:red;
        }
        #animation36 {
            //border: 1px solid black;
            -webkit-a10imation: animation36a 1s infinite;
            animation: animation36a 1s infinite;
        }
        @-webkit-keyframes animation36a  {
           50% {flex-basis:180px;}
        }
        @keyframes animation36a {
           50% {flex-basis:180px;}
        }
    </style>

css 复制代码

<div id="flex-container">
  <div class="flex-item" id="flex">Flex box</div>
  <div class="raw-item" id="animation36">rawi</div>
</div>

四、flex-basis 属性（ flex 元素在主轴方向上的初始大小）

flex-basis 指定了 flex 元素在主轴方向上的初始大小。

如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。

css 复制代码

  <style>
        #main {
          width: 200px;
          height: 100px;
          border: 1px solid #c3c3c3;
          display: flex;
        }

        #main div {
          flex-grow: 0;
          flex-shrink: 0;
          flex-basis: 5px;
        }
        #animation37 {
            border: 1px solid black;
            -webkit-a10imation: animation37a 1s infinite;
            animation: animation37a 1s infinite;
        }
        @-webkit-keyframes animation37a
        {  50% {flex-basis:200px;}  }
        @keyframes animation37a
        {  50% {flex-basis:200px;}  }
    </style>

css 复制代码

<div id="main">
  <div style="background-color:black;"></div>
  <div style="background-color:red;" id="animation37">flex-basisDIV</div>
</div>

flex-basis 指定了flex 元素在主轴方向上的初始大小。

如不使用 box-sizing 改变盒模型，

这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。

五、flex-grow属性（flex 项主尺寸的 flex 增长系数）

这个属性规定了 flex-grow 项在 flex 容器中分配剩余空间的相对比例。flex-grow CSS 设置 flex 项主尺寸的 flex 增长系数

主尺寸是项的宽度或高度，这取决于flex-direction值。

剩余空间是 flex 容器的大小减去所有 flex 项的大小加起来的大小。

如果所有的兄弟项目都有相同的 flex-grow 系数，那么所有的项目将剩余空间按相同比例分配，否则将根据不同的 flex-grow 定义的比例进行分配。

flex-grow 与其他的 flex 属性flex-shrink和flex-basis一起使用，通常使用flex 速记来定义，以确保所有的值都被设置。

css 复制代码

<style> 

#main {
  width: 100px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: flex;
}

#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 1;}
#main div:nth-of-type(3) {flex-grow: 1;}

#animation38
{
animation:animation38a 5s infinite;
-webkit-animation:animation38a 5s infinite;
}

@keyframes animation38a
     {50% {flex-grow:8;}}
@-webkit-keyframes animation38a
    {50% {flex-grow:8;}}
</style>

css 复制代码

<div id="main">
  <div style="background-color:black;"></div>
  <div style="background-color:lightblue;" id="animation38"></div>
  <div style="background-color:red;"></div>
</div>

flex-grow 设置 flex 项主尺寸的 flex 增长系数。

六、flex-shrink属性（ flex 元素的收缩规则）

flex-shrink 属性指定了 flex 元素的收缩规则。

flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。

css 复制代码

<style>
#content {
  display: flex;
  width: 200px;
  height:300px;
}

#content div {
  flex-basis: 120px;
  border: 1px solid rgba(0,0,0,.5);
}

.box {   flex-shrink: 1;}

.box1 {   flex-shrink: 2; }
</style>

css 复制代码

<div id="content">
  <div class="box" style="background-color:red;">flex-shrink:1</div>
  <div class="box" style="background-color:yellow;">flex-shrink:1</div>
  <div class="box" style="background-color:lightblue;">flex-shrink:1</div>
  <div class="box1" style="background-color:lightgreen;">flex-shrink:2</div>
</div>

flex-shrink 属性指定了 flex 元素的收缩规则。

未完待续》》》

推荐阅读：************************************************************************************************************************************************************************************************************************************************************CSS @规则(At-rules)详解系列索引目录****************************************************************************************************************************************************************************************************************************************************************

|-----------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------|
| | | |
| | | |
| 给照片换底色（python+opencv） | 猫十二分类 | 基于大模型的虚拟数字人__虚拟主播实例 |
| | | |
| 计算机视觉__基本图像操作（显示、读取、保存） | 直方图（颜色直方图、灰度直方图） | 直方图均衡化（调节图像亮度、对比度） |
| | | |
| 语音识别实战（python代码）(一） | 人工智能基础篇 | 计算机视觉基础__图像特征 |
| | | |