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 逆境清醒)
我不算真的认识你们,我不知道你们详细真实身份,也不知道你们现在在哪里,在做什么,你们也未必记得我或者知道我的存在。但我知道你们在经历什么,因为我们绝大部分人都在经历类似的事情,虽然程度和方式不同,但本质是一样的。我没有能够彻底解决这些问题的能力,无论你们在困境下选择做什么去缓解伤害都好,都请一定要想办法及时调节好自己的心态,别轻易放弃自己。
心理学上有个词,叫“野马效应”。
在非洲草原上有一种吸血蝙蝠,常常会盯在野马腿上吸血。不管野马跑的多快,或者如何的暴怒,都无法摆脱蝙蝠的纠缠,不少野马因此致死。
其实这种吸血蝙蝠,吸血量并不足以让野马致死。而野马的真正死因,是为摆脱蝙蝠而产生的暴怒和不停狂奔,严重危害自身健康。
困境中,很多时候打败我们的并不是事情本身,而是因为这个事情产生的各种负面情绪。互勉。
逆境清醒
2024.10.19
一、CSS3 动画基本概念
(1)、CSS3的动画基本属性
@keyframes是创建动画,规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
语法:@keyframes animationname {keyframes-selector {css-styles;}} | |
animationname | 必需的。定义animation的名称。 |
keyframes-selector | 必需的。动画持续时间的百分比。 0-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 动画的名称 |
|
animation-duration | 定义动画完成一个周期需要多少秒或毫秒。 | 默认是 0
|
animation-timing-function | 规定动画的速度曲线。 | 默认是 "ease"
|
animation-delay | 规定动画何时开始 值单位可以是秒或毫秒。 允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画。 | 默认是 0
|
animation-iteration-count | 规定动画被播放的次数。 定义动画应该播放多少次 | 默认是 1
|
animation-direction | 规定动画是否在下一周期逆向地播放。 属性定义是否循环交替反向播放动画。 | 默认是 "normal"。
|
animation-play-state | 规定动画是否正在运行或暂停。在JavaScript中使用此属性在一个周期中暂停动画。 | 默认是 "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-clip | ||
background-color | 设置元素的背景色 background-color:颜色值 | 颜色值 或关键字"transparent" |
background-image | 设置元素的背景图片, 标签名{background-image: url("图像路径")} 例如: background-image: url('2023p1.png'); 四种值表示方式: ①auto:默认值,使用背景图片保持原样 | 图像路径 |
background-origin | ||
background-position | 背景定位,为背景图片设置初始位置 background-position: 值 值 三种值表示方式: ①X Y:单位:px,Xpos表示水平位置,Ypos表示垂直位置 | 三种值表示方式: background-position 背景定位(X Y、X% Y%、X、Y方向关键词) |
background-repeat | 背景重复方式。 四种属性表示方式: ①repeat:沿水平和垂直两个方向平铺 | ①repeat ②no-repeat ③repeat-x ④repeat-y |
background-size |
background-size: 80px 80px; | background-size 背景尺寸(默认、百分百、放大填充、自适应比例) |
background-attachment | ||
背景渐变(线性渐变): linear-gradient 背景渐变(线型渐变) |
<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
CSS3 动画相关属性实例大全系列目录:
- 1、CSS3 动画相关属性实例大全(一)(@keyframes ,background属性,border 属性)
- 2、CSS3 动画相关属性实例大全(二)(bottom 、box-shadow、clip、color 、column-count、column-gap、column-rule、column-rule-color、column-rule-width、column-width 属性)
- 3、CSS3 动画相关属性实例大全(三)(columns、filter、flex、flex-basis 、flex-grow、flex-shrink属性)
- 4、CSS3 动画相关属性实例大全(四)(font、height、left、letter-spacing、line-height 属性)
- 5、CSS3 动画相关属性实例大全(五)(margin 、max-height、max-width、min-height、min-width、opacity 、order 属性)
- 6、CSS3 动画相关属性实例大全(六)(outline 、outline-color 、outline-offset、outline-width、padding、padding-bottom、padding-left 、padding-right 、padding-top、perspective属性)
- 7、
CSS3 动画相关属性实例大全(七)(perspective-origin、right、text-decoration-color 、text-indent、text-shadow、top 、transform、transform-origin、vertical-align、visibility 、width、word-spacing、z-index属性)
推荐阅读:CSS @规则(At-rules)详解系列索引目录
| | |
给照片换底色(python+opencv) | 猫十二分类 | 基于大模型的虚拟数字人__虚拟主播实例 |
| | |
计算机视觉__基本图像操作(显示、读取、保存) | 直方图(颜色直方图、灰度直方图) | 直方图均衡化(调节图像亮度、对比度) |
| | |
语音识别实战(python代码)(一) | 人工智能基础篇 | 计算机视觉基础__图像特征 |
| ||
matplotlib 自带绘图样式效果展示速查(28种,全) | ||
| ||
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(一) | ||
| | |
立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦 | Python 3D可视化(一) | 让你的作品更出色——词云Word Cloud的制作方法(基于python,WordCloud,stylecloud) |
| | |
python Format()函数的用法___实例详解(一)(全,例多)___各种格式化替换,format对齐打印 | 用代码写出浪漫__合集(python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心) | python爱心源代码集锦(18款) |
| | |
Python中Print()函数的用法___实例详解(全,例多) | Python函数方法实例详解全集(更新中...) | 《 Python List 列表全实例详解系列(一)》__系列总目录、列表概念 |
| | |
用代码过中秋,python海龟月饼你要不要尝一口? | python练习题目录 | |
| | |
草莓熊python turtle绘图(风车版)附源代码 | 草莓熊python turtle绘图代码(玫瑰花版)附源代码 | 草莓熊python绘图(春节版,圣诞倒数雪花版)附源代码 |
| | |
巴斯光年python turtle绘图__附源代码 | 皮卡丘python turtle海龟绘图(电力球版)附源代码 | |
| | |
Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程(超详细) | 色彩颜色对照表(一)(16进制、RGB、CMYK、HSV、中英文名) | 2024年6月多家权威机构____编程语言排行榜__薪酬状况 |
| | |
手机屏幕坏了____怎么把里面的资料导出(18种方法) | 【CSDN云IDE】个人使用体验和建议(含超详细操作教程)(python、webGL方向) | 查看jdk安装路径,在windows上实现多个java jdk的共存解决办法,安装java19后终端乱码的解决 |
| ||
vue3 项目搭建教程(基于create-vue,vite,Vite + Vue) | ||
| | |
2023年春节祝福第二弹——送你一只守护兔,让它温暖每一个你【html5 css3】画会动的小兔子,炫酷充电,字体特 | 别具一格,原创唯美浪漫情人节表白专辑,(复制就可用)(html5,css3,svg)表白爱心代码(4套) | SVG实例详解系列(一)(svg概述、位图和矢量图区别(图解)、SVG应用实例) |
| | |
【程序人生】卡塔尔世界杯元素python海龟绘图(附源代码),世界杯主题前端特效5个(附源码) | HTML+CSS+svg绘制精美彩色闪灯圣诞树,HTML+CSS+Js实时新年时间倒数倒计时(附源代码) | 2023春节祝福系列第一弹(上)(放飞祈福孔明灯,祝福大家身体健康)(附完整源代码及资源免费下载) |
| | |
tomcat11、tomcat10 安装配置(Windows环境)(详细图文) | Tomcat端口配置(详细) | Tomcat 启动闪退问题解决集(八大类详细) |