2023年春节祝福第二弹——送你一只守护兔(下），CSS3 动画相关属性图例实例大全（82种），守护兔源代码免费下载

语法@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% 是动画的完成。

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

一些 CSS 属性是可以有动画效果的这意味着它们可以用于动画和过渡。

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


1、background属性集中定义各种背景属性
<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>	逐步改变背景颜色属性由黄色变蓝色再由蓝色变黄色
background 属性用于一次性集中定义各种背景属性包括 color, image, origin 与 size, repeat 方式等等。此属性是一个简写属性可以在一次声明中定义一个或多个属性background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size和 background-attachment。

2、background-color属性设置元素的背景色
<style> #animation2 { width: 200px; height: 200px; background: green; animation: animation2a 2s infinite; } @keyframes animation2a { 50% { background-color: yellow; } } </style> <div id="animation2">逆境清醒</div>	逐步改变背景颜色属性由绿色变黄色再由黄色变绿色
background-color 会设置元素的背景色属性的值为颜色值或关键字"transparent"二者选其一。

3、background-position属性为背景图片设置初始位置
<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"。
background-position CSS 属性为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的。

4、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"
`background-size` 设置背景图片大小。图片可以保有其原有的尺寸或者拉伸到新的尺寸或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

5、border 属性设置各种单独的边界属性的简写属性

@-webkit-keyframes animation5a {
50% { border: 20px solid red; }
}

@keyframes animation5a {
50%{border: 20px solid red; }
}
</style>

逐步改变 border 属性:

从 "1px 黑色" 到 "20px 红色",

然后回到 "1px 黑色"

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

6、border-bottom属性下边框的所有属性

@-webkit-keyframes animation6a {
50% { border-bottom: 15px solid gold; }
}

@keyframes animation6a {
50% { border-bottom: 15px solid gold; }
}
</style>

border-bottom 属性

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

逐步改变 border-bottom 属性:

从 "1px 黑色" 到 "15px 金色",

然后回到 "1px 黑色"

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

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

改变 border-bottom-color 属性:

从 "1px 黑色" 到 "15px 金色",

然后回到 "1px 黑色"

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

8、border-bottom-left-radius属性元素左下角的圆角

改变 border-bottom-left-radius

属性从 0 到 100px

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;

9、border-bottom-right-radius属性元素右下角的圆角

改变 border-bottom-right-radius

属性从 0 到 100px

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

改变 border-bottom-width 属性

从 0 到 10px

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

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

改变 border-color 属性

从black 到 red

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

12、border-left属性元素左边框所有属性

改变 border-left 属性

从black 到 red

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

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

改变 border-left-color 属性

从 black 到 gold

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

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

改变 border-left-width 属性

从 1px 到 10px

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

<br-width>定义边框的宽度或者作为显性非负的长度值 <length> 或者是关键字。

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

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

15、border-right属性元素的右边的边框border

改变 border-right 属性

从 1px 到 10px

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

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

16、border-right-color 属性元素的右边的边框border颜色

改变 border-right-color 属性

从 black 到 gold

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

改变 border-right-width 属性

从 1px 到 10px:

18、border-spacing属性指定相邻单元格边框之间的距离

改变 border-spacing 属性

从 2px 到 20px

border-spacing 属性指定相邻单元格边框之间的距离只适用于边框分离模式。

相当于 HTML 中的 cellspacing 属性但是第二个可选的值可以用来设置不同于水平间距的垂直间距。

border-spacing 值也适用于表格的外层边框上即表格的边框和第一行的、第一列的、最后一行的、最后一列的单元格之间的间距是由表格相应的水平的或垂直的边框间距border-spacing和相应的上右下或左内边距之和。

该属性只适用于 border-collapse 值是 separate 的时候。

19、border-top属性元素的上方的边框border

改变 border-top 属性

从black到gold

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

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

改变 border-top-color 属性

从black到gold

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

改变 border-top-left-radius 属性

从 0 到 100px

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

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

改变 border-top-right-radius 属性

从 0 到 100px

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

改变 border-top-width 属性

从 1 到 10px

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

24、bottom 属性元素下外边距边界与其包含块下边界之间的偏移

改变 bottom 属性

从 200 到 150px

bottom样式属性定义了定位元素下外边距边界与其包含块下边界之间的偏移非定位元素设置此属性无效。

bottom的效果取决于元素的position属性

当position设置为absolute或fixed时bottom属性指定了定位元素下外边距边界与其包含块下边界之间的偏移。
当position设置为relative时bottom属性指定了元素的下边界离开其正常位置的偏移。
当position设置为sticky时如果元素在 viewport 里面bottom属性的效果和 position 为relative等同如果元素在 viewport 外面bottom属性的效果和 position 为fixed等同。
当position设置为static时bottom属性无效。
当 top和bottom同时指定时并且 height没有被指定或者指定为auto或100%的时候top和bottom都会生效在其他情况下如果 height被限制则top属性会优先设置bottom属性则会被忽略。

25、box-shadow属性在元素的框架上添加阴影效果

改变 box-shadow 属性

从 0 到 100px

box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果并用逗号将他们分隔开。
该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。

对于绝对定位的元素元素下外边距边界与其包含块下边界之间的偏移。对于相对定位定位的元素元素的下边界离开其正常位置的偏移。
<length>:	一个负值、空值或正值代表了
<percentage>	: 包含块高度的百分比<percentage>。
auto:	规定对于绝对定位元素元素将忽略此属性而以top属性为准如果此时设置height: auto将基于内容需要的高度设置宽度如果top也为auto的话元素的垂直位置就是它假如作为静态 (即 static) 元素时该在的位置。对于相对定位元素元素相对正常位置的偏移量将基于top属性如果top也为auto的话元素将不会有偏移。
inherit:	指代有明确计算结果的父级元素的值需要注意的是父级元素并不一定是包裹该子元素的块级元素。该值会根据父级元素的具体情况被处理为<length>, <percentage>或者auto。

26、clip属性定义了元素的哪一部分是可见的

改变 clip 属性

从 150px的正方形

到 50*100px长方形

clip 属性定义了元素的哪一部分是可见的。

clip 属性只适用于 position:absolute 的元素。

已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它但也许已从相关的 web 标准中移除也许正准备移除或出于兼容性而保留。请尽量不要使用该特性并更新现有的代码参见本页面底部的兼容性表格以指导你作出决定。请注意该特性随时可能无法正常工作。

27、color 属性设置颜色值的前景色以及文本装饰

改变 color 属性

从黑到红

color 属性设置颜色值的前景色以及文本装饰并设置currentcolor (en-US)值。
currentcolor可以对其他颜色属性用作不直接的值

语法
/* 关键词 */
color: currentcolor;

/* <named-color>值 */
color: orange;
color: tan;
color: rebeccapurple;

/* <hex-color>值 */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/* <rgb()>值 */
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34.0 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

/* <hsl()>值 */
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.0 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

/* 全局值 */
color: inherit;
color: initial;
color: unset;

28、column-count属性描述元素的列数

<div id="animation28">当你孤单无助地面对强敌时谁会是那个信得过的战友逆境清醒送你一只守护兔她会像你爱她一样爱着你她并不厉害但即使失败了小小的她也会再度勇敢站起来保护自己的朋友们。</div>

改变列数

从 1 到 3

column-count CSS 属性描述元素的列数。

29、column-gap属性设置元素列之间的间隔大小

<div id="animation29">当你孤单无助地面对强敌时谁会是那个信得过的战友逆境清醒送你一只守护兔她会像你爱她一样爱着你她并不厉害但即使失败了小小的她也会再度勇敢站起来保护自己的朋友们。</div>

改变列的间隔属性

从普通到 100px

column-gap 属性用来设置元素列之间的间隔gutter大小。

normal
表示列之间的间隔宽度。在多列布局时默认间隔为 1em其他类型布局默认间隔为 0。

<length>
用 <length> 来定义列之间的间隔大小。而且 <length> 值必须是非负数的。

<percentage>
用 <percentage>百分比来定义列之间的间隔大小。同样的<percentage> 值也必须是非负数的。

30、column-rule属性设定分割线的宽度、样式和颜色

<div id="animation30">当你孤单无助地面对强敌时谁会是那个信得过的战友逆境清醒送你一只守护兔她会像你爱她一样爱着你她并不厉害但即使失败了小小的她也会再度勇敢站起来保护自己的朋友们。</div>

改变列间的规则

从黑色1px间隔

到金色20px间隔

column-rule 简写属性可以在多列布局中设定分割线的宽度、样式和颜色。

31、column-rule-color属性被画在两列之间的规则线条的颜色

<div id="animation31">当你孤单无助地面对强敌时谁会是那个信得过的战友逆境清醒送你一只守护兔她会像你爱她一样爱着你她并不厉害但即使失败了小小的她也会再度勇敢站起来保护自己的朋友们。</div>

改变列间的规则颜色

从黑色间隔

到绿色间隔

column-rule-color 让你可以设置在多列布局中被画在两列之间的规则线条的颜色。

32、column-rule-width属性被画在两列之间的规则线条的宽度

<div id="animation32">当你孤单无助地面对强敌时谁会是那个信得过的战友逆境清醒送你一只守护兔她会像你爱她一样爱着你她并不厉害但即使失败了小小的她也会再度勇敢站起来保护自己的朋友们。</div>

改变列的宽度属性

从 1 到 50px

column-rule-width 让你可以设置在多列布局中被画在两列之间的规则线条的宽度。

33、column-width 属性设置列宽

<div id="animation33">当你孤单无助地面对强敌时谁会是那个信得过的战友逆境清醒送你一只守护兔她会像你爱她一样爱着你她并不厉害但即使失败了小小的她也会再度勇敢站起来保护自己的朋友们。</div>

改变列间的宽度属性

从 5 到 20px

column-width属性在多列布局中设置理想的列宽。
容器将具有尽可能多的列而其中任何列的宽度都小于该值。
如果容器的宽度小于指定值则单列的宽度将小于声明的列宽。

34、columns属性设置元素的列宽和列数

<div id="animation34">当你孤单无助地面对强敌时谁会是那个信得过的战友逆境清醒送你一只守护兔她会像你爱她一样爱着你她并不厉害但即使失败了小小的她也会再度勇敢站起来保护自己的朋友们。</div>

改变 columns 属性

间隔50px4列

columns 用来设置元素的列宽和列数。

35、filter属性调整图像、背景和边框的渲染

filter: blur(5px);

改变改变图片的颜色

将图像转换为灰阶

filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

滤镜函数

注释使用百分比值例如 75％的滤镜也接受该值是十进制例如 0.75。

滤镜	描述
none	默认值。规定无效果。
blur(px)	对图像应用模糊效果。较大的值将产生更多的模糊。如果为指定值则使用 0。
brightness(%)	调整图像的亮度。 0％将使图像完全变黑。默认值是 100％代表原始图像。值超过 100％将提供更明亮的结果。
contrast(%) contrast(200%)	调整图像的对比度。 0％将使图像完全变黑。默认值是 100％代表原始图像。超过 100％的值将提供更具对比度的结果。
drop-shadow(h-shadow v-shadow blur spread color) filter: drop-shadow(5px 5px 10px red) invert(40%);	对图像应用阴影效果。可能的值 h-shadow - 必需。指定水平阴影的像素值。负值会将阴影放置在图像的左侧。 v-shadow - 必需。指定垂直阴影的像素值。负值会将阴影放置在图像上方。 blur -可选。这是第三个值单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多阴影会变得更大更亮。不允许负值。如果未规定值会使用 0阴影的边缘很锐利。 spread - 可选。这是第四个值单位必须用像素。正值将导致阴影扩展并增大负值将导致阴影缩小。如果未规定值会使用 0阴影与元素的大小相同。注释Chrome、Safari 和 Opera也许还有其他浏览器不支持第 4 个长度如果添加则不会呈现。 color - 可选。为阴影添加颜色。如果未规定则颜色取决于浏览器通常为黑色。这个例子创建了红色的阴影水平和垂直方向均为 8px带有 10px 的模糊效果 filter: drop-shadow(8px 8px 10px red); 提示这个滤镜类似 box-shadow 属性。
grayscale(%) filter: grayscale(80%);	将图像转换为灰阶。 0% (0) 是默认值代表原始图像。 100％将使图像完全变灰用于黑白图像。注释不允许负值。
hue-rotate(deg) filter: hue-rotate(120deg);	在图像上应用色相旋转。该值定义色环的度数。默认值为 0deg代表原始图像。注释最大值是 360deg。
invert(%) filter: invert(75%);	反转图像中的样本。 0% (0) 是默认值代表原始图像。 100％将使图像完全反转。注释不允许负值。
opacity(%) filter: opacity(25%);	设置图像的不透明度级别。opacity-level 描述了透明度级别其中 0% 为完全透明。 100% (1) 是默认值代表原始图像不透明。注释不允许负值。提示这个滤镜类似 opacity 属性。
saturate(%) filter: saturate(30%);	设置图像的饱和度。 0% (0) will make the image completely un-saturated. 100% is default and represents the original image. Values over 100% provides super-saturated results. 注释不允许负值。
sepia(%) filter: sepia(60%);	将图像转换为棕褐色。 0% (0) 是默认值代表原始图像。 100％将使图像完全变为棕褐色。注释不允许负值。
url()	url() 函数接受规定 SVG 滤镜的 XML 文件的位置并且可以包含指向特定滤镜元素的锚点。实例 filter: url(svg-url#element-id)
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

滤镜

描述

none

默认值。规定无效果。

blur(px)

对图像应用模糊效果。较大的值将产生更多的模糊。

如果为指定值则使用 0。

brightness(%)

调整图像的亮度。

0％将使图像完全变黑。
默认值是 100％代表原始图像。
值超过 100％将提供更明亮的结果。

contrast(%)

contrast(200%)

调整图像的对比度。

0％将使图像完全变黑。
默认值是 100％代表原始图像。
超过 100％的值将提供更具对比度的结果。

drop-shadow(h-shadow v-shadow blur spread color)

filter: drop-shadow(5px 5px 10px red) invert(40%);

对图像应用阴影效果。

可能的值

h-shadow - 必需。指定水平阴影的像素值。负值会将阴影放置在图像的左侧。
v-shadow - 必需。指定垂直阴影的像素值。负值会将阴影放置在图像上方。

blur -可选。这是第三个值单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多阴影会变得更大更亮。不允许负值。如果未规定值会使用 0阴影的边缘很锐利。

spread - 可选。这是第四个值单位必须用像素。正值将导致阴影扩展并增大负值将导致阴影缩小。如果未规定值会使用 0阴影与元素的大小相同。

注释Chrome、Safari 和 Opera也许还有其他浏览器不支持第 4 个长度如果添加则不会呈现。

color - 可选。为阴影添加颜色。如果未规定则颜色取决于浏览器通常为黑色。

这个例子创建了红色的阴影水平和垂直方向均为 8px带有 10px 的模糊效果

filter: drop-shadow(8px 8px 10px red);

提示这个滤镜类似 box-shadow 属性。

grayscale(%)

filter: grayscale(80%);

将图像转换为灰阶。

0% (0) 是默认值代表原始图像。
100％将使图像完全变灰用于黑白图像。

注释不允许负值。

hue-rotate(deg)

filter: hue-rotate(120deg);

在图像上应用色相旋转。该值定义色环的度数。默认值为 0deg代表原始图像。

注释最大值是 360deg。

invert(%)

filter: invert(75%);

反转图像中的样本。

0% (0) 是默认值代表原始图像。
100％将使图像完全反转。

注释不允许负值。

opacity(%)

filter: opacity(25%);

设置图像的不透明度级别。opacity-level 描述了透明度级别其中

0% 为完全透明。
100% (1) 是默认值代表原始图像不透明。

注释不允许负值。

提示这个滤镜类似 opacity 属性。

saturate(%)

filter: saturate(30%);

设置图像的饱和度。

0% (0) will make the image completely un-saturated.
100% is default and represents the original image.
Values over 100% provides super-saturated results.

注释不允许负值。

sepia(%)

filter: sepia(60%);

将图像转换为棕褐色。

0% (0) 是默认值代表原始图像。
100％将使图像完全变为棕褐色。

注释不允许负值。

url()

url() 函数接受规定 SVG 滤镜的 XML 文件的位置并且可以包含指向特定滤镜元素的锚点。实例

filter: url(svg-url#element-id)

initial

将此属性设置为其默认值。

inherit

从其父元素继承此属性。

36、flex属性设置弹性项目增大或缩小

#flex-container > .flex-item {
flex: auto;
background-color:lightblue;
}

#flex-container > .animation36 {
width: 5rem;
background-color:red;
}
#animation36 {
//border: 1px solid black;
-webkit-a10imation: animation36a 1s infinite;
animation: animation36a 1s infinite;
}
@-webkit-keyframes animation36a {
50% {flex-basis:180px;}
}
@keyframes animation36a {
50% {flex-basis:180px;}
}
</style>

