Skip to content

🖌️制作效果器

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

简单的了解 CSS 这个语言

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

选择器

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

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

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

效果器常用属性

css
display: none; // 隐藏元素
css
opacity: 0.7; // 设置元素的不透明度为 70%

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

制作一个简单的效果器

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

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

将上述代码压缩(可以搜索 CSS 压缩工具对 CSS 代码进行压缩)。

由于效果器的效果是 “隐藏搜索框”,所以我们可以建立一个 Json 格式的数据如下。

json
{
    "des": {
        "zh_CN": "隐藏搜索框", // 中文描述
        "en": "Hide search box" // 英文描述
    },
    "css": "#chainwon-search{display: none;}" // 压缩后的 CSS 代码
}

最后将以上 Json 片段添加到 https://github.com/xiaoshuapp/xiaoshu-effector/blob/main/effector.json 中,仿照该链接中的格式添加,这样一来将可以把效果器分享给其他用户使用。

一个复杂的效果器示例

CSS 部分

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

.v-app-bar--is-scrolled + .cb .search { // 选择 classv-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 { // 选择 classv-app-bar--is-scrolled 的元素后跟随的 cb 元素下的 search 元素下的 IDchainwon-search 的元素
    box-shadow: 0 4px 20px 7px rgba(0, 0, 0, 0.1); // 设置元素的阴影效果
}

Json 部分

json
{
    "des": {
        "zh_CN": "浮动搜索框,页面下滑时生效",
        "en": "Floating search box, effective when the page slides down."
    },
    "css": ".cb .search{transition:all 0.2s ease-in-out;}.v-app-bar--is-scrolled + .cb .search{max-width:inherit;position:fixed;z-index:1;top:24px;}.v-app-bar--is-scrolled + .cb .search #chainwon-search{box-shadow:0 4px 20px 7px rgba(0,0,0,0.1);}"
}