Articles
CSS简介
与滤镜效果相关的CSS属性

与滤镜效果相关的CSS属性

本文说明了与滤镜效果相关的CSS属性。

您可以了解诸如filter和transform属性的用法和编写方式。

YouTube Video

预览的HTML

css-effect.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-effect.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Filter/Effect Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>filter</h3>
 23            <section>
 24                <header><h4>Original Image</h4></header>
 25                <section class="sample-view">
 26                    <img src="example.jpg" alt="Example Image" width="100">
 27                </section>
 28                <header><h4>filter: sepia(1)</h4></header>
 29                <section class="sample-view">
 30                    <img src="example.jpg" alt="Example Sepia Image" class="filtered-image-sepia" width="100">
 31                </section>
 32                <header><h4>filter: opacity(0.5)</h4></header>
 33                <section class="sample-view">
 34                    <img src="example.jpg" alt="Example Opacity Image" class="filtered-image-opacity" width="100">
 35                </section>
 36                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 37                <section class="sample-view">
 38                    <img src="example.jpg" alt="Example Filtered Image" class="filtered-image-multiple" width="100">
 39                </section>
 40            </section>
 41        </article>
 42        <article>
 43            <h3>filter-function</h3>
 44            <section>
 45                <header><h4>filter: blur(5px)</h4></header>
 46                <section class="sample-view">
 47                    <img src="example.jpg" alt="Example Blur Image" style="filter: blur(5px);" width="100">
 48                </section>
 49                <header><h4>filter: brightness(1.5)</h4></header>
 50                <section class="sample-view">
 51                    <img src="example.jpg" alt="Example Brightness Image" style="filter: brightness(1.5);" width="100">
 52                </section>
 53                <header><h4>filter: contrast(2)</h4></header>
 54                <section class="sample-view">
 55                    <img src="example.jpg" alt="Example Contrast Image" style="filter: contrast(2);" width="100">
 56                </section>
 57                <header><h4>filter: grayscale(1)</h4></header>
 58                <section class="sample-view">
 59                    <img src="example.jpg" alt="Example Grayscale Image" style="filter: grayscale(1);" width="100">
 60                </section>
 61                <header><h4>filter: hue-rotate(90deg)</h4></header>
 62                <section class="sample-view">
 63                    <img src="example.jpg" alt="Example Hue Rotate Image" style="filter: hue-rotate(90deg);" width="100">
 64                </section>
 65                <header><h4>filter: invert(1)</h4></header>
 66                <section class="sample-view">
 67                    <img src="example.jpg" alt="Example Invert Image" style="filter: invert(1);" width="100">
 68                </section>
 69                <header><h4>filter: opacity(0.5)</h4></header>
 70                <section class="sample-view">
 71                    <img src="example.jpg" alt="Example Opacity Image" style="filter: opacity(0.5);" width="100">
 72                </section>
 73                <header><h4>filter: saturate(2)</h4></header>
 74                <section class="sample-view">
 75                    <img src="example.jpg" alt="Example Saturate Image" style="filter: saturate(2);" width="100">
 76                </section>
 77                <header><h4>filter: sepia(1)</h4></header>
 78                <section class="sample-view">
 79                    <img src="example.jpg" alt="Example Sepia Image" style="filter: sepia(1);" width="100">
 80                </section>
 81                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 82                <section class="sample-view">
 83                    <img src="example.jpg" alt="Example Filtered Image" style="filter: brightness(1.2) contrast(1.5) sepia(0.5);" width="100">
 84                </section>
 85            </section>
 86        </article>
 87        <article>
 88            <h3>transform</h3>
 89            <section>
 90                <header><h4>Transform: scale(1.5, 2)</h4></header>
 91                <section class="sample-view">
 92                    <div class="transform-box transform-scale">Scale</div>
 93                </section>
 94                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
 95                <section class="sample-view">
 96                    <div class="transform-box transform-skew">Skew</div>
 97                </section>
 98                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
 99                <section class="sample-view">
