CSS3 动画相关属性实例大全（一)（@keyframes ，background属性，border 属性）

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

（@keyframes ，background属性，border 属性）

本文目录：

零、时光宝盒

[一、CSS3 动画基本概念](#一、CSS3 动画基本概念)

（1）、CSS3的动画基本属性

[（2）、@keyframes 规则和所有动画属性](#（2）、@keyframes 规则和所有动画属性)

[二、CSS 中有动画效果的属性图例大全](#二、CSS 中有动画效果的属性图例大全)

2.1、background属性

（1）、background属性（集中定义各种背景属性）

（2）、background-color属性（设置元素的背景色）

（3）、background-position属性（为背景图片设置初始位置）

（4）、background-size属性（设置背景图片大小）

[2.2、border 属性](#2.2、border 属性)

[（1）、border 属性（设置各种单独的边界属性的简写属性）](#（1）、border 属性（设置各种单独的边界属性的简写属性）)

（2）、border-bottom属性（下边框的所有属性）

[（3）、border-bottom-color 属性（设置元素底部边框的颜色）](#（3）、border-bottom-color 属性（设置元素底部边框的颜色）)

（4）、border-bottom-left-radius属性（元素左下角的圆角）

（5）、border-bottom-right-radius属性（元素右下角的圆角）

（6）、border-bottom-width属性（元素的底部边框宽度）

（7）、border-color属性（设置元素四个边框颜色的快捷属性）

（9）、border-left-color属性（置元素的左边框颜色）

（10）、border-left-width属性（设置盒子左边框的宽度）

（11）、border-right属性（元素的右边的边框border）

[（12）、border-right-color 属性（元素的右边的边框border颜色）](#（12）、border-right-color 属性（元素的右边的边框border颜色）)

（13）、border-right-width属性（设置盒子右边框的宽度）

（14）、border-spacing属性（指定相邻单元格边框之间的距离）

（15）、border-top属性（元素的上方的边框border）

（16）、border-top-color属性（元素的上方的边框border颜色）

（17）、border-top-left-radius属性（元素左上角的圆角效果）

（18）、border-top-right-radius属性（元素右上角的圆角效果）

（19）、border-top-width属性（盒模型的上边框的宽度）

---

零、时光宝盒

**（**https://blog.csdn.net/weixin_69553582 逆境清醒）

我不算真的认识你们，我不知道你们详细真实身份，也不知道你们现在在哪里，在做什么，你们也未必记得我或者知道我的存在。但我知道你们在经历什么，因为我们绝大部分人都在经历类似的事情，虽然程度和方式不同，但本质是一样的。我没有能够彻底解决这些问题的能力，无论你们在困境下选择做什么去缓解伤害都好，都请一定要想办法及时调节好自己的心态，别轻易放弃自己。

心理学上有个词，叫"野马效应"。

在非洲草原上有一种吸血蝙蝠，常常会盯在野马腿上吸血。不管野马跑的多快，或者如何的暴怒，都无法摆脱蝙蝠的纠缠，不少野马因此致死。

其实这种吸血蝙蝠，吸血量并不足以让野马致死。而野马的真正死因，是为摆脱蝙蝠而产生的暴怒和不停狂奔，严重危害自身健康。

困境中，很多时候打败我们的并不是事情本身，而是因为这个事情产生的各种负面情绪。互勉。

逆境清醒

2024.10.19

一、CSS3 动画基本概念

（1）、CSS3的动画基本属性

@keyframes是创建动画，规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

|--------------------|--------------------------------------------------|
| 语法：@keyframes animationname {keyframes-selector {css-styles;}} ||
| animationname | 必需的。定义animation的名称。 |
| keyframes-selector | 必需的。动画持续时间的百分比。 0-100% from (和0%相同) to (和100%相同) |
| | |
| | |

实例：

|-------------------------------------|----------------------------------------------------------------------------------|
| 小球在移动过程中不停变换颜色：红色-》黄色-》蓝色-》-绿色》-》紫色 | |

相应css:

<style> 
        div {
            margin: auto;
            width: 50px;
            height: 50px;
            background: red;
            position: relative;
            border-radius: 50% 50% 50% 50%;
            animation-name: animationexam;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-delay: 1s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-play-state: running;
            /* Safari and Chrome: */
            -webkit-animation-name: animationexam;
            -webkit-animation-duration: 2s;
            -webkit-animation-timing-function: linear;
            -webkit-animation-delay: 1s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-play-state: running;
        }

        @keyframes animationexam {
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }

            25% {
                background: yellow;
                left: 100px;
                top: 0px;
            }

            50% {
                background: blue;
                left: 100px;
                top: 100px;
            }

            75% {
                background: green;
                left: 0px;
                top: 100px;
            }

            100% {
                background: purple;
                left: 0px;
                top: 0px;
            }
        }

        @-webkit-keyframes animationexam /* Safari and Chrome */
        {
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }

            25% {
                background: yellow;
                left: 100px;
                top: 0px;
            }

            50% {
                background: blue;
                left: 100px;
                top: 100px;
            }

            75% {
                background: green;
                left: 0px;
                top: 100px;
            }

            100% {
                background: purple;
                left: 0px;
                top: 0px;
            }
        }
</style>

不同浏览器所支持的：

@keyframes animationexam

@-webkit-keyframes animationexam /* Safari and Chrome */

@-moz-keyframes animationexam /* Firefox */

@-o-keyframes animationexam /* Opera */

（2）、@keyframes 规则和所有动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

|---------------------------|-------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 属性 | 描述 | 默认 |
| animation-name | 规定 @keyframes 动画的名称 | * animationname 定义animation的名称。 * keyframes-selector 动画持续时间的百分比。 合法值：0-100% from (和0%相同)to (和100%相同)， 可以用一个动画keyframes-selectors。 * css-styles 一个或多个合法的CSS样式属性 |
| animation-duration | 定义动画完成一个周期需要多少秒或毫秒。 | 默认是 0 * time 设置一个动画周期的时间间隔（以秒或毫秒为单位）。 默认值为0，表示不会有动画 |
| animation-timing-function | 规定动画的速度曲线。 | 默认是 "ease" * linear 动画从开始到结束具有相同的速度。 * ease 动画有一个缓慢的开始，然后快，结束慢。 * ease-in 动画有一个缓慢的开始。 * ease-out 动画结束缓慢。 * ease-in-out 动画具有缓慢的开始和慢的结束。 * cubic-bezier(n,n,n,n) 在立方贝塞尔函数中定义速度函数。 可能的值是从0到1的数字值。 |
| animation-delay | 规定动画何时开始 值单位可以是秒或毫秒。 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。 | 默认是 0 * time 可选。 定义动画开始前等待的时间， 以秒（s）或毫秒（ms）计。 允许负值 |
| animation-iteration-count | 规定动画被播放的次数。 定义动画应该播放多少次 | 默认是 1 * n 定义播放动画多少次。 默认值为1 * infinite 指定动画应该播放无限次（永远） |
| animation-direction | 规定动画是否在下一周期逆向地播放。 属性定义是否循环交替反向播放动画。 如果动画被设置为只播放一次，该属性将不起作用。 | 默认是 "normal"。 * normal 默认值。 动画按正常播放。 * reverse 动画反向播放。 * alternate 奇数次（1、3、5...）正向播放， 偶数次（2、4、6...）反向播放。 * alternate-reverse 奇数次（1、3、5...）反向播放， 偶数次（2、4、6...）正向播放。 * initial 设置该属性为它的默认值。 * inherit 从父元素继承该属性。 |
| animation-play-state | 规定动画是否正在运行或暂停。在JavaScript中使用此属性在一个周期中暂停动画。 | 默认是 "running"。 * paused 指定暂停动画 * running 指定正在运行的动画 |

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

二、CSS 中有动画效果的属性图例大全

一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。

动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。

<style></style>部分是css定义；

<div id="animation1"></div>部分是相关的 html 使用方法；

右侧是该例的动态截图，阅读本文时请留意。

2.1、background属性

（1）、background属性（集中定义各种背景属性）

background 属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。

此属性是一个 简写属性，可以在一次声明中定义一个或多个属性：background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size，和 background-attachment。

|-----------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------|
| 属性 | | 属性的值 |
| background | 集中定义各种背景属性 设置背景属性样式简写： 标签名{background: 背景颜色 背景图像 背景重复方式 背景定位} 示例：#id{background: pink url("背景图像.png") no-repeat center center} | |
| background-clip | | |
| background-color | 设置元素的背景色 background-color：颜色值 | 颜色值 或关键字"transparent" |
| background-image | 设置元素的背景图片， 标签名{background-image: url("图像路径")} 例如： background-image: url('2023p1.png'); 四种值表示方式： ①auto：默认值，使用背景图片保持原样 ②percentage：当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的 ③cover：整个背景图片放大填充了整个元素 ④contain：让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域 | 图像路径 |
| background-origin | | |
| background-position | 背景定位，为背景图片设置初始位置 background-position: 值 值 三种值表示方式： ①X Y：单位：px，Xpos表示水平位置，Ypos表示垂直位置 ②X% Y%：使用百分比表示背景的位置 ③X、Y方向关键词：X水平方向的关键词：left、center、right;Y垂直方向的关键词：top、center、bottom | 三种值表示方式： background-position 背景定位（X Y、X% Y%、X、Y方向关键词） |
| background-repeat | 背景重复方式。 四种属性表示方式： ①repeat：沿水平和垂直两个方向平铺 ②no-repeat：不平铺，即只显示一次 ③repeat-x：只沿水平方向平铺 ④repeat-y：只沿垂直方向平铺 | ①repeat ②no-repeat ③repeat-x ④repeat-y |
| background-size | background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。例如： background-size: 80px 80px; | background-size 背景尺寸（默认、百分百、放大填充、自适应比例） |
| background-attachment | | |
| | 背景渐变(线性渐变)： linear-gradient 背景渐变（线型渐变） 标签名{background: linear-gradient(渐变方向, 第一种颜色,第二种颜色......)} 示例：{background: linear-gradient(to left, blue,red)} | |

<style>
        #animation1 {
            width: 200px;
            height: 200px;
            background: yellow;
            -webkit-animation: animation1a 2s infinite;
            animation: animation1a 2s infinite;
        }

          /* Chrome, Safari, Opera */
        @-webkit-keyframes animation1a {
            50% { background: blue bottom left/50px 50px; }
        }

        /* Standard syntax */
        @keyframes animation1a  {
            50% { background: blue bottom left/50px 50px; }
        }
</style>

<div id="animation1">逆境清醒</div>

运行效果图：

逐步改变背景颜色属性：由黄色变蓝色，再由蓝色变黄色

（2）、background-color属性（设置元素的背景色）

background-color 会设置元素的背景色，

属性的值为颜色值或关键字"transparent"二者选其一。

    <style>
        #animation2 {
            width: 200px;
            height: 200px;
            background: green;
            animation: animation2a 2s infinite;
        }

        @keyframes animation2a {
            50% {  background-color: yellow;  }
        }
    </style>

<div id="animation2">逆境清醒</div>

运行效果图：

逐步改变背景颜色属性：由绿色变黄色，再由黄色变绿色

（3）、background-position属性（为背景图片设置初始位置）

background-position CSS 属性为每一个背景图片设置初始位置。

这个位置是相对于由 background-origin 定义的位置图层的。

    <style>
        #animation3 {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-image: url('2023p1.png');
            background-position: top left;
            -webkit-animation: animation3a 1s infinite;
            animation: animation3a 1s infinite;
        }

        @-webkit-keyframes animation3a {
            50% { background-position: bottom right;  }
        }

        @keyframes animation3a {
            50% { background-position: bottom right;  }
    </style>

<div id="animation3">逆境清醒</div>

运行效果图：

改变 background-position 属性，

从 "top left" 到 "bottom right",

然后回到 "top left"。

（4）、background-size属性（设置背景图片大小）

background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

    <style>
        #animation4 {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-image: url('2023p1.png');
            background-size: 80px 80px;
            -webkit-animation: animation4a 1s infinite;
            animation: animation4a 1s infinite;
        }

        @-webkit-keyframes animation4a {
            50% { background-size: 200px 200px; }
        }

        @keyframes animation4a {
            50% { background-size: 200px 200px; }
    </style>

<div id="animation4">逆境清醒</div>

运行效果图：

逐步改变 background-size 属性，

从 "80px 80px" 到 "200px 200px"，然后回到 "80px 80px"

2.2、border 属性

（1）、border 属性（设置各种单独的边界属性的简写属性）

border 属性是一个用于设置各种单独的边界属性的简写属性。

border 可以用于设置一个或多个以下属性的值：border-width、border-style、border-color。

    <style>
        #animation5 {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            -webkit-animation: animation5a 1s infinite;
            animation: animation5a 1s infinite;
        }

        @-webkit-keyframes animation5a {
            50% { border: 20px solid red; }
        }

        @keyframes animation5a {
            50%{border: 20px solid red; }
            }
    </style>

<div id="animation5">逆境清醒</div>

运行效果图：

逐步改变 border 属性:

从 "1px 黑色" 到 "20px 红色",

然后回到 "1px 黑色"

（2）、border-bottom属性（下边框的所有属性）

border-bottom 简写属性把下边框的所有属性：border-bottom-color，border-bottom-style 与 border-bottom-width 设置到了一个声明中。

    <style>
        #animation6 {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            -webkit-animation: animation6a 1s infinite; 
            animation: animation6a 1s infinite;
        }

          @-webkit-keyframes animation6a {
            50% { border-bottom: 15px solid gold;  }
        }

          @keyframes animation6a {
            50% { border-bottom: 15px solid gold;   }
        }
    </style>

<div id="animation6">逆境清醒</div>

运行效果图：

border-bottom 属性

是所有底部边框属性的简写。

逐步改变 border-bottom 属性:

从 "1px 黑色" 到 "15px 金色",

然后回到 "1px 黑色"

（3）、border-bottom-color 属性（设置元素底部边框的颜色）

border-bottom-color 属性设置一个元素底部边框的颜色。

CSS 简写属性 border-color 或 border-bottom 更方便实用。

    <style>
        #animation7 {
            width: 150px;
            height: 150px;
            border: 15px solid black;
            -webkit-animation: animation7a 1s infinite; 
            animation: animation7a 1s infinite;
        }
        @-webkit-keyframes animation7a {
            50% { border-bottom-color: gold;  }
        }
        @keyframes animation7a {
            50% {  border-bottom-color: gold;  }
        }
    </style>

