油猴脚本实现任意网页的图片的特效:立体弹出。当地
原理是利用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: 
			