flex CSS 简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。

初始值
flex-grow: 0
flex-shrink: 1
flex-basis: auto

可以使用一个两个或三个值来指定 flex属性。

单值语法: 值必须为以下其中之一
一个无单位数 (<number>): 它会被当作 flex:<number> 1 0; <flex-shrink>的值被假定为 1然后<flex-basis> 的值被假定为0。
一个有效的宽度 (width) 值它会被当作 <flex-basis> 的值。
关键字noneauto或initial.

双值语法: 第一个值必须为一个无单位数并且它会被当作 <flex-grow> 的值。第二个值必须为以下之一
一个无单位数它会被当作 <flex-shrink> 的值。
一个有效的宽度值它会被当作 <flex-basis> 的值。

三值语法
第一个值必须为一个无单位数并且它会被当作 <flex-grow> 的值。
第二个值必须为一个无单位数并且它会被当作 <flex-shrink> 的值。
第三个值必须为一个有效的宽度值并且它会被当作 <flex-basis> 的值。

取值
initial	元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为"flex: 0 1 auto"。
auto	元素会根据自身的宽度与高度来确定尺寸但是会伸长并吸收 flex 容器中额外的自由空间也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto".
none	元素会根据自身宽高来设置尺寸。它是完全非弹性的既不会缩短也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。
<'flex-grow'>	定义 flex 项目的 flex-grow 。负值无效。省略时默认值为 1。 (初始值为 0)
<'flex-shrink'>	定义 flex 元素的 flex-shrink 。负值无效。省略时默认值为1。 (初始值为 1)
<'flex-basis'>	定义 flex 元素的 flex-basis 属性。若值为0则必须加上单位以免被视作伸缩性。省略时默认值为 0。(初始值为 auto)