<div id="animation7">逆境清醒</div>

运行效果图：

改变 border-bottom-color 属性:

从 "1px 黑色" 到 "15px 金色",

然后回到 "1px 黑色"

（4）、border-bottom-left-radius属性（元素左下角的圆角）

border-bottom-left-radius 属性设置元素左下角的圆角。

圆角可以是圆或椭圆的一部分，或者当其中一个值为 0 时，圆角将不被设置，这时这个角将展示为直角。

一个无论是图像或颜色的背景，都会在边框上被裁剪，即使背景是圆角的;

裁剪的确切位置由 background-clip 属性定义

如果该属性的值没有被一个在**border-bottom-left-radius** 属性后，作用于当前元素上的border-radius简写属性设置，那么该属性值将会被shorthand property重置为初始值。

/* 圆形 */

/* border-bottom-left-radius: radius */

border-bottom-left-radius: 3px;

/* 椭圆形 */

/* border-bottom-left-radius: 水平方向 垂直方向 */

border-bottom-left-radius: 0.5em 1em;

border-bottom-left-radius: inherit;

    <style>
        #animation8 {
            width: 150px;
            height: 150px;
            border: 5px solid black;
            -webkit-animation: animation8a 1s infinite; 
            animation: animation8a 1s infinite;
        }
        @-webkit-keyframes animation8a {
            50% { border-bottom-left-radius: 100px;}
        }
        @keyframes animation8a {
            50% {border-bottom-left-radius: 100px;}
        }
    </style>

