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

news2024/10/19 6:46:51

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

(CSS 中有动画效果的属性图例大全)

本文目录：

 

零、时光宝盒

一、CSS3 动画基本概念

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

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

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

2.1、background属性

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

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

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

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

2.2、border 属性

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

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

（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颜色）

（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  逆境清醒）

2ab463de26a541818271efa176656ae6.png

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

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

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

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

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

 

    逆境清醒

2024.10.19

7f8eafc867aa425cab7d368ee0eb4dd8.gif

 

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

 

未完待续》》》

 

 

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

27d5b50d93a089da35ee1a28905f9719.jpeg​​​

c64d8b4d0b6842ebe1196c0b1e3fba51.jpeg​​​

a136a43cd0015088d4ce37b1bb653533.jpeg​​​

给照片换底色（python+opencv）猫十二分类基于大模型的虚拟数字人__虚拟主播实例

0f92b28e915ca3cc26cfaaf47c5fc62d.jpeg​​​​​

5d2b51be3e7e932be95355088e17d524.jpeg​​​​​

3cf3fe3c1a186bfcbf12d4755b8950ae.jpeg​​​​​

计算机视觉__基本图像操作（显示、读取、保存）直方图（颜色直方图、灰度直方图）直方图均衡化（调节图像亮度、对比度）

849b7a72434213407c862c8f8e071a22.png​​​​​

9412a31659ba6db83d806c3f354dd1c0.png​​​​​

fb29a865f75af8352dca5e3d56a09004.png​​​​​

语音识别实战（python代码）(一）

 人工智能基础篇

 计算机视觉基础__图像特征

637c349e8206c0651d1f2751ba128912.png​​​​​

 matplotlib 自带绘图样式效果展示速查（28种，全）

ec9793633e16de7b52fbf0b74ecfa2f3.png​​​​​

Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）

6e420cca6a1313b93948785f689f5723.png​​​​​

1da3f182e081ad8f3cfcf53013909b8b.png​​​​​

ca733c1a99c6457a762d0e503855ce79.png​​​​​

立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦

 Python 3D可视化（一）

让你的作品更出色——词云Word Cloud的制作方法（基于python，WordCloud，stylecloud)

f92dfeb72ec683025a63db2fe8a26492.png​​​​​

1b2a866ebb074a1e5859dad42c435d5c.jpeg​​​​​

8207b63755bf37b10807a046080f14df.png​​​​​

 python Format()函数的用法___实例详解（一）(全，例多）___各种格式化替换，format对齐打印

 用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）

python爱心源代码集锦（18款）

b97d56fe7e3ce6234cb182ad86fef4ed.jpeg​​​​​

6871f222e7db3f8ce83336ad50311c3a.png​​​​​

b89ed1147e8a76e6c64b812d65e8f2ef.png​​​​​

 Python中Print()函数的用法___实例详解(全，例多）

 Python函数方法实例详解全集(更新中...)

 《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念

7090a17485b11d9da69e37e5756c6910.png​​​​​

50313523c8c19f29270fb1110fe66ae9.png​​​​​

用代码过中秋，python海龟月饼你要不要尝一口？

 python练习题目录

4c77c7a60782637db9e27b3deec7abee.png​​​​​

c397ed3a22c7885194eb92b5b3883322.png​​​​​

a18fbd27f15eaa98f0bb5a4fed8cbd8b.png​​​​​

草莓熊python turtle绘图（风车版）附源代码

 ​草莓熊python turtle绘图代码（玫瑰花版）附源代码

 ​草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码

36e2af3bf474c59b9c430b223417793b.png​​​​​

542dbf91cfafa23e1ccdee94a7b22397.png​​​​​

 巴斯光年python turtle绘图__附源代码

皮卡丘python turtle海龟绘图（电力球版）附源代码

68b0f4704053ab870c16bb4e37897d63.png​​​​​

25ff4b8d741f0942c50dd96b7e866386.jpeg​​​​​

59bb0955631256520f0edd17f8304669.jpeg​​​​​

 Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）

 色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)

2024年6月多家权威机构____编程语言排行榜__薪酬状况

7dda70990181a20a430cc7b13dc9d8aa.png​​​​​​

a1fea2de0187913a4cdb18473c512c55.png​​​​​

96e1df3760ce3017026da2d1de069869.png​​​​​

 手机屏幕坏了____怎么把里面的资料导出（18种方法）

【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)

 查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决

fa753f11d26d967646a85b78b53dc703.png​​​​​

vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）

4290a52c20eee861ee159e17659342f5.png​​​​​

b126b976989a1e4f1ae40867407e8f4d.png​​​​​

15f065b7e46b238db1e7382f70fd7076.png​​​​​

2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特

 别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(4套)

SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）

f3a00b9bf85e8d36c21d8e9785f43a53.png​​​​​

1f143789d9652fd35c1fabf11b6f149c.png​​​​​