100                    <div class="transform-box transform-rotate">Rotate Scale</div>
101                </section>
102            </section>
103        </article>
104        <article>
105            <h3>transform functions</h3>
106            <section>
107                <header><h4>Transform: translate(100px, 50px)</h4></header>
108                <section class="sample-view">
109                    <div class="transform-box transform-translate">Translate</div>
110                </section>
111                <header><h4>Transform: rotate(45deg)</h4></header>
112                <section class="sample-view">
113                    <div class="transform-box transform-rotate">Rotate</div>
114                </section>
115                <header><h4>Transform: scale(1.5, 2)</h4></header>
116                <section class="sample-view">
117                    <div class="transform-box transform-scale">Scale</div>
118                </section>
119                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
120                <section class="sample-view">
121                    <div class="transform-box transform-skew">Skew</div>
122                </section>
123                <header><h4>Transform: matrix(1, 0.5, -0.5, 1, 100, 0)</h4></header>
124                <section class="sample-view">
125                    <div class="transform-box transform-matrix">Matrix</div>
126                </section>
127                <header><h4>Transform: translate3d(100px, 50px, 30px)</h4></header>
128                <section class="sample-view perspective">
129                    <div class="transform-box transform-translate3d">Translate3D</div>
130                </section>
131                <header><h4>Transform: rotate3d(1, 1, 0, 45deg)</h4></header>
132                <section class="sample-view perspective">
133                    <div class="transform-box transform-rotate3d">Rotate3D</div>
134                </section>
135                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
136                <section class="sample-view">
137                    <div class="transform-box transform-rotate-scale">Rotate Scale</div>
138                </section>
139            </section>
140        </article>
141        <article>
142            <h3>transform-origin</h3>
143            <section>
144                <header><h4>transform-origin: left top</h4></header>
145                <section class="sample-view">
146                    <div class="transform-box transform-origin-left-top">Transform<br>(left-top)</div>
147                </section>
148                <header><h4>transform-origin: right bottom</h4></header>
149                <section class="sample-view">
150                    <div class="transform-box transform-origin-right-bottom">Transform<br>(right-bottom)</div>
151                </section>
152                <header><h4>transform-origin: 0% 100%</h4></header>
153                <section class="sample-view">
154                    <div class="transform-box transform-origin-percent">Transform<br>(percent)</div>
155                </section>
156                <header><h4>transform-origin: 50% 50% 50px</h4></header>
157                <section class="sample-view">
158                    <div class="transform-box transform-origin-3d">Transform<br>3D</div>
159                </section>
160            </section>
161        </article>
162    </main>
163</body>
164</html>

滤镜效果

filter属性 

 1.filtered-image-sepia {
 2    filter: sepia(1);
 3}
 4
 5.filtered-image-opacity {
 6    filter: opacity(0.5);
 7}
 8
 9.filtered-image-multiple {
10    filter: brightness(1.2) contrast(1.5) sepia(0.5);
11}

filter属性用于为元素添加视觉效果。您可以轻松添加各种效果，例如模糊图像或元素、调整亮度和更改对比度。

  • filtered-image-sepia类应用了棕色调效果。
  • filtered-image-opacity类应用了透明效果。
  • filtered-image-multiple类为图像应用了亮度、对比度和棕色调效果。

基本语法 

1filter: none | <filter-function> [<filter-function>]*;

对于filter属性，可以指定none或filter-function。

  • 指定none时，不会应用滤镜效果。
  • 在<filter-function>中指定要应用的滤镜功能。可以通过空格分隔来指定多个滤镜。

滤镜功能的类型

blur() 
1filter: blur(5px);

blur()功能应用模糊效果。

  • 该值以像素（px）为单位指定，值越大，模糊程度越强。
brightness() 
1filter: brightness(1.5);

brightness()功能调整亮度。

  • 该值指定为从0（完全黑暗）到1（原始亮度）。指定大于1的值会使元素更亮。
contrast() 
1filter: contrast(2);

contrast()功能调整对比度。

  • 该值从0（灰度）到1（原始对比度）进行指定，大于1的值会增强对比度。
grayscale() 
1filter: grayscale(1);

grayscale()功能将元素转换为单色。

  • 值的范围从 0（原色）到 1（完全单色）。
hue-rotate() 
1filter: hue-rotate(90deg);

hue-rotate() 函数用于旋转色相。

  • 值以度数（deg）指定，通过旋转色相来应用颜色变化。色相旋转的范围从 0deg 到 360deg。
invert() 
1filter: invert(1);

invert() 函数用于反转颜色。

  • 值的范围从 0（原色）到 1（完全反转）。
opacity() 
1filter: opacity(0.5);

opacity() 函数用于改变元素的透明度。

  • 值的范围从 0（完全透明）到 1（完全不透明）。
