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

173,293次阅读
没有评论

共计 19398 个字符，预计需要花费 49 分钟才能阅读完成。

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

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

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

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

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

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

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

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

    逆境清醒

2024.10.19

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

一、CSS3 动画基本概念

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

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

语法：@keyframes animationname {keyframes-selector {css-styles;}}
animationname 必需的。定义 animation 的名称。
keyframes-selector

必需的。动画持续时间的百分比。

0-100%
from (和 0% 相同)
to (和 100% 相同)

实例：

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

 相应 css:

 不同浏览器所支持的：

@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 属性是 可以有动画效果的，这意味着它们可以用于动画和过渡。

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

部分是 css 定义；

部分是相关的 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)}

 

逆境清醒

 运行效果图：

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

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

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

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

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

    
逆境清醒

  运行效果图：

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

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

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

background-position CSS 属性为每一个背景图片设置初始位置。
这个位置是相对于由 background-origin 定义的位置图层的。

    
逆境清醒

  运行效果图：

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

改变 background-position 属性，

从 “top left” 到 “bottom right”,

然后回到 “top left”。

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

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

    
逆境清醒

  运行效果图：

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

逐步改变 background-size 属性，

从 “80px 80px” 到 “200px 200px”，然后回到 “80px 80px”

2.2、border 属性

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

border 属性是一个用于设置各种单独的边界属性的简写属性。
border 可以用于设置一个或多个以下属性的值：border-width、border-style、border-color。

    
逆境清醒

 运行效果图：

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

逐步改变 border 属性:

从 “1px 黑色 ” 到 “20px 红色 ”,

然后回到 “1px 黑色 ”

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

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

    
逆境清醒

 运行效果图：

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

border-bottom 属性

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

逐步改变 border-bottom 属性:

从 “1px 黑色 ” 到 “15px 金色 ”,

然后回到 “1px 黑色 ”

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

border-bottom-color 属性设置一个元素底部边框的颜色。
CSS 简写属性 border-color 或 border-bottom 更方便实用。

    
逆境清醒

  运行效果图：

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

改变 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;

    
逆境清醒

 运行效果图：

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

改变 border-bottom-left-radius

属性（从 0 到 100px）

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

    
逆境清醒

  运行效果图：

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

改变 border-bottom-right-radius

属性（从 0 到 100px）

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

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

    
逆境清醒

  运行效果图：

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

改变 border-bottom-width 属性

（从 0 到 10px）

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

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

    
逆境清醒

  运行效果图：

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

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

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

这些属性都是在描述一个元素的左边的边框 border。
border-left 是属性 border-left-color, border-left-style, 和 border-left-width 的三者的缩写。

    
逆境清醒

  运行效果图：

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

改变 border-left 属性

从 black 到 red

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

border-left-color 属性设置元素的左边框颜色。
大数情况下 border-color 或 border-left 使用更加普遍。

    
逆境清醒

  运行效果图：

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

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

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

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

定义边框的宽度，或者作为显性非负的长度值 或者是关键字。

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

thin 一个细边框
medium 一个中等边框
thick 一个粗边框

    
逆境清醒

  运行效果图：

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

改变 border-left-width 属性

从 1px 到 10px

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

border-right 是属性 border-right-color, border-right-style, 和 border-right-width 的三者的缩写。
这些属性都是在描述一个元素的右边的边框 border。

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

    
逆境清醒

 运行效果图：

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

 改变 border-right 属性

从 1px 到 10px

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

    
逆境清醒

 运行效果图：

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

改变 border-right-color 属性

从 black 到 gold

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

    
    

  
    
    
  
  
    
    
  
苹果红色
草莓红色

 运行效果图：

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

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

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

border-top 是属性 border-top-color, border-top-style, 和 border-top-width 的三者的缩写。
这些属性都是在描述一个元素的上方的边框 border。

    
逆境清醒

 运行效果图：

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

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

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

    
逆境清醒

 运行效果图：

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

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

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