<div id="animation8">逆境清醒</div>

运行效果图：

改变 border-bottom-left-radius

属性（从 0 到 100px）

（5）、border-bottom-right-radius属性（元素右下角的圆角）

    <style>
        #animation9 {
            width: 150px;
            height: 150px;
            border: 5px solid black;
            -webkit-animation: animation9a 1s infinite; 
            animation: animation9a 1s infinite;
        }
        @-webkit-keyframes animation8a {
            50% { border-bottom-right-radius: 100px;}
        }
        @keyframes animation9a {
            50% {border-bottom-right-radius: 100px;}
        }
    </style>

<div id="animation9">逆境清醒</div>

运行效果图：

改变 border-bottom-right-radius

属性（从 0 到 100px）

（6）、border-bottom-width属性（元素的底部边框宽度）

border-bottom-width 设置一个元素的底部边框宽度。

    <style>
        #animation10 {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            -webkit-animation: animation10 1s infinite; 
            animation: animation10a 1s infinite;
        }
        @-webkit-keyframes animation10a {
            50% { border-bottom-width: 10px;}
        }
        @keyframes animation10a {
            50% {border-bottom-width: 10px;}
        }
    </style>

<div id="animation10">逆境清醒</div>

运行效果图：

改变 border-bottom-width 属性

