油猴脚本让任意网页的图片立体弹出

油猴脚本实现任意网页的图片的特效:立体弹出。当地

原理是利用JS,往网页里注入一段CSS样式。

现在借助AI,可以快速实现任何样式。本文代码已经不具有参考意义!

“`js
// ==UserScript==
// @name Hover Image Zoom Effect
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Add a 3D zoom effect to images on hover
// @author You
// @match :///*
// @grant none
// ==/UserScript==

(function() {
‘use strict’;

const css = `
    img:hover {
        transform: scale(1.2) perspective(1000px) rotateY(10deg) rotateX(10deg);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
`;

const style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);

// Optional: add hover effect to dynamically loaded images
const observer = new MutationObserver(() => {
    document.querySelectorAll('img').forEach(img => {
        img.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
    });
});

observer.observe(document.body, { childList: true, subtree: true });

// Initial application to existing images
document.querySelectorAll('img').forEach(img => {
    img.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
});

})();
“`

Last Updated:
版权声明:
本文标题:油猴脚本让任意网页的图片立体弹出
本文链接:https://haoyelaiga.com/%e6%b2%b9%e7%8c%b4%e8%84%9a%e6%9c%ac%e8%ae%a9%e4%bb%bb%e6%84%8f%e7%bd%91%e9%a1%b5%e7%9a%84%e5%9b%be%e7%89%87%e7%ab%8b%e4%bd%93%e5%bc%b9%e5%87%ba/
版权所有:好嘢
转载请保留出处,谢谢合作!

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部