2c8047a9f87aa22a8abe57ad0081b1d9.png​​​​​

【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)

 2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）

a01e7c6663c27936b3c174265db14012.png​​​​​

6d12eed561af36157625a07b771f9b0b.png​​​​​

af9dcebc4110cf5b9a012a3ef7d268fe.png​​​​​

 tomcat11、tomcat10 安装配置（Windows环境）（详细图文）

 Tomcat端口配置（详细）

 Tomcat 启动闪退问题解决集（八大类详细）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2218302.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SQLI LABS | Less-1 GET - Error based - Single Quotes - String

SQLI LABS | Less-1 GET - Error based - Single Quotes - String

关注这个靶场的其它相关笔记&#xff1a;SQLI LABS —— 靶场笔记合集-CSDN博客 0x01&#xff1a;过关流程 输入下面的链接进入靶场&#xff08;如果你的地址和我不一样&#xff0c;按照你本地的环境来&#xff09;&#xff1a; http://localhost/sqli-labs/Less-1/ 靶场提示 …
阅读更多...
CyberRT通信介绍与基于Reader、Writer的通信实践（apollo9.0）

CyberRT通信介绍与基于Reader、Writer的通信实践（apollo9.0）

目录 数据通信场景 CyberRT中的通信方式 ​编辑 通信模式 话题通信 服务通信 参数通信 protobuf protobuf简介 protobuf文件编写 topic通信实验 实验环境 实验准备 代码编写 定义消息格式 发送消息 接收消息 定义编译规则 程序编译 运行程序 数据通信场景 …
阅读更多...
STM32-Modbus协议(一文通)

STM32-Modbus协议(一文通)

Modbus协议原理 RT-Thread官网开源modbus RT-Thread官方提供 FreeModbus开源。 野火有移植的例程。 QT经常用 libModbus库。 Modbus是什么&#xff1f; Modbus协议&#xff0c;从字面理解它包括Mod和Bus两部分&#xff0c;首先它是一种bus&#xff0c;即总线协议&#xff0c;和…
阅读更多...
开发一个微信小程序要多少钱？

开发一个微信小程序要多少钱？

在当今数字化时代&#xff0c;微信小程序成为众多企业和个人拓展业务、提供服务的热门选择。那么&#xff0c;开发一个微信小程序究竟需要多少钱呢&#xff1f; 开发成本主要取决于多个因素。首先是功能需求的复杂程度。如果只是一个简单的信息展示小程序&#xff0c;功能仅限…
阅读更多...
使用HIP和OpenMP卸载的Jacobi求解器

使用HIP和OpenMP卸载的Jacobi求解器

Jacobi Solver with HIP and OpenMP offloading — ROCm Blogs (amd.com) 作者&#xff1a;Asitav Mishra, Rajat Arora, Justin Chang 发布日期&#xff1a;2023年9月15日 Jacobi方法作为求解偏微分方程&#xff08;PDE&#xff09;的基本迭代线性求解器在高性能计算&#xff…
阅读更多...
Java实现油画滤镜效果【参数可调】

Java实现油画滤镜效果【参数可调】

油画滤镜的基本原理 油画滤镜的基本思想是通过改变图像的像素&#xff0c;将每个像素用周围随机选择的像素来代替&#xff0c;从而产生类似油画笔触的效果。这种处理方式可以模糊图像的细节&#xff0c;使得图像的色块更加连贯&#xff0c;从而模仿油画的艺术效果。 核心步骤…
阅读更多...
后台管理员登录实现--系统篇

后台管理员登录实现--系统篇

我的小系统后台原来就有一个上传图片的功能还夹带个删除图片的功能&#xff0c;还嵌到了一个菜单里面。之前效果如下 那么现在为了加大安全力度&#xff0c;想增加一个登录页面。通过登录再到这个页面。看着貌似很简单&#xff0c;但是听我细细说来&#xff0c;要新增些什么东西…
阅读更多...
OpenLayers：构建现代Web地图应用

OpenLayers：构建现代Web地图应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 OpenLayers&#xff1a;构建现代Web地图应用 文章目录 OpenLayers&#xff1a;构建现代Web地图应用1. 简介2. 为什么选择 OpenLa…
阅读更多...
Redis 高可用：从主从到集群的全面解析

Redis 高可用：从主从到集群的全面解析

目录 一、主从复制 (基础)1. 同步复制a. 全量数据同步b. 增量数据同步c. 可能带来的数据不一致 2. 环形缓冲区a. 动态调整槽位 3. runid4. 主从复制解决单点故障a. 单点故障b. 可用性问题 5. 注意事项a. Replica 主动向 Master 建立连接b. Replica 主动向 Master 拉取数据 二、…
阅读更多...
腾讯云宝塔面板前后端项目发版

腾讯云宝塔面板前后端项目发版