（从 0 到 10px）

（7）、border-color属性（设置元素四个边框颜色的快捷属性）

CSS 属性 border-color 是一个用于设置元素四个边框颜色的快捷属性： border-top-color、border-right-color、border-bottom-color、border-left-color。

    <style>
        #animation11 {
            width: 150px;
            height: 150px;
            border: 10px solid black;
            -webkit-animation: animation11a 1s infinite; 
            animation: animation11a 1s infinite;
        }
        @-webkit-keyframes animation11a {
            50%  {border-color: red;}
        }
        @keyframes animation11a {
            50% {border-color: red;}
        }
    </style>

<div id="animation11">逆境清醒</div>

运行效果图：

改变 border-color 属性，从black 到 red

（8）、border-left属性（元素左边框所有属性）

这些属性都是在描述一个元素的左边的边框border。

border-left 是属性border-left-color, border-left-style, 和border-left-width的三者的缩写。

    <style>
        #animation12 {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            -webkit-animation: animation12a 1s infinite; 
            animation: animation12a 1s infinite;
        }
        @-webkit-keyframes animation12a {
            50%  {border-left: 10px solid red;}
        }
        @keyframes animation12a {
            50% {border-left: 10px solid red;}
        }
    </style>

<div id="animation12">逆境清醒</div>