saturate() 
1filter: saturate(2);

saturate() 函数用于调整饱和度。

  • 值的范围从 0（单色）到 1（原始饱和度），指定大于 1 的值会增强饱和度。
sepia() 
1filter: sepia(1);

sepia() 函数用于转换为深褐色效果。

  • 值的范围从 0（原色）到 1（完全深褐色）。

应用多个滤镜 

1filter: brightness(1.2) contrast(1.5) sepia(0.5);

可以应用多个滤镜，用空格分隔。

使用 filter 属性的优点

filter 属性是一个强大的工具，可轻松创建视觉上吸引人的元素。它具有以下优点：。

  • 可以轻松添加视觉效果。
  • 只需使用 CSS 而无需图像编辑软件即可调整图像。
  • 通过与动画结合可以创建动态效果。

transform 属性 

 1.transform-box {
 2    width: 100px;
 3    height: 100px;
 4    background-color: skyblue;
 5    transition: transform 0.3s ease;
 6}
 7
 8.transform-scale:hover {
 9    /* Width 1.5 times and height 2 times */
10    transform: scale(1.5, 2);
11}
12
13.transform-skew:hover {
14    /* Skew 30 degrees on the X-axis and 20 degrees on the Y-axis */
15    transform: skew(30deg, 20deg);
16}
17
18.transform-rotate:hover {
19    transform: rotate(45deg) scale(1.5);
20}

transform 属性用于对元素应用 2D 或 3D 转换。可以使用 CSS 指定各种视觉转换，如位置、旋转、缩放（放大/缩小）和倾斜。transform 属性通常与动画结合使用，有助于创建动态的用户界面元素。

  • 在 transform-scale 类中，将鼠标悬停在元素上会将其宽度放大1.5倍，高度放大2倍。

  • 在 transform-skew 类中，将鼠标悬停在元素上会使其在X轴上旋转30度，在Y轴上旋转20度。

  • 在 transform-rotate 类中，将鼠标悬停在元素上会使其旋转45度，并放大1.5倍。

基本语法 

1transform: none | <transform-function> [<transform-function>]*;

transform 属性指定为 none 或者一个 transform-function。

  • 如果指定为 none，则不会应用任何转换效果。
  • 通过 <transform-function> 指定转换的类型。可以通过空格分隔来应用多个转换效果。

主要的转换函数

translate() 
1/* Move 50px to the right and 100px down */
2transform: translate(50px, 100px);
3
4transform: translateX(50px); /* Move 50px to the right */
5transform: translateY(100px); /* Move 100px down */
  • translate(x, y) 函数按指定的距离沿X轴和Y轴移动元素。x 和 y 可以使用诸如 px 或 % 的单位来指定。你也可以分别使用 translateX() 或 translateY() 来单独指定。
rotate() 
1transform: rotate(45deg); /* Rotate 45 degrees */
  • rotate(angle) 函数按指定的角度（deg）旋转元素。
scale() 
1/* Width 1.5 times and height 2 times */
2transform: scale(1.5, 2);
3
4transform: scaleX(1.5); /* Width 1.5 times */
5transform: scaleY(2); /* Height 2 times */
  • scale(x, y) 函数根据X轴和Y轴缩放元素。x 和 y 是相对于原始尺寸的缩放因子。例如，scale(2, 2) 会将尺寸放大两倍。你也可以分别使用 scaleX() 或 scaleY() 来单独指定。
skew() 
1/* Skew 30 degrees on the X-axis and
2   20 degrees on the Y-axis */
3transform: skew(30deg, 20deg);
4
5/* Skew 30 degrees on the X-axis */
6transform: skewX(30deg);
7
8/* Skew 20 degrees on the Y-axis */
9transform: skewY(20deg);
  • skew(x-angle, y-angle) 函数按指定角度沿X轴和Y轴倾斜元素。你也可以分别使用 skewX() 或 skewY() 来单独指定。
matrix() 
1/* Apply a special transformation */
2transform: matrix(1, 0.5, -0.5, 1, 0, 0);
  • matrix() 函数通过指定矩阵来同时组合多个转换效果。通常与其他转换函数结合使用。

3D转换函数