37、flex-basis 属性 flex 元素在主轴方向上的初始大小

#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 5px;
}
#animation37 {
border: 1px solid black;
-webkit-a10imation: animation37a 1s infinite;
animation: animation37a 1s infinite;
}
@-webkit-keyframes animation37a
{ 50% {flex-basis:200px;} }
@keyframes animation37a
{ 50% {flex-basis:200px;} }
</style>

<div id="main">
<div style="background-color:black;"></div>
<div style="background-color:red;" id="animation37">flex-basisDIV</div>
</div>

flex-basis 指定了

flex 元素在主轴方向上的初始大小。

如不使用 box-sizing 改变盒模型

这个属性就决定了 flex 元素的内容盒content-box的尺寸。

flex-basis 指定了 flex 元素在主轴方向上的初始大小。

如果不使用 box-sizing 改变盒模型的话那么这个属性就决定了 flex 元素的内容盒content-box的尺寸。

38、flex-grow属性flex 项主尺寸的 flex 增长系数

<style>

#main {
width: 100px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
}

#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 1;}
#main div:nth-of-type(3) {flex-grow: 1;}

#animation38
{
animation:animation38a 5s infinite;
-webkit-animation:animation38a 5s infinite;
}

@keyframes animation38a
{50% {flex-grow:8;}}
@-webkit-keyframes animation38a
{50% {flex-grow:8;}}
</style>

flex-grow 设置 flex 项主尺寸的 flex 增长系数。

这个属性规定了 flex-grow 项在 flex 容器中分配剩余空间的相对比例。flex-grow CSS 设置 flex 项主尺寸的 flex 增长系数

主尺寸是项的宽度或高度这取决于flex-direction值。

剩余空间是 flex 容器的大小减去所有 flex 项的大小加起来的大小。

如果所有的兄弟项目都有相同的 flex-grow 系数那么所有的项目将剩余空间按相同比例分配否则将根据不同的 flex-grow 定义的比例进行分配。

flex-grow 与其他的 flex 属性flex-shrink和flex-basis一起使用通常使用flex 速记来定义以确保所有的值都被设置。

39、flex-shrink属性 flex 元素的收缩规则

#content div {
flex-basis: 120px;
border: 1px solid rgba(0,0,0,.5);
}

.box { flex-shrink: 1;}

.box1 { flex-shrink: 2; }
</style>