border-top-left-radius 用来设置元素左上角的圆角效果。
这段圆弧（角）可以是圆或椭圆的一部分。
如果其中有一个值为 0，那么将无圆角效果。

    
逆境清醒

 运行效果图：

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

改变 border-top-left-radius 属性

从 0 到 100px

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

    
逆境清醒

 运行效果图：

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

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

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

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

    
逆境清醒

  运行效果图：

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

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

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

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

    正文完
    background背景精灵
    发表至： 开发笔记
    2024-11-29
     0
    Yojack
    版权声明：本篇文章由 Yojack 于2024-11-29发表，共计19398字。
    转载说明：
    1 本网站名称：优杰开发笔记
    2 本站永久网址：https://yojack.cn
    3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
    4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权，所有文章在发布时，均尽可能注明出处与作者。
    7 站长邮箱：laylwenl@gmail.com
    json.dumps结果不要空格
    《前端面试题》- TypeScript – TypeScript的优/缺点
    springboot vue 前后端加密传输 RSA互相加解密、加签验签、密钥对生成
    Vue3动态路由（Vite Vue3 TS Mock）
    评论（没有评论）
    搜一搜,打开新世界
    热门文章
    WordPress3 和 jQuery（二）

    WordPress3 和 jQuery（二）

    原文：zh.annas-archive.org/md5/5EB3887BDFDDB364C2173BCD8CE...
    RabbitMQ 篇-深入了解 RabbitMQ 安装以及 SpringAMQP 的基础使用（声明队列和交换机、发送接收消息、配置 JSON 消息转化器）

    RabbitMQ 篇-深入了解 RabbitMQ 安装以及 SpringAMQP 的基础使用（声明队列和交换机、发送接收消息、配置 JSON 消息转化器）

    🔥博客主页：【 小扳_-CSDN 博客】❤感谢大家点赞👍收藏⭐评论✍ 文章目录         1.0 Rab...
    CSS3新增属性(15个案例 代码 效果图 素材)

    CSS3新增属性(15个案例 代码 效果图 素材)

    目录 1.rgba(透明度) 案例: 为图片添加蓝色的滤镜 1. 代码 2. 效果  2.opacity 属性...
    fastjson_1.2.24和Shiro(CVE-2016-4437)漏洞复现

    fastjson_1.2.24和Shiro(CVE-2016-4437)漏洞复现

    文章目录 一、fastjson 1.2.24 远程命令执行漏洞复现 二、shiro 反序列化漏洞(CVE-20...
    一文彻底搞定MySQL中的JSON类型，效率飞起。

    一文彻底搞定MySQL中的JSON类型，效率飞起。

    写在开头 JSON 类型通常用于存储非结构化的数据或者一些可变的数据，比如存储日志、配置信息等。我们有时候需要...
    一言
    -「」
    标签云
    ​ 图片懒加载.netcore1024程序员节1024程序员节 | 征文2021，目标20222023春节祝福3d3D呈现效果3D导航栏5G SoC7-ZipaardioadbAIaigcAirPods Maxai作画AI工具AI手机AI生成AI编程ajaxandroidandroid-studioangular.jsAngularJSanimationant-design-vueantdanti-design-vueapacheapiAPICloudapp登录页面arcgisarduinoasp.netattachmentawsaxiosa标签babelbackground背景精灵beautifulsoupbootstrapbreakbugc:Progran Filesnodejspnpm.pslc#c5全栈canvanscanvascanva可画cesium渐变材质chatgptchm手册Chromecjsoncnpmcocos2dcodemirrorcondacookie交互crosCrypto，web Crypto，Crypto加密CSScss 弹性布局CSS 选择器css，css点赞，css直播css，flex布局，reactnative布局css，Nestingcss，圆角三角形，三角形css，外描边，阴影，文字渐变CSS3CSS3DSpritecss3沿椭圆轨道旋转CSS优化css动画css基础css学习css居中对齐css属性css文字描边css新特性css盒模型CSS相对定位CSS继承性css视差滚动css视频CSS设置虚线css超出部分显示省略号css选择器curlc语言daemondata urldataVDcokerdecodeURIComponent