后端发版 1. 打开“网站”页面&#xff0c;找到java项目&#xff0c;点击状态暂停服务 2.打开“文件”页面&#xff0c;进入jar包目录&#xff0c;删除原有的jar包&#xff0c;上传新jar包 3. 再回到第一步中的网站页面&#xff0c;找到jar项目&#xff0c;启动项目即可 前端发…
阅读更多...
C#的小数位保留以及四舍五入

C#的小数位保留以及四舍五入

C#使用Math.Round("数值","保留位","保留方式")进行小数位保留以及四舍五入 //1.MidpointRounding.ToEven(四舍六入五成双) //当保留小数位后一位为0~4时&#xff0c;舍去末位 var x1 Math.Round(1.124, 2, MidpointRo…
阅读更多...
立仪科技：光谱共焦传感器精准测量玻璃

立仪科技：光谱共焦传感器精准测量玻璃

光谱共焦测量技术作为一种创新的光学检测方法&#xff0c;近年来在工业领域引起了广泛关注。 它以其高精度、非接触式的特点&#xff0c;特别适用于透明或半透明材料如玻璃的厚度和表面形貌测量。 接下来&#xff0c;立仪科技小编将深入探讨光谱共焦技术在玻璃测量上的应用及其…
阅读更多...
计算机毕业设计Hadoop+Hive+Spark+Flink广告推荐系统 广告预测 广告数据分析可视化 广告爬虫 大数据毕业设计 深度学习 机器学习

计算机毕业设计Hadoop+Hive+Spark+Flink广告推荐系统 广告预测 广告数据分析可视化 广告爬虫 大数据毕业设计 深度学习 机器学习

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 专业 小四号宋体 班级 小…
阅读更多...
飞机大战告尾

飞机大战告尾

参考 PPO算法逐行代码详解 链接 通过网盘分享的文件&#xff1a;PlaneWar 链接: https://pan.baidu.com/s/1cbLKTcBxL6Aem3WkyDtPzg?pwd1234 提取码: 1234 10.17关于博客发了又改这件事 悲催的事 今天训练了一早上ppo模型&#xff0c;满怀期待的检测成果时发现一点长进都…
阅读更多...
mac安装brew时踩坑解决方案

mac安装brew时踩坑解决方案

安装包 mac上如果按照git等工具可能会使用brew&#xff0c;例如使用&#xff1a;$ brew install git命令&#xff0c;如果电脑没有按照brew&#xff0c;则会提示&#xff1a;zsh: command not found: brew 解决方案 需要我们打开brew的官网https://brew.sh/&#xff0c;复制…
阅读更多...
动态规划一＞下降路径最小和

动态规划一＞下降路径最小和

1.题目&#xff1a; 2.解析&#xff1a; 代码&#xff1a; /**1.创建dp表2.初始化3.填表4.返回值*/public int minFallingPathSum(int[][] matrix) {int n matrix.length;int[][] dp new int[n1][n2];int minNum Integer.MAX_VALUE; for(int i 1; i < n; i) dp[i][0]…
阅读更多...
【CSS】纯CSS Loading动画组件

【CSS】纯CSS Loading动画组件

<template><div class"ai-loader-box"><!-- AI loader --><div class"ai-loader"><div class"text"><p>AI智能分析中....</p></div><div class"horizontal"><div class&quo…
阅读更多...
简单说说 spring是如何实现AOP的（源码分析）

简单说说 spring是如何实现AOP的（源码分析）

在spring生命周期流程中&#xff0c;有一个过程是执行BeanPostProcessor的后置方法 BeanPostProcessor 是一个接口&#xff0c;其实现有 aop实现的核心类是AbstractAutoProxyCreator&#xff0c;其位于spring-aop包下&#xff0c;实现了BeanPostProcessor //BeanPostProcesso…
阅读更多...
【Java小白图文教程】-04-分支结构

【Java小白图文教程】-04-分支结构

本套课程将会从0基础讲解Java语言核心技术&#xff0c;适合人群&#xff1a; 大学中开设了Java语言课程的同学想要专升本或者考研的同学想要考计算机等级证书的同学想要从事Java相关开发开发的同学 精品专题&#xff1a; 01.《C语言从不挂科到高绩点》课程详细笔记 https:/…
阅读更多...
transformers 推理 Qwen2.5 等大模型技术细节详解(一)transformers 初始化和对象加载（文末免费送书）

transformers 推理 Qwen2.5 等大模型技术细节详解(一)transformers 初始化和对象加载（文末免费送书）

上周收到一位网友的私信&#xff0c;希望老牛同学写一篇有关使用 transformers 框架推理大模型的技术细节的文章。 老牛同学刚开始以为这类的文章网上应该会有很多&#xff0c;于是想着百度几篇质量稍高一点的回复这位网友。结果&#xff0c;老牛同学搜索后发现&#xff0c;类…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023