<div id="content">
<div class="box" style="background-color:red;">flex-shrink:1</div>
<div class="box" style="background-color:yellow;">flex-shrink:1</div>
<div class="box" style="background-color:lightblue;">flex-shrink:1</div>
<div class="box1" style="background-color:lightgreen;">flex-shrink:2</div>
</div>

flex-shrink 属性指定了 flex 元素的收缩规则。

flex 元素仅在默认宽度之和大于容器的时候才会发生收缩其收缩的大小是依据 flex-shrink 的值。

如果元素不是弹性盒对象的元素则 flex-shrink 属性不起作用。

40、font 属性所有字体属性

@-webkit-keyframes animation40a
{ 50% {font: 25px bold; }}
@keyframes animation40a
{ 50% {font: 25px bold; }}
</style>

<div id="animation40">
<p>font 属性是所有字体属性的简写</p>
</div>

改变 font 属性

font: 25px bold

font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写或将元素的字体设置为系统字体

值	Font 特性描述
font-style	规定字体样式。
font-variant	规定字体异体
font-weight	规定字体粗细。
font-size/line-height	规定字体尺寸和行高。
font-family	规定字体系列。
caption	定义被标题控件比如按钮、下拉列表等使用的字体。
icon	定义被图标标记使用的字体。
menu	定义被下拉列表使用的字体。
message-box	定义被对话框使用的字体。
small-caption	caption 字体的小型版本。
status-bar	定义被窗口状态栏使用的字体。

41、font-size属性指定字体的大小

改变 font-size 属性

从 font-size: xx-small;

到

font-size: 40px;

font-size CSS 属性指定字体的大小。
因为该属性的值会被用于计算 em 和 ex 长度单位定义该值可能改变其他元素的大小

<absolute-size>绝对大小值

font-size: xx-small;

font-size: x-small;

font-size: small;

font-size: medium;

font-size: large;

font-size: x-large;

font-size: xx-large;

<relative-size>相对大小值

font-size: larger;

font-size: smaller;

<length>长度值

font-size: 12px;

font-size: 0.8em;

<percentage>百分比值

font-size: 80%; font-size:250%font-size:200%

font-size: inherit;

JavaScript 语法object.style.fontSize="larger"

42、font-size-adjust 属性调整字体大小

font-size-adjust属性通过指定font-size-adjust属性浏览器将调整字体大小无论字体系列
让您更好的控制字体大小当第一个选择的字体不可用时浏览器使用第二个指定的字体。

这可能会导致改变字体大小。为了防止这种情况使用的font-size-adjust属性。

所有字体都能有"aspect值"这是小写字母"X"和大写字母"X"的大小差异。

当浏览器知道"aspect值"为第一选择的字体时浏览器可以找出什么样的font-size使用第二选择字体显示文字。

目前支持的浏览器数量不足暂不举例

font-size-adjust CSS 属性定义字体大小应取决于小写字母而不是大写字母。在字体较小时字体的可读性主要由小写字母的大小决定通过此选项即可进行调整。

43、font-stretch属性定义字体外观

<style>

@font-face {
src: url('fonts/LeagueMonoVariable.ttf');
font-family:'LeagueMonoVariable';
font-style: normal;
font-stretch: 1% 500%; /* Required by Chrome */
}

.container { font: 1.5rem 'LeagueMonoVariable', sans-serif;}

.condensed { font-stretch: 50%;}

.normal { font-stretch: 100%;}

.expanded { font-stretch: 200%;}

<style>

<div class="container">
<p class="condensed">LeagueMonoVariable</p>
<p class="normal">LeagueMonoVariable</p>
<p class="expanded">LeagueMonoVariable</p>
</div>

Chrome浏览器

font-stretch 属性
为字体定义一个正常或经过伸缩变形的字体外观这个属性并不会通过伸展/缩小而改变字体的几何外形
如font-feature-settings和font-variant属性
它仅仅意味着当有多种字体可供选择时会为字体选择最适合的大小。

normal
指定默认字体

semi-condensed, condensed, extra-condensed, ultra-condensed
小于默认字体其中 ultra-condensed 是缩的最小的字体

semi-expanded, expanded, extra-expanded, ultra-expanded
大于默认字体的值

44、font-weight属性指定字体的粗细程度

改变 font-weight属性

从 font-weight: lighter;

到 font-weight: bolder;

font-weight CSS 属性指定了字体的粗细程度。

一些字体只提供 normal 和 bold 两种值。

normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100~900 定义由细到粗的字符。400 等同于 normal而 700 等同于 bold。
inherit 规定应该从父元素继承字体的粗细。
JavaScript 语法 object.style.fontWeight="900"

45、height属性元素的高度

改变 height属性

从height: 50px;

到 height: 200px;

height CSS 属性指定了一个元素的高度。

默认情况下这个属性决定的是内容区 content area的高度

但是如果将 box-sizing 设置为 border-box ,

这个属性决定的将是边框区域border area的高度。

46、left属性元素的左外边距边界与其包含块左边界之间的偏移

left属性定义了

定位元素的左外边距边界与其包含块左边界之间的偏移

非定位元素设置此属性无效。

left属性定义了

定位元素的左外边距边界与其包含块左边界之间的偏移

非定位元素设置此属性无效。

left的效果取决于元素的position属性

当position设置为absolute或fixed时left属性指定了定位元素左外边距边界与其包含块左边界之间的偏移。
当position设置为relative时left属性指定了元素的左边界离开其正常位置的偏移。
当position设置为sticky时如果元素在 viewport 里面left属性的效果和 position 为relative等同如果元素在 viewport 外面left属性的效果和 position 为fixed等同。
当position设置为static时left属性无效。
当left和right 同时指定时元素的位置会被重复指定。当容器是从左到右时left的值会被优先设定当容器是从右到左时right的值会被优先设定。

47、letter-spacing属性字符间距的大小

@-webkit-keyframes animation47a {
50% {letter-spacing: 20px; }
}

@keyframes animation47a {
50% { letter-spacing: 20px; }
}
</style>

<div id="animation47"><p>当你孤单无助地面对强敌时谁会是那个信得过的战友逆境清醒送你一只守护兔。</p></div>

letter-spacing 属性

增加或减少字符间的空白

表现效果为字符间距的大小

改变 letter-spacing 属性

从 letter-spacing: normal;

到 letter-spacing: 20px;

letter-spacing 属性

增加或减少字符间的空白

表现效果为字符间距的大小

normal 默认。规定字符间没有额外的空间。
length 定义字符间的固定空间允许使用负值。
inherit 规定应该从父元素继承 letter-spacing 属性的值。

48、line-height 属性设置多行元素的空间量

<div id="animation48"><p>当你孤单无助地面对强敌时谁会是那个信得过的战友逆境清醒送你一只守护兔。</p></div>

改变 line-height 属性

从 line-height: normal;

到 line-height: 50px;

line-height CSS 属性用于设置多行元素的空间量如多行文本的间距。
对于块级元素它指定元素行盒line boxes的最小高度。
对于非替代的 inline 元素它用于计算行盒line box的高度。

49、margin 属性设置元素的边距属性

改变 margin 属性

从 margin: 0;

到 margin:50px;