运行效果图：

改变 border-left 属性

从black 到 red

（9）、border-left-color属性（置元素的左边框颜色）

border-left-color 属性设置元素的左边框颜色。

大数情况下border-color 或 border-left 使用更加普遍。

    <style>
        #animation13 {
            width: 150px;
            height: 150px;
            border: 10px solid black;
            -webkit-animation: animation13a 1s infinite; 
            animation: animation13a 1s infinite;
        }
        @-webkit-keyframes animation13a {
            50%  {border-left-color: gold;}
        }
        @keyframes animation13a {
            50% {border-left-color: gold;}
        }
    </style>

<div id="animation13">逆境清醒</div>

运行效果图：

改变 border-left-color 属性，从 black 到 gold

（10）、border-left-width属性（设置盒子左边框的宽度）

border-left-width 属性用来设置盒子的左边框的宽度

<br-width>定义边框的宽度，或者作为显性非负的长度值 <length> 或者是关键字。

如果他是一个关键字，它必须是下列值的一种：

thin 一个细边框

medium 一个中等边框

thick 一个粗边框

    <style>
        #animation14 {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            -webkit-animation: animation14 1s infinite; 
            animation: animation14 1s infinite;
        }
        @-webkit-keyframes animation14 {
            50%  {border-left-width:10px;}
        }
        @keyframes animation14 {
            50% {border-left-width:10px;}
        }
    </style>

<div id="animation14">逆境清醒</div>

运行效果图：

改变 border-left-width 属性

从 1px 到 10px

（11）、border-right属性（元素的右边的边框border）

border-right 是属性border-right-color, border-right-style, 和border-right-width的三者的缩写。

这些属性都是在描述一个元素的右边的边框border。

border-right 总是会设置该缩写属性所包含的全部属性值，即使开发者并没有一一指定这些值。

CSS 缩写属性会给没有被定义的属性一个默认的属性值。

    <style>
        #animation15 {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            -webkit-animation: animation15 1s infinite; 
            animation: animation15 1s infinite;
        }
        @-webkit-keyframes animation15 {
            50%  {border-right: 10px solid gold;}
        }
        @keyframes animation15 {
            50% {border-right: 10px solid gold;}
        }
    </style>

<div id="animation15">逆境清醒</div>

运行效果图：

改变 border-right 属性

从 1px 到 10px

（12）、border-right-color 属性（元素的右边的边框border颜色）

    <style>
        #animation16 {
            width: 150px;
            height: 150px;
            border: 10px solid black;
            -webkit-animation: animation16 1s infinite; 
            animation: animation16 1s infinite;
        }
        @-webkit-keyframes animation16 {
            50%  {border-right-color:gold;}
        }
        @keyframes animation16 {
            50% {border-right-color:gold;}
        }
    </style>

<div id="animation16">逆境清醒</div>

运行效果图：

改变 border-right-color 属性

从 black 到 gold

（13）、border-right-width属性（设置盒子右边框的宽度）

    <style>
        #animation17 {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            -webkit-animation: animation17 1s infinite; 
            animation: animation17 1s infinite;
        }
        @-webkit-keyframes animation17 {
            50%  {border-right-width:10px;}
        }
        @keyframes animation17 {
            50% {border-right-width:10px;}
        }
    </style>
    <style>

运行效果图：

改变 border-right-width 属性：从 1px 到 10px:

（14）、border-spacing属性（指定相邻单元格边框之间的距离）

