当前位置： 首页 > news >正文

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

news 文章来源：https://blog.csdn.net/weixin_69553582/article/details/143065312 2025/5/12 7:44:33

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

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

本文目录：

零、时光宝盒

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

    未完待续》》》

  • 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)详解系列索引目录

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

相关文章：

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

CSS3 动画相关属性实例大全&#xff08;一) &#xff08;keyframes &#xff0c;background属性&#xff0c;border 属性&#xff09; 本文目录&#xff1a; 零、时光宝盒 一、CSS3 动画基本概念 &#xff08;1&#xff09;、CSS3的动画基本属性 &#xff08;2&#xff09…...

编程日记 2024/10/20 13:09:22

拦截器或过滤器往本次请求体中添加信息

步骤一&#xff1a;定义新的Request package com.ict.lux.framework.interceptor;import java.util.Collections; import java.util.Enumeration; import java.util.Map; import java.util.TreeMap;import javax.servlet.http.HttpServletRequest; import javax.servlet.http.…...

编程日记 2024/10/20 13:07:20

Docker 安装达梦 DM8 数据库实战指南

Docker 安装达梦 DM8 数据库实战指南 文章目录 Docker 安装达梦 DM8 数据库实战指南一 安装环境二 下载 DM8 安装包三 导入镜像四 启动容器1&#xff09;docker run 启动2&#xff09;docker compose 启动3&#xff09;名词解释 五 连接数据库 本文详细介绍了如何在 CentOS 7.9…...

编程日记 2024/10/20 13:04:15

QtCreator14调试Qt5.15出现 Launching Debugger 错误

1、问题描述 使用QtCreator14调试程序&#xff0c;Launching Debugger 显示红色&#xff0c;无法进入调试模式。 故障现象如下&#xff1a; 使能Debugger Log窗口&#xff0c;显示&#xff1a; 325^error,msg"Error while executing Python code." 不过&#xff…...

编程日记 2024/10/20 13:03:14

day1：基础了解

虚拟机网络设置 桥接模式&#xff1a;客户机使用宿主机的网段 使虚拟机像物理机一样直接连接到外部网络&#xff0c;拥有独立的IP地址&#xff0c;可与其他网络设备通信。 nat模式&#xff1a;客户机使用单独的局域网 通过宿主机的NAT功能&#xff0c;让虚拟机能够访问外部…...

编程日记 2024/10/20 13:02:13

【从零开始的LeetCode-算法】3099. 哈沙德数

如果一个整数能够被其各个数位上的数字之和整除&#xff0c;则称之为 哈沙德数&#xff08;Harshad number&#xff09;。给你一个整数 x 。如果 x 是 哈沙德数 &#xff0c;则返回 x 各个数位上的数字之和&#xff0c;否则&#xff0c;返回 -1 。 示例 1&#xff1a; 输入&am…...

编程日记 2024/10/20 13:00:11

【Next.js 项目实战系列】02-创建 Issue

原文链接 CSDN 的排版/样式可能有问题&#xff0c;去我的博客查看原文系列吧&#xff0c;觉得有用的话&#xff0c;给我的库点个star&#xff0c;关注一下吧 上一篇【Next.js 项目实战系列】01-创建项目 创建 Issue 配置 MySQL 与 Prisma​ 在数据库中可以找到相关内容&…...

编程日记 2024/10/20 12:59:10

浅谈C++的future

std::future 是 C 标准库中的一个模板类&#xff0c;提供了一种机制来管理和获取异步任务的结果。它常与异步操作相关&#xff0c;允许你在不同线程中执行任务&#xff0c;并在将来&#xff08;即“未来”&#xff09;某个时刻获取这些任务的结果。std::future 通常和 std::asy…...

编程日记 2024/10/20 12:58:10

期货外盘行情源7个市场CTP推送式服务说明

在期货交易领域&#xff0c;及时、准确的市场行情信息是投资者做出决策的重要依据。为了满足广大期货投资者对国际期货市场信息的迫切需求&#xff0c;我们特别推出了“期货外盘行情源2千每月7个市场CTP推送式”服务。本服务旨在通过高效、稳定的技术手段&#xff0c;为投资者提…...

编程日记 2024/10/20 12:56:08

计算机毕业设计 | SSM 校园线上订餐系统(附源码)

1&#xff0c; 概述 1.1 项目背景 传统的外卖方式就是打电话预定&#xff0c;然而&#xff0c;在这种方式中&#xff0c;顾客往往通过餐厅散发的传单来获取餐厅的相关信息&#xff0c;通过电话来传达自己的订单信息&#xff0c;餐厅方面通过电话接受订单后&#xff0c;一般通…...