auto 浏览器计算外边距。
length 规定以具体单位计的外边距值比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的外边距。
inherit 规定应该从父元素继承外边距。

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

margin:1px 2px 3px 4px;
上边距是 1px
右边距是 2px
下边距是 3px
左边距是 4px

margin:10px 50px 60px;
上边距是 10px
右边距和左边距是 50px
下边距是 60px

margin:10px 50px;
上边距和下边距是 10px
右边距和左边距是 50px

margin:10px;
所有四个边距都是 10px

JavaScript 语法 object.style.margin="10px 50px"

50、margin-bottom属性设置元素的下边距

@-webkit-keyframes animation50a
{ 50% {margin-bottom: 50px; } }

@keyframes animation50a
{ 50% {margin-bottom: 50px; } }
</style>

改变 margin-bottom 属性

从 margin-bottom: 0;

到 margin-bottom: 50px;

margin-bottom属性设置元素的下边距。
auto 浏览器计算下外边距。
length 规定以具体单位计的下外边距值比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的下外边距。
inherit 规定应该从父元素继承下外边距。

51、margin-left 属性设置元素的左边距

#animation51 {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: #c1ffc1;
color: black;
margin-left: 0;
-webkit-animation: animation51a 1s infinite;
animation: animation51a 1s infinite;
}

@-webkit-keyframes animation51a {
50% { margin-left: 50px; } }

@keyframes animation51a {
50% { margin-left: 50px; } }
</style>

改变 margin-left 属性

从 margin-left: 0;

到 margin-left: 50px;

52、margin-right 属性设置元素的右边距

@-webkit-keyframes animation52a {
50% { margin-right: 90%; } }

@keyframes animation52a {
50% { margin-right: 90%; } }
</style>

改变 margin-right 属性

从 margin-right: 99%;

到 margin-right: 90%;

53、margin-top属性设置元素的顶边距

@-webkit-keyframes animation53a {
50% { margin-top: 10%; } }

@keyframes animation53a {
50% { margin-top: 10%; } }
</style>

改变 margin-top 属性

从 margin-top: 1%;

到 margin-top: 10%;

54、max-height 属性设置元素的最大高度

@-webkit-keyframes animation54a {
50% { max-height: 80px; } }

@keyframes animation54a {
50% { max-height: 80px; } }
</style>

<div id="animation54"><p>逆境清醒2023年春节祝福第二弹——逆境清醒送你一只守护兔让它温暖每一个你</p></div>

改变 max-height 属性

从默认

到 max-height: 80px;

max-height 属性设置元素的最大高度。它可以防止 height 属性的已用值大于为指定的值。
max-height属性不包括填充边框或页边距
none   定义对元素被允许的最大高度没有限制。默认。
length   定义元素的最大高度值。
%   定义基于包含它的块级对象的百分比最大高度。
inherit   规定应该从父元素继承 max-height 属性的值。

55、max-width属性设置元素的最大宽度

@-webkit-keyframes animation55a {
50% { max-width: 120px; } }

@keyframes animation55a {
50% { max-width: 120px; } }
</style>

<div id="animation55"><p>逆境清醒2023年春节祝福第二弹——逆境清醒送你一只守护兔让它温暖每一个你</p></div>

改变属性

从 0 到 100px

max-width属性设置元素的最大宽度

56、min-height属性设置元素的最低高度

@-webkit-keyframes animation56a {
50% { min-height: 260px; } }

@keyframes animation56a {
50% { min-height: 260px; } }
</style>

<div id="animation56"><p>逆境清醒2023年春节祝福第二弹——逆境清醒送你一只守护兔让它温暖每一个你</p></div>

改变 min-height 属性

从 min-height: 50px;

到 min-height: 260px;

min-height 属性设置元素的最低高度。属性不包括填充边框或页边距

length 定义元素的最小高度。默认值是 0。
% 定义基于包含它的块级对象的百分比最小高度。
inherit 规定应该从父元素继承 min-height 属性的值。

57、min-width属性设置元素的最低宽度

@-webkit-keyframes animation57a {
50% {min-width: 200px; } }

@keyframes animation57a {
50% { min-width: 200px; } }
</style>

改变 min-width 属性

从 50px

到 min-width: 200px;

58、opacity 属性设置一个元素的透明度级别

@keyframes animation58a {
50% { opacity: 0; } }
</style>

<div id="bjb"><h1>我是背景板</h1></div>
<div id="animation58"><h1>我会隐形</h1></div>

改变属性

从 0 到 100px

opacity 属性设置一个元素的透明度级别。
value 指定不透明度。从0.0完全透明到1.0完全不透明
inherit Opacity属性的值应该从父元素继承

59、order 属性设置布局时的顺序

#main div {
width: 100px;
height: 100px;
}

#animation59 {
animation: animation59a 2s infinite;
-webkit-animation: animation59a 2s infinite;
}

@keyframes animation59a {
50% { order: 7; } }

@-webkit-keyframes animation59a {
50% { order: 7; } }
</style>

改变 order 属性

改变红色 DIV 元素的显示顺序

从 1 到 6 再回到 1

order 属性规定弹性项目相对于同一容器内其余弹性项目的顺序。
规定了弹性容器中的可伸缩项目在布局时的顺序。
元素按照 order 属性的值的增序进行布局。
拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。
order 仅仅对元素的视觉顺序 (visual order) 产生作用
并不会影响元素的逻辑或 tab 顺序。
order 不可以用于非视觉媒体
如果元素不是弹性项目则 order 属性无效。

初始值0

60、outline 属性设置outline元素周围的轮廓

@-webkit-keyframes animation60a {
50% { outline: 15px dashed lightblue; } }

@keyframes animation60a {
50% { outline: 15px dashed lightblue; } }
</style>

改变 outline 属性

从 outline: 1px solid black;

到 outline: 15px dashed lightblue;

设置outline元素周围的轮廓
outline是绘制于元素周围的一条线位于边框边缘的外围可起到突出元素的作用。

outline简写属性在一个声明中设置所有的轮廓属性。

可以设置的属性分别是outline-color, outline-style, outline-width
outline-color   规定边框的颜色。
outline-style   规定边框的样式。
参阅outline-width 中可能的值。
inherit   规定应该从父元素继承 outline 属性的设置。

61、outline-color 属性设置元素周围的轮廓颜色

@-webkit-keyframes animation61a {
50% { outline: 15px dashed lightblue; } }

@keyframes animation61a {
50% { outline: 15px dashed lightblue; } }
</style>

改变 outline-color 属性

从 black 到 lightblue

62、outline-offset属性(设置在 border 边缘外的偏移)

@-webkit-keyframes animation62a {
50% {outline-offset: 30px;}}

@keyframes animation62a {
50% {outline-offset: 30px;}}
</style>

改变 outline-offset 属性

从 0 到 100px

outline-offset属性设置轮廓框架在 border 边缘外的偏移

Outlines在两个方面不同于边框

Outlines 不占用空间
Outlines 可能非矩形

63、outline-width属性指定轮廓的宽度

@-webkit-keyframes animation63a {
50% {outline-width: 30px; }}