border-spacing 属性指定相邻单元格边框之间的距离（只适用于 边框分离模式 ）。

相当于 HTML 中的 cellspacing 属性，但是第二个可选的值可以用来设置不同于水平间距的垂直间距。

border-spacing 值也适用于表格的外层边框上，即表格的边框和第一行的、第一列的、最后一行的、最后一列的单元格之间的间距是由表格相应的（水平的或垂直的）边框间距（border-spacing）和相应的（上，右，下或左）内边距之和。

该属性只适用于 border-collapse 值是 separate 的时候。

<style> 
table,th,td {  border: 1px solid black;color:#000000}
#animation18 {
    border-spacing: 2px;
    -webkit-animation: animation18 5s infinite; 
    animation: animation18 1s infinite;
}
@-webkit-keyframes animation18 {
    50% {border-spacing: 20px;}
}
@keyframes animation18{
    50% {border-spacing: 20px;}
}
</style>

<table id="animation18">
  <tr>
    <th>苹果</th>
    <td>红色</td>
  </tr>
  <tr>
    <th>草莓</th>
    <td>红色</td>
  </tr>
</table>

运行效果图：

改变 border-spacing 属性，从 2px 到 20px

（15）、border-top属性（元素的上方的边框border）

border-top是属性 border-top-color, border-top-style, 和border-top-width 的三者的缩写。

这些属性都是在描述一个元素的上方的边框border。

    <style>
        #animation19 {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            -webkit-animation: animation19a 1s infinite; 
            animation: animation19a 1s infinite;
        }
        @-webkit-keyframes animation19a {
            50%  {border-top: 10px solid gold;}
        }
        @keyframes animation19a {
            50% {border-top: 10px solid gold;}
        }
    </style>

<div id="animation19">逆境清醒</div>

运行效果图：

改变 border-top 属性，从black到gold

（16）、border-top-color属性（元素的上方的边框border颜色）

    <style>
        #animation20 {
            width: 150px;
            height: 150px;
            border: 10px solid black;
            -webkit-animation: animation20a 1s infinite; 
            animation: animation20a 1s infinite;
        }
        @-webkit-keyframes animation20a{
            50%  {border-top-color:gold;}
        }
        @keyframes animation20a {
            50% {border-top-color:gold;}
        }
    </style>

<div id="animation20">逆境清醒</div>

运行效果图：

改变 border-top-color 属性，从black到gold

（17）、border-top-left-radius属性（元素左上角的圆角效果）

border-top-left-radius 用来设置元素左上角的圆角效果。

这段圆弧（角）可以是圆或椭圆的一部分。

如果其中有一个值为 0，那么将无圆角效果。

    <style>
        #animation21 {
            width: 150px;
            height: 150px;
            border: 5px solid black;
            -webkit-animation: animation21a 1s infinite; 
            animation: animation21a 1s infinite;
        }
        @-webkit-keyframes animation21a {
            50%  {border-top-left-radius: 100px;}
        }
        @keyframes animation21a {
            50% {border-top-left-radius: 100px;}
        }
    </style>

<div id="animation21">逆境清醒</div>

运行效果图：

改变 border-top-left-radius 属性

从 0 到 100px

（18）、border-top-right-radius属性（元素右上角的圆角效果）

    <style>
        #animation22 {
            width: 150px;
            height: 150px;
            border: 5px solid black;
            -webkit-animation: animation22a 1s infinite; 
            animation: animation22a 1s infinite;
        }
        @-webkit-keyframes animation22a {
            50%  {border-top-right-radius: 100px;}
        }
        @keyframes animation22a {
            50% {border-top-right-radius: 100px;}
        }
    </style>

<div id="animation22">逆境清醒</div>

运行效果图：

改变 border-top-right-radius 属性，从 0 到 100px

（19）、border-top-width属性（盒模型的上边框的宽度）

border-top-width 是用于设置盒模型的上边框的宽度

    <style>
        #animation23 {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            -webkit-animation: animation23a 1s infinite; 
            animation: animation23a 1s infinite;
        }
        @-webkit-keyframes animation23a {
            50%  {border-top-width: 10px;}
        }
        @keyframes animation23a {
            50% {border-top-width: 10px;}
        }
    </style>

<div id="animation23">逆境清醒</div>

运行效果图：

改变 border-top-width 属性:：从 1 到 10px

未完待续》》》

• 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 属性）

推荐阅读：************************************************************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 启动闪退问题解决集（八大类详细） |
| | | |