🖌️制作效果器

效果器是由非常简单的 CSS 代码和对代码的文字描述组成的。

简单的了解 CSS 这个语言

一般我们创建一个效果器只需要了解 CSS 的选择器和属性代码。

选择器

一般我们需要选定一个或多个元素，如果我们使用 #chainwon-search 则代表选择了 ID 为 chainwon-search 的元素。一般一个 ID 只对应一个元素。

如果我们使用 .bookmark 则代表选择了 class 为 bookmark 的所有元素。一般 class 对应一个或多个元素。

更多高级选择器请查看：https://www.w3school.com.cn/cssref/css_selectors.asp

效果器常用属性

display: none; // 隐藏元素

opacity: 0.7; // 设置元素的不透明度为 70%

如果你需要设置其他属性，可以前往：https://www.w3school.com.cn/cssref/index.asp 查找相关属性。你可以使用键盘上的 Ctrl+F 组合键快速的搜索你需要的属性。

制作一个简单的效果器

小舒同学中有一个名为 “隐藏搜索框” 的效果器，他的 CSS 代码如下。

#chainwon-search { // 选择 ID 为 chainwon-search 的元素
    display: none; // 设置显示效果为 none，即为隐藏
}

一个复杂的效果器示例

.cb .search { // 选择 class 为 cb 元素下 class 为 search 的元素
    transition: all 0.2s ease-in-out; // 为元素设置过渡效果
}

.v-app-bar--is-scrolled + .cb .search { // 选择 class 为 v-app-bar--is-scrolled 的元素后跟随的 cb 元素下的 search 元素
    max-width: inherit; // 设置元素的最大宽度为 inherit，即为父元素的宽度
    position: fixed; // 设置元素的位置为 fixed，即为固定在顶部
    z-index: 1; // 设置元素的 z-index 为 1，将会使该元素在其他元素之上
    top: 24px; // 设置元素的 top 为 24px，即为固定在顶部的高度
}

.v-app-bar--is-scrolled + .cb .search #chainwon-search { // 选择 class 为 v-app-bar--is-scrolled 的元素后跟随的 cb 元素下的 search 元素下的 ID 为 chainwon-search 的元素
    box-shadow: 0 4px 20px 7px rgba(0, 0, 0, 0.1); // 设置元素的阴影效果
}