CSS3 动画相关属性实例大全（七)（perspective-origin、right、text-decoration-color 、text-indent、text-shadow、top 、transform、transform-origin、vertical-align、visibility 、width、word-spacing、z-index属性）
目录
一、perspective-origin属性（设置3D元素的基数位置）
三、text-decoration-color 属性（设置文本修饰线的颜色）
三、text-indent属性（块元素首行文本内容之前的缩进量）
五、top 属性（元素的上外边距边界与其包含块上边界之间的偏移）
七、transform-origin属性（更改一个元素变形的原点）
九、visibility 属性（显示或隐藏元素而不更改文档的布局）
十一、word-spacing 属性（设置标签、单词之间的空格长度）
一、perspective-origin属性（设置3D元素的基数位置）
perspective-origin 属性，设置一个3D元素的基数位置
语法：perspective-origin: x-axis y-axis;
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。
该属性允许您改变 3D 元素的底部位置。
定义时的perspective -Origin属性，它是一个元素的子元素，透视图，而不是元素本身。
默认值： 50% 50%
JavaScript 语法： object.style.perspectiveOrigin="10% 10%"
值 描述
x-axis 定义该视图在 x 轴上的位置。默认值：50%。
可能的值：left、center、right、length、%
y-axis 定义该视图在 y 轴上的位置。默认值：50%。
可能的值：top、center、bottom、length、%
<style>
#animation70 {
position: relative;
margin: auto;
height: 150px;
width: 200px;
padding: 10px;
border: 1px solid black;
-webkit-perspective: 125px;
-webkit-animation: animation70a 2s infinite;
perspective: 125px;
animation: animation70a 2s infinite;
}
@-webkit-keyframes animation70a {
50% {-webkit-perspective-origin: 20px 70%;}
}
@keyframes animation70a {
50% {perspective-origin: 20px 70%;}
}
#div2 {
height: 100px;
width: 150px;
padding: 20px;
position: absolute;
border: 1px solid black;
background-color: lightblue;
-webkit-transform: rotateX(35deg);
transform: rotateX(35deg);
}
</style><div id="animation70">DIV1
<div id="div2">DIV2 猫的智商很高，懂得主人的话，只是不想理你。</div>
</div>
perspective-origin 属性
设置一个3D元素的基数位置
二、right属性（元素的右边缘）
right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
如果 "position" 属性的值为 "static"，那么设置 "right" 属性不会产生任何效果。
对于 static 元素，为 auto；对于长度值，则为相应的绝对长度；对于百分比数值，为指定值；否则为 auto。 对于相对定义元素，left 的计算值始终等于 right。
| auto | 默认值。通过浏览器计算右边缘的位置。 |
| % | 设置以包含元素的百分比计的右边位置。可使用负值。 |
| length | 使用 px、cm 等单位设置元素的右边位置。可使用负值。 |
| inherit | 规定应该从父元素继承 right 属性的值。 |
<style>
#animation71 {
top:80px;
width: 100px;
height:50px;
margin: auto;
border: 2px solid #111111;
background-color:lightblue;
color:black;
-webkit-animation: animation71a 1s infinite;
animation: animation71a 1s infinite;
}
@-webkit-keyframes animation71a {
50% {right: 620px;}
}
@keyframes animation71a {
50% {right: 620px;}
}
</style><div id="animation71">逆境清醒</div>right 属性规定元素的右边缘。
三、text-decoration-color 属性（设置文本修饰线的颜色）
text-decoration-color 用于设置文本修饰线的颜色，文本修饰线是通过 text-decoration-line 属性指定的。
修饰线包括下划线、上划线、删除线和波浪线，
CSS 没有直接的机制为每种线型指定唯一的颜色，
不过可以通过嵌套元素的方法来实现这种效果：用 text-decoration-line 属性为每个元素应用一种线型，
再用 text-decoration-color 指定线的颜色。
<style>
#animation72 {
top:80px;
width: 150px;
height:200px;
margin: auto;
border: 2px solid #111111;
background-color:lightblue;
color:black;
-webkit-animation: animation72a 1s infinite;
animation: animation72a 1s infinite;
}
@-webkit-keyframes animation72a {
50% {
text-decoration-line: underline;
text-decoration-color: cyan;
text-decoration-line: line-through;
text-decoration-color: red;
text-decoration-style: wavy;
}
@keyframes animation72a {
50% {
text-decoration-line: underline;
text-decoration-color: cyan;
text-decoration-line: line-through;
text-decoration-color: red;
text-decoration-style: wavy;
}
</style><div id="animation72"><h1>逆境清醒</h1></div>
text-decoration-color
用于设置文本修饰线的颜色，
文本修饰线是通过 text-decoration-line 属性指定的。
修饰线包括下划线、上划线、删除线和波浪线，
波浪线的典型用途是标明内容拼写错误（仅举例）。
被指定的颜色会作用到该属性值有效范围内的所有修饰线上。
三、text-indent属性（块元素首行文本内容之前的缩进量）
text-indent 属性能定义一个块元素首行文本内容之前的缩进量。
text-indent = [ <length-percentage> ] && hanging? && each-line?
| Values<length> | 使用固定的<length>值来指定文本的缩进。允许使用负值。查阅可能的 <length> 单位。 |
| <percentage> | 使用包含块宽度的百分比作为缩进。 |
| each-line 实验性 | 文本缩进会影响第一行，以及使用<br>强制断行后的第一行。 |
| hanging 实验性 | 该值会对所有的行进行反转缩进：除了第一行之外的所有的行都会被缩进，看起来就像第一行设置了一个负的缩进值。 |
<style>
#animation73 {
top:80px;
width: 150px;
height:200px;
margin: auto;
border: 2px solid #111111;
background-color:pink;
color:black;
-webkit-animation: animation73a 1s infinite;
animation: animation73a 1s infinite;
}
@-webkit-keyframes animation73a {
50% {text-indent: 100px;}
}
@keyframes animation73a {
50% {text-indent: 100px;}
}
</style> <div id="animation73">猫的智商很高，懂得主人的话，只是不想理你。猫的智商很高，懂得主人的话，只是不想理你。</div>
四、text-shadow属性（添加阴影)
当阴影大于一个时要用逗号区别开阴影之间的参数。
每个阴影都有两到三个 <length> 参数，以及一个与阴影颜色相关的 <color> 参数。
前两个 <length> 参数，是以“文字中心”为原点的坐标轴，分别为 x 轴 <offset-x> 和 y 轴 <offset-y> 的值；
如果有第三个 <length> 参数，则第三个数值为形成阴影效果的半径的数值 <blur-radius>。
当所给的阴影大于一个时，阴影应用的顺序为从前到后，第一个指定的阴影在顶部。
| <color> | 可选。阴影的颜色。可以在偏移量之前或之后指定。如果没有指定颜色，则使用用户代理自行选择的颜色，因此需要跨浏览器的一致性时，应该明确定义它。 |
| <offset-x> <offset-y> | 必选。 这些 <length> 值指定阴影相对文字的偏移量。 <offset-x> 指定水平偏移量，若是负值则阴影位于文字左侧。 <offset-y> 指定垂直偏移量，若是负值则阴影位于文字上方。如果两者均为 0，则阴影位于文字正后方， 如果设置了 <blur-radius> 则会产生模糊效果。 |
| <blur-radius> | 可选。这是 <length> 值。如果没有指定，则默认为 0。值越大，模糊半径越大，阴影也就越大越淡（wider and lighter）。 |
<style>
#animation74 {
top:80px;
width: 150px;
height:50px;
margin: auto;
color:black;
-webkit-animation: animation74a 1s infinite;
animation: animation74a 1s infinite;
}
@-webkit-keyframes animation74a {
50% {text-shadow: 10px 10px 40px red;}
}
@keyframes animation74a {
50% {text-shadow: 10px 10px 40px red;}
}
</style> <div id="animation74"><h1>逆境清醒</h1></div><br />
text-shadow 为文字添加阴影。
可以为文字与 decoration 添加多个阴影，阴影值之间用逗号隔开。
每个阴影值由元素在 X 和 Y 方向的偏移量、模糊半径和颜色值组成。
五、top 属性（元素的上外边距边界与其包含块上边界之间的偏移）
top样式属性定义了定位元素的上外边距边界与其包含块上边界之间的偏移，非定位元素设置此属性无效。
<style>
#animation75 {
top:80px;
width: 150px;
height:50px;
margin: auto;
border: 2px solid #111111;
background-color:lightblue;
color:black;
-webkit-animation: animation75a 1s infinite;
animation: animation75a 1s infinite;
}
@-webkit-keyframes animation75a {
50% {top: 200px;}
}
@keyframes animation75a {
50% {top: 200px;}
}
</style><div id="animation75">逆境清醒</div>top样式属性定义了定位元素的上外边距边界与其包含块上边界之间的偏移，非定位元素设置此属性无效。
六、transform属性（转换由盒模型定位的元素）
transform 属性允许你旋转，缩放，倾斜或平移给定元素。
这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。
<style>
#animation76 {
top:80px;
width: 150px;
height:50px;
margin: auto;
border: 2px solid #111111;
background-color:lightblue;
color:black;
-webkit-animation: animation76a 1s infinite;
animation: animation76a 1s infinite;
}
@-webkit-keyframes animation76a {
50% {-webkit-transform: rotate(180deg);}
}
@keyframes animation76a {
50% {transform: rotate(180deg);}
}
</style><div id="animation76">逆境清醒</div>transform 属性允许你旋转，缩放，倾斜或平移给定元素。
这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。
只能转换由盒模型定位的元素。
如果元素具有display: block，
则由盒模型定位元素。
七、transform-origin属性（更改一个元素变形的原点）
transform-origin CSS 属性让你更改一个元素变形的原点。
值 描述
x-axis 定义视图被置于 X 轴的何处。
可能的值：left、center、right、length、%
y-axis 定义视图被置于 Y 轴的何处。
可能的值：top、center、bottom、length、%
z-axis 定义视图被置于 Z 轴的何处。
可能的值：length
<style>
#DIV1 {
height: 200px;
width: 200px;
margin: auto;
align-items: center;
border: 1px solid black;
}
#animation77{
width: 150px;
height: 150px;
border: 1px solid black;
background-color: coral;
-ms-transform: rotate(60deg);
-webkit-animation: animation77a 1s infinite;
animation: animation77a 1s infinite;
}
@-webkit-keyframes animation77a{
50% {-webkit-transform-origin: 60 0 0;
-webkit-transform: rotate(60deg);
}
}
@keyframes animation77a{
50% {transform-origin: 60 0 0;
transform: rotate(60deg);
}
}
</style><div id="DIV1">DIV1
<div id="animation77">DIV2</div>
</div>设置旋转元素的基点位置
transform-origin: x-axis y-axis z-axis;
transform-origin: 0 0 0;
transform: rotate(60deg);
transform-origin: 60 0 0;
transform: rotate(60deg);
八、vertical-align属性（垂直对齐方式）
vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
<style>
div{
width: 150px;
height:200px;
}
#animation78 {
border: 5px;
border: 2px solid #111111;
vertical-align: 10px;
background-color:lightblue;
color:black;
-webkit-animation: animation78a 1s infinite;
animation: animation78a 1s infinite;
}
@-webkit-keyframes animation78a {
50% {vertical-align: 50px;}
}
@keyframes animation78a {
50% {vertical-align: 50px;}
}
</style><div><img id="animation78" src="2023p1.png" width="100" height="100">当你孤单无助地面对强敌时，谁会是那个信得过的战友？逆境清醒送你一只守护兔，她会像你爱她一样爱着你，她并不厉害，但即使失败了，小小的她也会再度勇敢站起来，保护自己的朋友们。</div><br />
vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
九、visibility 属性（显示或隐藏元素而不更改文档的布局）
| /* 隐藏段落*/ /* 只有 class 设为 showme 的才会显示*/ /* 折叠 class 设为 col 的行*/ |
visibility 显示或隐藏元素而不更改文档的布局。 该属性还可以隐藏 <table> 中的行或列。 |
| CSS 属性 visibility 显示或隐藏元素而不更改文档的布局。该属性还可以隐藏 <table> 中的行或列。 |
|
| 值 | 描述 |
| visible | 默认值。元素是可见的。正常显示。 |
| hidden | 元素是不可见的。隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。要注意若将其子元素设为 visibility: visible，则该子元素依然可见。 |
| collapse | 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。 关键字对于不同的元素有不同的效果： 用于 <table> 行、列、列组和行组，隐藏表格的行或列，并且不占用任何空间（与将 display: none 用于表格的行/列上的效果相当）。但是，计算其他行和列的大小时，仍会像显示折叠行或列中的单元格一样进行计算。此值允许从表中快速删除行或列，而不强制重新计算整个表的宽度和高度。 |
| inherit | 规定应该从父元素继承 visibility 属性的值。 |
十、width属性（设置元素的宽度）
width 属性用于设置元素的宽度。
width 默认设置内容区域的宽度，但如果 box-sizing 属性被设置为 border-box，就转而设置边框区域的宽度。
width 属性也指定为：
下面关键字值之一：min-content，max-content，fit-content，auto。
一个长度值 <length> 或者百分比值 <percentage>
<style>
#animation80 {
width: 50px;
height:50px;
border: 1px solid black;
background-color:coral;
color:black;
-webkit-animation: animation80a 1s infinite;
animation: animation80a 1s infinite;
}
@-webkit-keyframes animation80a {
50% {width:250px;}
}
@keyframes animation80a {
50% {width: 250px;}
}
</style><div id="animation80">逆境清醒</div>
改变 width 属性：从 50 到 250px
| 值： | |
| <length> | 使用绝对值定义宽度。 |
| <percentage> | 使用外层元素的容纳区块宽度（the containing block's width）的百分比定义宽度。 |
| auto | 浏览器将会为指定的元素计算并选择一个宽度。 |
| max-content 实验性 | 元素内容固有的（intrinsic）合适宽度。 |
| min-content 实验性 | 元素内容固有的最小宽度。 |
| fit-content 实验性 | 取以下两种值中的较大值： 固有的最小宽度 |
十一、word-spacing 属性（设置标签、单词之间的空格长度）
word-spacing 设置标签、单词之间的空格长度
| normal | 正常的单词间距，由当前字体和/或浏览器定义。 |
| <length> | 通过指定具体的额外间距来增加字体的单词间距。 |
| <percentage> | 通过指定受影响字符的宽度的百分比的方式来增加的间距。 |
<style>
#animation81 {
width: 200px;
height:350px;
border: 1px solid black;
background-color:lightblue;
//color:black;
-webkit-animation: animation81a 5s infinite;
animation: animation81a 5s infinite;
}
@-webkit-keyframes animation81a {
50% {word-spacing: 30px;}
}
@keyframes animation81a {
50% {word-spacing: 30px;}
}
</style><div id="animation81">
当你 孤单无助 地 面对 强敌 时，谁 会是 那个 信得过 的 战友 ？ 逆境清醒 送 你 一只 守护兔 ， 她 会 像你爱她 一样 爱着 你，她 并不厉害，但 即使失败 了，小小 的 她 也会 再度 勇敢 站 起来，保护 自己 的 朋友们。
</div>
改变 DIV 元素的 word-spacing 属性 从 "normal" 到 "30px"
词与词之间必须先有空格
十二、z-index属性（定位元素显示层级）
z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。
当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示。
语法
| /* 字符值 */ | z-index: auto; |
| /* 整数值 */ | z-index: 0; z-index: 123; z-index: -1;/* 使用负值降低优先级 */ |
| /* 全局值 */ | z-index: inherit; z-index: initial; z-index: unset; |
z-index 属性可以被设定为关键词 auto 或 <integer>。
| 取值 | 意义 |
| auto | 盒子不会创建一个新的本地堆叠上下文。在当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同。 |
| <integer> | <integer>（整型数字）是生成的盒子在当前堆叠上下文中的堆叠层级。此盒子也会创建一个堆叠层级为 0 的本地堆叠上下文。这意味着后代（元素）的 z-indexes 不与此元素的外部元素的 z-indexes 进行对比。 |
<style>
div {position: absolute;}
#container div {
background-color: lightblue;
border: 2px solid #111111;
width: 100px;
height: 100px;
opacity: 0.5;
}
div#animation82 {
opacity: 1;
background-color: red;
z-index: 1;
-webkit-animation: animation82a 5s infinite linear;
animation: animation82a 3s infinite linear;
}
@-webkit-keyframes animation82a {
50% {z-index: 5;}
}
@keyframes animation82a {
50% {z-index: 5;}
}
</style><div id="container">
<div id="animation82">目标Box</div>
<div style="top:20px;left:20px;z-index:1;">z-index 1</div>
<div style="top:40px;left:40px;z-index:2;">z-index 2</div>
<div style="top:60px;left:60px;z-index:3;">z-index 3</div>
<div style="top:80px;left:80px;z-index:4;">z-index 4</div>
</div>
逐步改变 目标Box 的 z-index 属性 ：从 1 到 5
z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。
当元素之间重叠的时候，
z-index 较大的元素会覆盖
较小的元素在上层进行显示。
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、
推荐阅读：CSS @规则(At-rules)详解系列索引目录
|
|
|
|
| 给照片换底色（python+opencv） | 猫十二分类 | 基于大模型的虚拟数字人__虚拟主播实例 |
|
|
|
|
| 计算机视觉__基本图像操作（显示、读取、保存） | 直方图（颜色直方图、灰度直方图） | 直方图均衡化（调节图像亮度、对比度） |
|
|
|
|
|
|
||
|
|
||
| Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一） | ||
|
|
|
|
| 立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦 | ||
|
|
|
|
| 用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心） |
python爱心源代码集锦（18款） | |
|
|
|
|
|
|
|
|
| 用代码过中秋，python海龟月饼你要不要尝一口？ | ||
|
|
|
|
| 草莓熊python turtle绘图（风车版）附源代码 | ||
|
|
|
|
| 皮卡丘python turtle海龟绘图（电力球版）附源代码 | ||
|
|
|
|
| 2024年6月多家权威机构____编程语言排行榜__薪酬状况 | ||
|
|
|
|
| 【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向) | ||
|
|
|
|
