Greasy Fork is available in English.
给移动端图片添加多种滤镜风格，用户通过编号调整喜欢的效果
当前为
// ==UserScript==
// @name 图片多风格
// @namespace http://tampermonkey.net/
// @version 0.2
// @description 给移动端图片添加多种滤镜风格，用户通过编号调整喜欢的效果
// @author You
// @match *://*/*
// @grant GM_addStyle
// @run-at document-end
// ==/UserScript==
(function () {
'use strict';
// 用户选择风格编号（修改此值即可切换风格）
const styleIndex = 12; // 默认风格编号，用户可以调整为 1~15 的任意值
// 判断是否是移动端设备
if (window.innerWidth <= 800) {
const styles = [
`
/* 风格 1: 默认复古风格 */
img {
filter: sepia(60%) brightness(1.1) contrast(1.2) saturate(1.2);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
img:hover {
filter: sepia(80%) brightness(1.2) contrast(1.3);
transform: scale(1.05) rotate(-2deg);
}
`,
`
/* 风格 2: 模糊效果 */
img {
filter: blur(5px);
transition: filter 0.3s ease;
}
img:hover {
filter: blur(3px);
}
`,
`
/* 风格 3: 黑白效果 */
img {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
img:hover {
filter: grayscale(50%);
}
`,
`
/* 风格 4: 反转颜色 */
img {
filter: invert(100%);
transition: filter 0.3s ease;
}
img:hover {
filter: invert(50%);
}
`,
`
/* 风格 5: 饱和度调整 */
img {
filter: saturate(50%);
transition: filter 0.3s ease;
}
img:hover {
filter: saturate(150%);
}
`,
`
/* 风格 6: 色相旋转 */
img {
filter: hue-rotate(90deg);
transition: filter 0.3s ease;
}
img:hover {
filter: hue-rotate(180deg);
}
`,
`
/* 风格 7: 阴影效果 */
img {
filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.5));
transition: all 0.3s ease;
}
img:hover {
filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.7));
}
`,
`
/* 风格 8: 透明度调整 */
img {
filter: opacity(0.7);
transition: filter 0.3s ease;
}
img:hover {
filter: opacity(1);
}
`,
`
/* 风格 9: 圆形裁剪 */
img {
border-radius: 50%;
transition: transform 0.3s ease;
}
img:hover {
transform: scale(1.1);
}
`,
`
/* 风格 10: 镜像翻转 */
img {
transform: scaleX(-1);
transition: transform 0.3s ease;
}
img:hover {
transform: scaleX(1);
}
`,
`
/* 风格 11: 动画旋转 */
img {
animation: rotate 3s infinite linear;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
`,
`
/* 风格 12: 复古 + 胶片颗粒 */
img {
filter: sepia(50%) contrast(1.2) brightness(1.1);
background: url('data:image/png;base64,...') repeat;
mix-blend-mode: multiply;
transition: all 0.3s ease;
}
img:hover {
filter: sepia(70%) contrast(1.4) brightness(1.2);
}
`,
`
/* 风格 13: 倾斜效果 */
img {
transform: skew(10deg, 5deg);
transition: transform 0.3s ease;
}
img:hover {
transform: skew(0deg, 0deg);
}
`,
`
/* 风格 14: 亮度增强 */
img {
filter: brightness(1.5);
transition: filter 0.3s ease;
}
img:hover {
filter: brightness(1.2);
}
`,
`
/* 风格 15: 新拟物风格 */
img {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2),
-10px -10px 20px rgba(255, 255, 255, 0.5);
border-radius: 12px;
transition: box-shadow 0.3s ease;
}
img:hover {
box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.2),
inset -10px -10px 20px rgba(255, 255, 255, 0.5);
}
`
];
// 应用用户选择的风格
GM_addStyle(styles[styleIndex - 1]);
}
})();