@keyframes animation63a {
50% {outline-width: 30px;}}
</style>

改变 outline-width 属性

从 5px 到

30px

outline-width指定轮廓的宽度。
outline是围绕元素。它是围绕元素的边距。但是它是来自不同的边框属性。

outline不是元素尺寸的一部分因此元素的宽度和高度属性不包含轮廓的宽度。
thin 规定细轮廓。
medium 默认。规定中等的轮廓。
thick 规定粗的轮廓。
length 允许您规定轮廓粗细的值。
inherit 规定应该从父元素继承轮廓宽度的设置。

64、padding属性设置元素的内容和边框之间的区域

<div id="animation64">逆境清醒2023年春节祝福第二弹——逆境清醒送你一只守护兔让它温暖每一个你</div>

改变 padding 属性

从 0 到 30px

内边距padding是指一个元素的内容和边框之间的区域。
和外边距margin不同
内边距padding是不允许有负值的。
内边距padding可以用四个值声明一个元素的四个方向的内边距paddings

padding:1px 2px 3px 4px;
上边距是 1px
右边距是 2px
下边距是 3px
左边距是 4px

padding:10px 50px 60px;
上边距是 10px
右边距和左边距是 50px
下边距是 60px

padding:10px 50px;
上边距和下边距是 10px
右边距和左边距是 50px

padding:10px;
所有四个边距都是 10px

65、padding-bottom属性设置元素的内边距中下方的高度

@-webkit-keyframes animation66a {
50% { padding-bottom: 60px; } }

@keyframes animation66a {
50% { padding-bottom: 60px; } }
</style>

<div id="animation66">逆境清醒2023年春节祝福第二弹——逆境清醒送你一只守护兔让它温暖每一个你</div>

改变 padding-bottom 属性

从 0 到 100px

padding-bottom 是指一个元素在内边距区域padding area中下方的高度。

66、padding-left 属性元素在内边距区域中左边的宽度

@-webkit-keyframes animation67a {
50% { padding-left: 50px; } }

@keyframes animation67a {
50% { padding-left: 50px; } }
</style>

<div id="animation66">逆境清醒2023年春节祝福第二弹——逆境清醒送你一只守护兔让它温暖每一个你</div>

改变 padding-left 属性

到 50px

padding-left 是指一个元素在内边距区域padding area中左边的宽度

67、padding-right 属性元素在内边距区域中右边的宽度

@-webkit-keyframes animation68a {
50% { padding-right: 50px; } }

@keyframes animation68a {
50% { padding-right: 50px; } }
</style>

<div id="animation67">逆境清醒2023年春节祝福第二弹——逆境清醒送你一只守护兔让它温暖每一个你</div>

改变 padding-right 属性

到 50px

padding-right 是指一个元素在内边距区域padding area中右边的宽度

68、padding-top属性元素在内边距区域中上方的宽度

@-webkit-keyframes animation69a {
50% { padding-top: 60px; } }

@keyframes animation69a {
50% { padding-top: 60px; } }
</style>

<div id="animation68">逆境清醒2023年春节祝福第二弹——逆境清醒送你一只守护兔让它温暖每一个你</div>

改变 padding-top 属性

到 60px

padding-top属性是指一个元素在内边距区域padding area中上方的宽度

69、perspective属性指定了观察者与 z=0 平面的距离

<style>

.pers500 { perspective: 500px; }

.container {
width: 200px;
height: 200px;
margin: 75px 0 0 75px;
border: none;
}

.cube {
width: 100%;
height: 100%;
backface-visibility: visible;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
}

.face {
display: block;
position: absolute;
width: 100px;
height: 100px;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}

.front {
background: rgb(0, 0, 0, 0.20);
transform: translateZ(50px);
}

.back {
background: rgba(0, 255, 0, 1);
color: black;
transform: rotateY(180deg) translateZ(50px);
}

.right {
background: rgba(196, 0, 0, 0.8);
transform: rotateY(90deg) translateZ(50px);
}

.left {
background: rgba(0, 0, 196, 0.8);
transform: rotateY(-90deg) translateZ(50px);
}

.top {
background: rgba(196, 196, 0, 0.8);
transform: rotateX(90deg) translateZ(50px);
}

.bottom {
background: rgba(196, 0, 196, 0.8);
transform: rotateX(-90deg) translateZ(50px);
}

th, p, td {
background-color: #EEEEEE;
padding: 10px;
font-family: sans-serif;
text-align: left;
}
</style>

perspective 指定了观察者与 z=0 平面的距离使具有三维位置变换的元素产生透视效果。

z>0 的三维元素比正常大

而 z<0 时则比正常小

大小程度由该属性的值决定。

CSS 属性 perspective 指定了观察者与 z=0 平面的距离使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大而 z<0 时则比正常小大小程度由该属性的值决定。

三维元素在观察者后面的部分不会绘制出来即 z 轴坐标值大于 perspective 属性值的部分。

默认情况下消失点位于元素的中心但是可以通过设置 perspective-origin 属性来改变其位置。

当该属性值不为 0 和 none 时会创建新的层叠上下文。

在这种情况下容器内元素的层叠关系像是使用了 position: fixed 一样。

标准语法perspective = none | <length [0,∞]>
none 没有应用 perspective 样式时的默认值。

<length> <length> 指定观察者距离 z=0 平面的距离为元素及其内容应用透视变换。

当值为 0 或负值时无透视变换。

70、perspective-origin属性设置3D元素的基数位置

<div id="animation70">DIV1
<div id="div2">DIV2 猫的智商很高懂得主人的话只是不想理你。</div>
</div>

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

71、right属性元素的右边缘

right 属性规定元素的右边缘。

right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。

如果 "position" 属性的值为 "static"那么设置 "right" 属性不会产生任何效果。
对于 static 元素为 auto对于长度值则为相应的绝对长度对于百分比数值为指定值否则为 auto。对于相对定义元素left 的计算值始终等于 right。
auto   默认值。通过浏览器计算右边缘的位置。
%   设置以包含元素的百分比计的右边位置。可使用负值。
length   使用 px、cm 等单位设置元素的右边位置。可使用负值。
inherit   规定应该从父元素继承 right 属性的值。

72、text-decoration-color 属性设置文本修饰线的颜色

text-decoration-color

用于设置文本修饰线的颜色

文本修饰线是通过 text-decoration-line 属性指定的。

修饰线包括下划线、上划线、删除线和波浪线

波浪线的典型用途是标明内容拼写错误仅举例。

被指定的颜色会作用到该属性值有效范围内的所有修饰线上。

text-decoration-color 用于设置文本修饰线的颜色文本修饰线是通过 text-decoration-line 属性指定的。

修饰线包括下划线、上划线、删除线和波浪线

CSS 没有直接的机制为每种线型指定唯一的颜色

不过可以通过嵌套元素的方法来实现这种效果用 text-decoration-line 属性为每个元素应用一种线型

再用 text-decoration-color 指定线的颜色。

73、text-indent属性块元素首行文本内容之前的缩进量

<div id="animation73">猫的智商很高懂得主人的话只是不想理你。猫的智商很高懂得主人的话只是不想理你。</div>

