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

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

本文目录：

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

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

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

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

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

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

---

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

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

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

    <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>

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

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

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

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

    <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>

<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)

    <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>

<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）的尺寸。

  <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>

<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 速记来定义，以确保所有的值都被设置。

<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>

<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 属性不起作用。

<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>

<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 元素的收缩规则。

  

 CSS3 动画相关属性实例大全系列目录：

• 1、CSS3 动画相关属性实例大全（一)（@keyframes ，background属性，border 属性）
• 2、CSS3 动画相关属性实例大全（二)（bottom 、box-shadow、clip、color 、column-count、column-gap、column-rule、column-rule-color、column-rule-width、column-width 属性）
• 3、CSS3 动画相关属性实例大全（三)（columns、filter、flex、flex-basis 、flex-grow、flex-shrink属性）
• 4、CSS3 动画相关属性实例大全（四)（font、height、left、letter-spacing、line-height 属性）
• 5、CSS3 动画相关属性实例大全（五)（margin 、max-height、max-width、min-height、min-width、opacity 、order 属性）
• 6、CSS3 动画相关属性实例大全（六)（outline 、outline-color 、outline-offset、outline-width、padding、padding-bottom、padding-left 、padding-right 、padding-top、perspective属性）
• 7、

CSS3 动画相关属性实例大全（七)（perspective-origin、right、text-decoration-color 、text-indent、text-shadow、top 、transform、transform-origin、vertical-align、visibility 、width、word-spacing、z-index属性）

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

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

​​​​​
matplotlib 自带绘图样式效果展示速查（28种，全）
​​​​​
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）
​​​​​	​​​​​	​​​​​
立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦	Python 3D可视化（一）	让你的作品更出色——词云Word Cloud的制作方法（基于python，WordCloud，stylecloud)
​​​​​	​​​​​	​​​​​
python Format()函数的用法___实例详解（一）(全，例多）___各种格式化替换，format对齐打印	用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）	python爱心源代码集锦（18款）
​​​​​	​​​​​	​​​​​
Python中Print()函数的用法___实例详解(全，例多）	Python函数方法实例详解全集(更新中...)	《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念
​​​​​	​​​​​
用代码过中秋，python海龟月饼你要不要尝一口？	python练习题目录
​​​​​	​​​​​	​​​​​
草莓熊python turtle绘图（风车版）附源代码	​草莓熊python turtle绘图代码（玫瑰花版）附源代码	​草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码
​​​​​	​​​​​
巴斯光年python turtle绘图__附源代码	皮卡丘python turtle海龟绘图（电力球版）附源代码

​​​​​	​​​​​	​​​​​
Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）	色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)	2024年6月多家权威机构____编程语言排行榜__薪酬状况
​​​​​​	​​​​​	​​​​​
手机屏幕坏了____怎么把里面的资料导出（18种方法）	【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)	查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决

​​​​​
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）
​​​​​	​​​​​	​​​​​
2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特	别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(4套)	SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）
​​​​​	​​​​​	​​​​​
【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）	HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)	2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）

​​​​​	​​​​​	​​​​​
tomcat11、tomcat10 安装配置（Windows环境）（详细图文）	Tomcat端口配置（详细）	Tomcat 启动闪退问题解决集（八大类详细）