编程日记 2024/10/20 12:51:03

【iOS】使用一个单例通过AFNetworking来实现网络请求

【iOS】使用一个单例通过AFNetworking来实现网络请求 文章目录 【iOS】使用一个单例通过AFNetworking来实现网络请求前言OC网络请求的流程 使用单例的原因创建一个单例采用AFNetworking的网络申请 小结 前言 笔者这周主要学习了第三方库AFNetworking的使用&#xff0c;这里笔者…...

编程日记 2024/10/20 12:50:02

如何从模块内部运行 Pytest

在 Python 中&#xff0c;pytest 是一个强大的测试框架&#xff0c;用于编写和运行测试用例。通常我们会在命令行中运行 pytest&#xff0c;但是有时你可能希望从模块或脚本的内部运行 pytest&#xff0c;比如为了自动化测试或集成到某个工作流程中。 1、问题背景 当你从模块…...

编程日记 2024/10/20 12:47:00

oracle数据库---基本查询（单表查询、多表查询、子查询、分页查询、oracle内置函数、行列转换、集合运算）

思维导图 单表查询 数据准备 -- 练习的表如果存在 请先删除 -- 如果不存在直接创建 drop table t_owners;--业主表 create table t_owners (id number primary key,name varchar2(30),addressid number,housenumber varchar2(30),watermeter varchar2(30),adddate date,owner…...

编程日记 2024/10/20 12:42:57

web API基础

作用和分类 作用: 就是使用 JS 去操作 html 和浏览器 分类&#xff1a; DOM (文档对象模型)、 BOM &#xff08;浏览器对象模型&#xff09; 什么是DOM DOM (Document Object Model) 译为文档对象模型&#xff0c;是 HTML 和 XML 文档的编程接口。 HTML DOM 定义了访问和操作 …...

编程日记 2024/10/20 12:40:55

【C++】创建TCP服务端

实现了一个基本的 TCP 服务器&#xff0c;可以接受多个客户端连接&#xff0c;然后持续接收客户端发送的信息&#xff0c; 最后将接收到的信息再发送回客户端 。 源码 头文件&#xff08;TCPServerTest.h&#xff09; #include <iostream> #include <winsock2.h&g…...

编程日记 2024/10/20 12:38:53

每天练打字6：今日状况——常用字后五百击键3第2遍已完成，赛文速度93.56

今日跟打&#xff1a;763字 &#xff08;截至当前&#xff09; 总跟打&#xff1a;120408字 记录天数&#xff1a;2467天 &#xff08;实际没有这么多天&#xff0c;这个是注册账号的天数&#xff09; 平均每天&#xff1a;48字 本周目标完成进度&#xff1a; 练习常用单字后5…...

编程日记 2024/10/20 12:36:52

rk3568创建基于Ubuntu18.04交叉编译遇到的坑

尽管配置过rk3288&#xff0c;觉得rk3568也不会有啥问题&#xff0c;但还是掉坑了。 一、安装依赖库 安装完ubuntu后&#xff0c;先进行升级 sudo apt update sudo apt upgrade然后安装依赖库 $ sudo apt-get install repo git-core gitk git-gui gcc-arm-linux-gnueabihf u-…...

编程日记 2024/10/20 12:35:51

对“一个中心，三重防护”中安全管理中心的理解

安全管理中心 本控制项为网络安全等级保护标准的技术部分。本项主要包括系统管理、审计管理、安全管理和集中管控四个控制点&#xff0c;其中的集中管控可以说是重中之重&#xff0c;主要都是围绕它来展开的。 28448基本要求中安全管理中心 8.1.5 安全管理中心 8.1.5.1 系统…...

编程日记 2024/10/20 12:34:50

jmeter用csv data set config做参数化1

在jmeter中&#xff0c;csv data set config的作用非常强大&#xff0c;用它来做批量测试和参数化非常好用。 csv data set config的常用配置项如下&#xff1a; Variable Names处&#xff0c;写上源文件中的参数名&#xff0c;用于后续接口发送请求时引用 Ignore first line…...

编程日记 2024/10/20 12:33:49

软件分享 丨eSearch 截图软件

在日常的工作和学习中&#xff0c;截图是一项非常常见且重要的操作。无论是记录重要的信息、制作教程&#xff0c;还是与他人分享有趣的内容&#xff0c;一款好用的截图软件都能让我们的效率大大提高。今天&#xff0c;就给大家分享一款功能强大的截图软件 - eSearch。 一、强…...

编程日记 2024/10/20 12:32:48

pytorh学习笔记——cifar10（一）生成数据

CIFAR&#xff08;Canadian Institute For Advanced Research&#xff09;是一个用于图像识别研究的数据集。CIFAR数据集包含多个子数据集&#xff0c;最常用的是CIFAR-10和CIFAR-100。 CIFAR-10数据集包含60000张32x32彩色图像&#xff0c;分为10个类别&#xff0c;每…...

编程日记 2024/10/20 12:31:46

pikachu靶场SSRF-curl测试报告

目录 一、测试环境 1、系统环境 2、使用工具/软件 二、测试目的 三、操作过程 1、实现ssrf攻击 四、源代码分析 五、结论 一、测试环境 1、系统环境 渗透机&#xff1a;本机(127.0.0.1) 靶 机&#xff1a;本机(127.0.0.1) 2、使用工具/软件 测试网址&#xff1a;…...

编程日记 2024/10/20 12:28:41

Java项目-基于Springboot的农机电招平台项目(源码+说明).zip

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 开发运行环境 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI工具&#xff1a;IDEA/…...

编程日记 2024/10/20 12:27:40

Systemd：简介

1号进程 Systemd是linux系统的守护进程&#xff0c;它要管理正在运行的 Linux 主机的许多方面&#xff0c;包括挂载文件系统、管理硬件、处理定时器以及启动和管理生产性主机所需的系统服务。 $ ps -u -p 1 USER PID %CPU %MEM VSZ RSS TTY STAT START TI…...

编程日记 2024/10/20 12:24:38

Snapshot包和Release包区别

Snapshot包和Release包区别 Snapshot包&#xff1a; 代表开发中的版本&#xff0c;可能不稳定。 经常更新&#xff0c;包含最新的功能和修复。 通常用于测试和开发阶段。 Release包&#xff1a; 代表稳定的、经过全面测试的版本。 版本号通常是固定的&#xff0c;适合生产环…...

编程日记 2024/10/20 12:22:36

最近网站频繁跳转到黑产网站，怀疑是51.la统计代码的问题

最近我的几个网站&#xff0c;都出现了一个问题&#xff0c;就是访问的时候会莫名其妙的跳转到黑产网站。 通过排查了网页代码&#xff0c;发现网页都有一个共同点&#xff0c;就是使用了51.la统计。为什么会怀疑是51la统计代码问题&#xff1f;因为我的网页只有统计代码外没有…...

编程日记 2024/10/20 12:21:34

【python_修改PPT中字体，run.font.name只对英文生效怎么办？】

python_修改PPT中字体&#xff0c;run.font.name只对英文生效怎么办&#xff1f; 参考&#xff1a;使用pptx_ea_font库设置中文字体 from pptx import Presentation from pptx.util import Pt from pptx_ea_font import set_font# 打开现有的 PPT 文件 prs Presentation(D:\…...

编程日记 2024/10/20 12:18:31

【web】JDBC

项目连接数据库 右侧导航栏找到databsae 如果没有驱动&#xff0c;先下载驱动 填写数据库用户名密码 勾选对应的表即可 JDBC代码流程 1,配置信息 2,加载驱动 从MySQL Connector/J 5.1版本开始&#xff0c;推荐使用com.mysql.cj.jdbc.Driver这个新的驱动类。 3,链接数据库…...

编程日记 2024/10/20 12:17:29

MATLAB代码介绍：一段轨迹的指纹定位，KNN，三维，四个锚点（附源代码，可复制粘贴）

文章目录 产品介绍：三维指纹定位 KNN MATLAB 模型概述源代码运行结果功能亮点代码结构应用场景结论产品介绍：三维指纹定位 KNN MATLAB 模型 概述 本 MATLAB 代码实现了一种基于 KNN（K-Nearest Neighbors）算法的三维指纹定位系统，利用四个基站（锚点）信号强度进行移动终…...

编程日记 2024/10/20 12:16:28

XML Schema 复合空元素

XML Schema 复合空元素 XML Schema 是一种用于定义 XML 文档结构和内容的语言。在 XML Schema 中&#xff0c;元素可以被定义为简单类型或复杂类型。简单类型元素不能包含其他元素或属性&#xff0c;而复杂类型元素可以包含其他元素、属性或两者都有。复合空元素是一种特殊类型…...

编程日记 2024/10/20 12:10:22