text-indent 属性能定义一个块元素首行文本内容之前的缩进量。

text-indent = [ <length-percentage> ] && hanging? && each-line?

Values
<length>
使用固定的<length>值来指定文本的缩进。允许使用负值。查阅可能的 <length> 单位。

<percentage>
使用包含块宽度的百分比作为缩进。

each-line 实验性
文本缩进会影响第一行以及使用<br>强制断行后的第一行。

hanging 实验性
该值会对所有的行进行反转缩进除了第一行之外的所有的行都会被缩进看起来就像第一行设置了一个负的缩进值。

74、text-shadow属性添加阴影)

text-shadow 为文字添加阴影。

可以为文字与 decoration 添加多个阴影阴影值之间用逗号隔开。

每个阴影值由元素在 X 和 Y 方向的偏移量、模糊半径和颜色值组成。

当阴影大于一个时要用逗号区别开阴影之间的参数。

每个阴影都有两到三个 <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。

75、top 属性元素的上外边距边界与其包含块上边界之间的偏移

top样式属性定义了定位元素的上外边距边界与其包含块上边界之间的偏移非定位元素设置此属性无效。

76、transform属性转换由盒模型定位的元素

transform 属性允许你旋转缩放倾斜或平移给定元素。

这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。

只能转换由盒模型定位的元素。

如果元素具有display: block

则由盒模型定位元素。

transform 属性允许你旋转缩放倾斜或平移给定元素。
这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。

77、transform-origin属性更改一个元素变形的原点

设置旋转元素的基点位置

transform-origin: x-axis y-axis z-axis;

transform-origin: 0 0 0;
transform: rotate(60deg);

transform-origin: 60 0 0;
transform: rotate(60deg);

transform-origin CSS 属性让你更改一个元素变形的原点。

值描述
x-axis 定义视图被置于 X 轴的何处。

可能的值left、center、right、length、%

y-axis 定义视图被置于 Y 轴的何处。

可能的值top、center、bottom、length、%

z-axis 定义视图被置于 Z 轴的何处。

可能的值length

78、vertical-align属性垂直对齐方式

<div><img id="animation78" src="2023p1.png" width="100" height="100">当你孤单无助地面对强敌时谁会是那个信得过的战友逆境清醒送你一只守护兔她会像你爱她一样爱着你她并不厉害但即使失败了小小的她也会再度勇敢站起来保护自己的朋友们。</div><br />

vertical-align 用来指定行内元素inline或表格单元格table-cell元素的垂直对齐方式。

79、visibility 属性显示或隐藏元素而不更改文档的布局

/* 隐藏段落*/
p { visibility: hidden; }

/* 只有 class 设为 showme 的才会显示*/
p.showme { visibility: visible; }

/* 折叠 class 设为 col 的行*/
p.showme { visibility: visible; }

visibility 显示或隐藏元素而不更改文档的布局。

该属性还可以隐藏 <table> 中的行或列。

CSS 属性 visibility 显示或隐藏元素而不更改文档的布局。该属性还可以隐藏 <table> 中的行或列。

值	描述
visible	默认值。元素是可见的。正常显示。
hidden	元素是不可见的。隐藏元素但是其他元素的布局不改变相当于此元素变成透明。要注意若将其子元素设为 visibility: visible则该子元素依然可见。
collapse	当在表格元素中使用时此值可删除一行或一列但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上会呈现为 "hidden"。关键字对于不同的元素有不同的效果用于 <table> 行、列、列组和行组隐藏表格的行或列并且不占用任何空间与将 display: none 用于表格的行/列上的效果相当。但是计算其他行和列的大小时仍会像显示折叠行或列中的单元格一样进行计算。此值允许从表中快速删除行或列而不强制重新计算整个表的宽度和高度。折叠的弹性元素和 ruby 元素会被隐藏它们本来将要占用的空间会被移除。对于其他元素折叠处理与隐藏相同。
inherit	规定应该从父元素继承 visibility 属性的值。

80、width属性设置元素的宽度

改变 width 属性

从 50 到 250px

width 属性用于设置元素的宽度。
width 默认设置内容区域的宽度但如果 box-sizing 属性被设置为 border-box就转而设置边框区域的宽度。
width 属性也指定为

下面关键字值之一min-contentmax-contentfit-contentauto。
一个长度值 <length> 或者百分比值 <percentage>

值
<length>	使用绝对值定义宽度。
<percentage>	使用外层元素的容纳区块宽度the containing block's width的百分比定义宽度。
auto	浏览器将会为指定的元素计算并选择一个宽度。
max-content 实验性	元素内容固有的intrinsic合适宽度。
min-content 实验性	元素内容固有的最小宽度。
fit-content 实验性	取以下两种值中的较大值固有的最小宽度固有首选宽度max-content和可用宽度available两者中的较小值可表示为min(max-content, max(min-content, <length-percentage>))

81、word-spacing 属性设置标签、单词之间的空格长度

<div id="animation81">
当你孤单无助地面对强敌时谁会是那个信得过的战友逆境清醒送你一只守护兔她会像你爱她一样爱着你她并不厉害但即使失败了小小的她也会再度勇敢站起来保护自己的朋友们。
</div>

改变 DIV 元素的 word-spacing 属性从 "normal" 到 "30px"

词与词之间必须先有空格

word-spacing 设置标签、单词之间的空格长度

normal
正常的单词间距由当前字体和/或浏览器定义。

<length>
通过指定具体的额外间距来增加字体的单词间距。查看 <length> 了解可用单位。

<percentage>
通过指定受影响字符的宽度的百分比的方式来增加的间距。

82、z-index属性定位元素显示层级

#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 较大的元素会覆盖

较小的元素在上层进行显示。

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 进行对比。

六、2023年春节祝福第二弹——送你一只守护兔完整源代码免费下载

【2023年春节祝福第二弹——送你一只守护兔】完整源代码免费下载我设的是免费下载

源代码超5000行没时间优化太长就不贴出来了。本文已经快6万字了。守护兔完整源代码和资源包大家点上面的链接下载吧。下载后请自行查杀毒注意网络使用安全。

兔年用【html5 css3】画会动的小兔子“兔”个乐呵图个乐呵~

七、新年快乐

借首歌的歌词祝大家新年快乐

大展鸿“兔”大展鸿图、好事成“兔”(“好事成双”“双”用two”)

愿你三冬暖
愿你春不寒
愿你雨天有伞
愿你梦能安
愿你温而善
愿你心不烦
愿你时光能缓
愿故人不散
愿你余生良人永相伴
无悲却有欢
愿你情有所依不孤单
烦恼都短暂
愿你匆忙脚步能放慢
不忘回头看
愿你此生尽兴无遗憾
万事皆圆满
愿你温而善
愿你心不烦
。。。

2023年春节祝福第二弹——送你一只守护兔让它温暖每一个你上

推荐阅读



		2023年春节祝福第二弹——送你一只守护兔让它温暖每一个你【html5 css3】画会动的小兔子
