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

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

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

“`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';
});

})();
“`