translate3d() 
1/* Move 100px right(X-axis), 50px down(Y-axis),
2   30px forward(Z-zxis) */
3transform: translate3d(100px, 50px, 30px);
4
5/* Preserve 3D positioning of children */
6transform-style: preserve-3d;
7
8/* Add 3D depth with 600px perspective */
9perspective: 600px;
  • translate3d() 函数在3D空间中执行平移操作。
    • 可以在三个维度上指定：X轴、Y轴和Z轴。
  • 通过将transform-style属性设置为preserve-3d，并将perspective属性设置为600px，可以为子元素添加具有深度的三维移动效果。
rotate3d() 
1/* Rotate 45 degrees around the X and Y axes */
2transform: rotate3d(1, 1, 0, 45deg);
3
4transform-style: preserve-3d;
5perspective: 600px;
  • rotate3d() 函数在3D空间中执行旋转操作。
    • 它会围绕X轴、Y轴和Z轴旋转一个元素。

结合多种变换 

1transform: rotate(45deg) scale(1.5);

transform 属性可以同时应用多种变换。例如，您可以将旋转和缩放结合起来使用。

使用关键点

transform 属性是CSS中一个强大的工具，用于视觉上变换元素。通过结合各种函数，您可以创建交互式和动态的用户界面。

  • transform 属性允许直接变换元素，在不改变DOM布局的情况下实现视觉操作。
  • 结合transition或animation时，它在创建动画和交互式元素时非常有用，从而实现动态设计。

transform-origin 属性 

 1.transform-box {
 2    background-color: skyblue;
 3}
 4
 5.transform-origin-left-top:hover {
 6    /* Based on the top left corner */
 7    transform-origin: left top;
 8    transform: rotate(45deg) scale(1.2);
 9}
10
11.transform-origin-right-bottom:hover {
12    /* Based on the right bottom corner */
13    transform-origin: right bottom;
14    transform: rotate(45deg) scale(1.2);
15}
16
17.transform-origin-percent:hover {
18    /* Transform based on the bottom left corner */
19    transform-origin: 0% 100%;
20    transform: rotate(45deg) scale(1.2);
21}
22
23.transform-origin-3d:hover {
24    /* Specify the Z-axis as well */
25    transform-origin: 50% 50% 50px;
26    transform: rotate(45deg) scale(1.2);
27}

transform-origin 属性用于设置 transform 属性应用的变换的原点。您可以指定元素变换的参考点，从而控制诸如旋转或缩放等效果基于哪个位置应用。

在此示例中，当您将鼠标悬停在元素上时，它将根据 transform-origin 属性指定的点同时旋转和缩放。

基本语法 

1transform-origin: x y z;

对于 transform-origin 属性，您可以像这样指定 x、y 和 z。

  • 对于 x，指定X轴（水平方向）上的参考点。可以使用关键词（left、center、right）或长度（px、% 等）来指定值。
  • 对于 y，指定Y轴（垂直方向）上的参考点。可以使用关键词（top、center、bottom）或长度来指定值。
  • 对于 z，指定Z轴（深度方向）上的参考点。它仅能用于3D变换。它是可选的，默认值为0。

默认值 

1transform-origin: 50% 50%; /* Center of the element */

transform-origin 属性的默认值是元素在X轴和Y轴上的中心点。这意味着，默认情况下，变换是以元素的中心点作为参考点进行的。

如何指定值

transform-origin 属性的值可以用关键词、百分比或长度（例如px、em等）指定。

  1. 关键词规范

    • left：将 X 轴参考点设置为元素的左边缘。
    • right：将 X 轴参考点设置为元素的右边缘。
    • top：将 Y 轴参考点设置为元素的顶部边缘。
    • bottom：将 Y 轴参考点设置为元素的底部边缘。
    • center：将 X 或 Y 轴的参考点设置为元素的中心。

  2. 百分比指定

    • 0%：将其设置为左边缘或顶部边缘。
    • 50%：将其设置为中心位置。
    • 100%：将其设置为右边缘或底部边缘。

  3. 长度指定

    • 您可以使用 px、em 等特定长度来精细调整参考点。

3D 变换中的 transform-origin 

1.box {
2    width: 100px;
3    height: 100px;
4    background-color: lightblue;
5    transform-origin: 50% 50% 50px; /* Specify the Z-axis as well */
6    transform: rotateY(45deg);
7}

transform-origin 也可以用于 3D 变换。在 3D 变换中，您还可以指定 Z 轴上的参考点。例如，通过指定深度方向的旋转中心，可以实现具有深度感的变换。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video

与透明度相关的CSS属性与动画相关的CSS属性