25		2023春节祝福系列第一弹放飞祈福孔明灯祝福大家身体健康附完整源代码及资源免费下载
24		HTML+CSS+svg绘制精美彩色闪灯圣诞树HTML+CSS+Js实时新年时间倒数倒计时(附源代码)
23		草莓熊python绘图春节版圣诞倒数雪花版附源代码
22		【程序人生】卡塔尔世界杯元素python海龟绘图附源代码世界杯主题前端特效5个附源码
21		python爱心源代码集锦
20		巴斯光年python turtle绘图__附源代码
19		Three.js实例详解___旋转的精灵女孩(附完整代码和资源)
18		草莓熊python turtle绘图玫瑰花版附源代码
17		立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦
16		皮卡丘python turtle海龟绘图电力球版附源代码
15		【CSDN云IDE】个人使用体验和建议含超详细操作教程python、webGL方向)
14		草莓熊python turtle绘图风车版附源代码
13		用代码过中秋python海龟月饼你要不要尝一口
12		《 Python List 列表全实例详解系列》__系列总目录
11		用代码写出浪漫__合集python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心
10		Python函数方法实例详解全集(更新中...)
9		matplotlib 自带绘图样式效果展示速查28种全
8		手机屏幕坏了____怎么把里面的资料导出18种方法
7		2023年1月多家权威机构____编程语言排行榜__薪酬状况
6		Python中Print()函数的用法___实例详解(全例多
5		色彩颜色对照表300种颜色(16进制、RGB、CMYK、HSV、中英文名)
4		Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程超详细
3		Tomcat 启动闪退问题解决集八大类详细
2		Tomcat端口配置详细
1		Tomcat10 安装Windows环境详细sss

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

标签: CSS

返回列表

上一篇：免费分享一套 SpringBoot + Vue + ElementUI 的人力资源管理系统，挺漂亮的

下一篇：JUC面试（六）——Java锁

“2023年春节祝福第二弹——送你一只守护兔(下），CSS3 动画相关属性图例实例大全（82种），守护兔源代码免费下载” 的相关文章

css：transition tab切换动态滑动效果1年前 (2023-02-02)

新年第一弹：js、css与高度（宽度）共享1年前 (2023-02-02)

理解CSS1年前 (2023-02-02)

CSS设置元素内边距（padding）、外边距（margin）1年前 (2023-02-02)

CSS知识梳理1年前 (2023-02-02)

【HTML | CSS】春节将至，为网页挂上精美的灯笼吧（附源码）程序员的浪漫1年前 (2023-02-02)

CSS3基础内容1年前 (2023-02-02)

CSS样式基础内容61年前 (2023-02-02)

css定位1年前 (2023-02-02)

CSS列表与表格1年前 (2023-02-02)


1、background属性集中定义各种背景属性
<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>	逐步改变背景颜色属性由黄色变蓝色再由蓝色变黄色
background 属性用于一次性集中定义各种背景属性包括 color, image, origin 与 size, repeat 方式等等。此属性是一个简写属性可以在一次声明中定义一个或多个属性background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size和 background-attachment。

2、background-color属性设置元素的背景色
<style> #animation2 { width: 200px; height: 200px; background: green; animation: animation2a 2s infinite; } @keyframes animation2a { 50% { background-color: yellow; } } </style> <div id="animation2">逆境清醒</div>	逐步改变背景颜色属性由绿色变黄色再由黄色变绿色
background-color 会设置元素的背景色属性的值为颜色值或关键字"transparent"二者选其一。

3、background-position属性为背景图片设置初始位置
<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"。
background-position CSS 属性为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的。

4、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"
`background-size` 设置背景图片大小。图片可以保有其原有的尺寸或者拉伸到新的尺寸或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

2023年春节祝福第二弹——送你一只守护兔(下），CSS3 动画相关属性图例实例大全（82种），守护兔源代码免费下载

2023年春节祝福第二弹——送你一只守护兔(下

CSS3 动画相关属性图例实例大全82种、守护兔源代码免费下载

五、CSS3 动画相关属性实例大全

1、CSS3的动画基本属性

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

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

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

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

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

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

5、border 属性设置各种单独的边界属性的简写属性

6、border-bottom属性下边框的所有属性

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

8、border-bottom-left-radius属性元素左下角的圆角

9、border-bottom-right-radius属性元素右下角的圆角

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

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

12、border-left属性元素左边框所有属性

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

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

15、border-right属性元素的右边的边框border

16、border-right-color 属性元素的右边的边框border颜色

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

18、border-spacing属性指定相邻单元格边框之间的距离

19、border-top属性元素的上方的边框border

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

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

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

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

24、bottom 属性元素下外边距边界与其包含块下边界之间的偏移

25、box-shadow属性在元素的框架上添加阴影效果

26、clip属性定义了元素的哪一部分是可见的

27、color 属性设置颜色值的前景色以及文本装饰

28、column-count属性描述元素的列数

29、column-gap属性设置元素列之间的间隔大小

30、column-rule属性设定分割线的宽度、样式和颜色

31、column-rule-color属性被画在两列之间的规则线条的颜色

32、column-rule-width属性被画在两列之间的规则线条的宽度

33、column-width 属性设置列宽

34、columns属性设置元素的列宽和列数

35、filter属性调整图像、背景和边框的渲染

36、flex属性设置弹性项目增大或缩小

37、flex-basis 属性 flex 元素在主轴方向上的初始大小

38、flex-grow属性flex 项 主尺寸 的 flex 增长系数

39、flex-shrink属性 flex 元素的收缩规则

40、font 属性所有字体属性

41、font-size属性指定字体的大小

42、font-size-adjust 属性调整字体大小

43、font-stretch属性定义字体外观

44、font-weight属性指定字体的粗细程度

45、height属性元素的高度

46、left属性元素的左外边距边界与其包含块左边界之间的偏移

47、letter-spacing属性字符间距的大小

48、line-height 属性设置多行元素的空间量

49、margin 属性设置元素的边距属性

50、margin-bottom属性设置元素的下边距

51、margin-left 属性设置元素的左边距

52、margin-right 属性设置元素的右边距

53、margin-top属性设置元素的顶边距

54、max-height 属性设置元素的最大高度

55、max-width属性设置元素的最大宽度

56、min-height属性设置元素的最低高度

57、min-width属性设置元素的最低宽度

58、opacity 属性设置一个元素的透明度级别

59、order 属性设置布局时的顺序

60、outline 属性设置outline元素周围的轮廓

61、outline-color 属性设置元素周围的轮廓颜色

62、outline-offset属性(设置在 border 边缘外的偏移)

63、outline-width属性指定轮廓的宽度

64、padding属性设置元素的内容和边框之间的区域

65、padding-bottom属性设置元素的内边距中下方的高度

66、padding-left 属性元素在内边距区域中左边的宽度

67、padding-right 属性元素在内边距区域中右边的宽度

68、padding-top属性元素在内边距区域中上方的宽度

69、perspective属性指定了观察者与 z=0 平面的距离

70、perspective-origin属性设置3D元素的基数位置

71、right属性元素的右边缘

72、text-decoration-color 属性设置文本修饰线的颜色

73、text-indent属性块元素首行文本内容之前的缩进量

38、flex-grow属性flex 项主尺寸的 flex 增长系数