{"id":1222,"date":"2025-10-08T12:47:30","date_gmt":"2025-10-08T04:47:30","guid":{"rendered":"http:\/\/zhhovo.top\/?p=1222"},"modified":"2025-10-08T12:50:57","modified_gmt":"2025-10-08T04:50:57","slug":"html%e6%b7%bb%e5%8a%a0%e6%95%b0%e6%8d%ae%e9%9b%a8%e7%89%b9%e6%95%88","status":"publish","type":"post","link":"https:\/\/zhhovo.top\/index.php\/2025\/10\/08\/html%e6%b7%bb%e5%8a%a0%e6%95%b0%e6%8d%ae%e9%9b%a8%e7%89%b9%e6%95%88\/","title":{"rendered":"HTML\u6dfb\u52a0\u6570\u636e\u96e8\u7279\u6548"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u6570\u636e\u96e8\u6548\u679c\u5982\u56fe\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"523\" src=\"https:\/\/zhhovo.top\/wp-content\/uploads\/2025\/10\/\u5c4f\u5e55\u622a\u56fe-2025-10-08-123815-1-1024x523.png\" alt=\"\" class=\"wp-image-1225\" srcset=\"https:\/\/zhhovo.top\/wp-content\/uploads\/2025\/10\/\u5c4f\u5e55\u622a\u56fe-2025-10-08-123815-1-1024x523.png 1024w, https:\/\/zhhovo.top\/wp-content\/uploads\/2025\/10\/\u5c4f\u5e55\u622a\u56fe-2025-10-08-123815-1-300x153.png 300w, https:\/\/zhhovo.top\/wp-content\/uploads\/2025\/10\/\u5c4f\u5e55\u622a\u56fe-2025-10-08-123815-1-768x392.png 768w, https:\/\/zhhovo.top\/wp-content\/uploads\/2025\/10\/\u5c4f\u5e55\u622a\u56fe-2025-10-08-123815-1-1536x784.png 1536w, https:\/\/zhhovo.top\/wp-content\/uploads\/2025\/10\/\u5c4f\u5e55\u622a\u56fe-2025-10-08-123815-1.png 1835w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><strong>css\u90e8\u5206\uff1a<\/strong><\/mark><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.copyright-content {\n    display: none !important;\n}\nbody.site-has-matrix-rain #matrix-rain-container {\n  position: fixed !important;\n  top: 0 !important;\n  left: 0 !important;\n  width: 100vw !important;\n  height: 100vh !important;\n  pointer-events: none !important;\n  z-index: -2;\n  overflow: hidden;\n  font-family: 'Courier New', monospace;\n}\n\nbody.site-has-matrix-rain #matrix-canvas {\n  display: block;\n  background: transparent;\n}\n\n.matrix-char {\n  position: absolute;\n  font-weight: 500;\n  animation-timing-function: linear;\n}\n\n.matrix-char.head-char {\n  color: #ffffff !important;\n  text-shadow: 0 0 15px #ffffff, 0 0 25px #0077ff, 0 0 35px #0077ff !important;\n  font-weight: bold !important;\n  font-size: 1.2em !important;\n}\n\n.matrix-char.body-char {\n  color: #80ffff !important;\n  text-shadow: 0 0 8px rgba(128, 255, 255, 0.7) !important;\n}\n\n.matrix-char.tail-char {\n  color: #0080ff !important;\n  text-shadow: 0 0 5px rgba(0, 128, 255, 0.5) !important;\n}\n.full-blog-holder {\n    display: flex;\n    gap: 20px; \n    max-width: 1400px; \n    margin: 0 auto;\n    padding: 0 15px;\n}\n\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">js\u90e8\u5206\uff08\u9700php\u5c01\u88c5\uff09\uff1a<\/mark><\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\nfunction matrix_rain_effect() {\n    ?>\n    &lt;style type=\"text\/css\">\nbody.site-has-matrix-rain #matrix-rain-container {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100vw;\n    height: 100vh;\n    pointer-events: none;\n    z-index: -2;\n    overflow: hidden;\n    font-family: 'Courier New', monospace;\n    font-size: 18px;\n    color: #00ffff;\n    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 200, 255, 0.6);\n    opacity: 0.9;\n    filter: brightness(1.2);\n}\n\nbody.site-has-matrix-rain .matrix-column {\n    position: absolute;\n    top: 0;\n    width: 1.2em;\n    text-align: center;\n    animation-timing-function: linear;\n    animation-iteration-count: infinite;\n    transform: translateY(-100%);\n    transform: translateZ(0);\n    backface-visibility: hidden;\n    perspective: 1000;\n}\n\nbody.site-has-matrix-rain .matrix-char {\n    display: block;\n    opacity: 0;\n    animation: char-fade 2s ease-out forwards;\n    font-weight: 500;\n    margin-bottom: 2px;\n    will-change: opacity, transform;\n}\n\nbody.site-has-matrix-rain .matrix-char:first-child {\n    color: #00ffff; \n    text-shadow: 0 0 15px #00ffff, 0 0 25px #00ffff, 0 0 35px #0077ff;\n    font-weight: bold;\n    font-size: 1.2em;\n}\n\nbody.site-has-matrix-rain .matrix-char:nth-child(4n) {\n    color: #80ffff;\n    text-shadow: 0 0 8px rgba(128, 255, 255, 0.7);\n}\n\n\n@keyframes matrix-fall {\n    0% { \n        transform: translateY(-100%);\n        opacity: 1;\n    }\n    90% {\n        opacity: 0.9;\n    }\n    100% { \n        transform: translateY(150vh);\n        opacity: 0;\n    }\n}\n\n@keyframes char-fade {\n    0% { \n        opacity: 0;\n        transform: translateY(-10px);\n    }\n    20% { \n        opacity: 1;\n        transform: translateY(0);\n    }\n    80% { \n        opacity: 0.8;\n    }\n    100% { \n        opacity: 0;\n        transform: translateY(5px);\n    }\n}\n&lt;\/style>\n\n&lt;script type=\"text\/javascript\">\n(function() {\n    'use strict';\n\n\n    const container = document.createElement('div');\n    container.id = 'matrix-rain-container';\n    document.body.appendChild(container);\n    document.body.classList.add('site-has-matrix-rain');\n\n    const canvas = document.createElement('canvas');\n    const ctx = canvas.getContext('2d');\n    container.appendChild(canvas);\n\n    const config = {\n        fontSize: 18,\n        speed: 3, \n        characterChain: '0111001010010111001010100', \n        glowIntensity: 0.6,\n        columns: 0,\n        density: 0.7, \n        fadeInDuration: 0.3, \n        fadeOutDuration: 0.3 \n    };\n\n    let drops = &#91;];\n    let animationId = null;\n    let lastTime = 0;\n    const fixedCharacterChain = config.characterChain.split('');\n\n\n    function init() {\n        resizeCanvas();\n        createDrops();\n        if (animationId) {\n            cancelAnimationFrame(animationId);\n        }\n        lastTime = performance.now();\n        animate();\n        window.addEventListener('resize', onResize);\n        window.addEventListener('visibilitychange', onVisibilityChange);\n    }\n\n    function resizeCanvas() {\n        const width = window.innerWidth;\n        const height = window.innerHeight;\n\n        if (canvas.width !== width || canvas.height !== height) {\n            canvas.width = width;\n            canvas.height = height;\n          \n            config.columns = Math.floor((width \/ config.fontSize) * config.density);\n        }\n    }\n\n  \n    function createDrops() {\n        drops = &#91;];\n        const columnWidth = canvas.width \/ config.columns;\n        \n        for (let i = 0; i &lt; config.columns; i++) {\n\n            const x = i * columnWidth + Math.random() * columnWidth * 0.5;\n            drops.push({\n                x: x,\n                y: Math.random() * -canvas.height * 2, \n                speed: config.speed * (0.8 + Math.random() * 0.4), \n                characters: &#91;...fixedCharacterChain], \n                charPositions: new Array(fixedCharacterChain.length).fill(0),\n                startTime: Date.now() + Math.random() * 5000, \n                currentIndex: 0,\n                isActive: false\n            });\n        }\n    }\n\n\n    function calculateAlpha(drop, charIndex, currentY) {\n        const totalChars = drop.characters.length;\n        const progress = charIndex \/ totalChars;\n        \n \n        if (progress &lt; config.fadeInDuration) {\n            return progress \/ config.fadeInDuration;\n        }\n      \n        else if (progress > (1 - config.fadeOutDuration)) {\n            return (1 - progress) \/ config.fadeOutDuration;\n        }\n\n        else {\n            return 1;\n        }\n    }\n\n\n    function animate(currentTime = 0) {\n        const deltaTime = currentTime - lastTime;\n        lastTime = currentTime;\n\n\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n        ctx.font = `bold ${config.fontSize}px 'Courier New', monospace`;\n        ctx.textAlign = 'center';\n\n        for (let i = 0; i &lt; drops.length; i++) {\n            const drop = drops&#91;i];\n            \n\n            if (!drop.isActive &amp;&amp; Date.now() > drop.startTime) {\n                drop.isActive = true;\n            }\n            \n            if (!drop.isActive) continue;\n\n\n            drop.y += drop.speed * (deltaTime \/ 16); \/\/ \u57fa\u4e8e\u65f6\u95f4\u589e\u91cf\u786e\u4fdd\u5300\u901f\n\n        \n            for (let j = 0; j &lt; drop.characters.length; j++) {\n                const charY = drop.y - j * config.fontSize;\n                \n              \n                if (charY > -config.fontSize &amp;&amp; charY &lt; canvas.height + config.fontSize) {\n                    const alpha = calculateAlpha(drop, j, charY);\n                    \n                    if (alpha &lt;= 0) continue;\n\n            \n                    const blueIntensity = Math.floor(alpha * 255);\n                    const color = `rgba(0, ${blueIntensity}, ${blueIntensity}, ${alpha})`;\n                    \n       \n                    ctx.shadowBlur = 10 * alpha;\n                    ctx.shadowColor = `rgba(0, 255, 255, ${alpha * config.glowIntensity})`;\n                    ctx.fillStyle = color;\n                    \n                    ctx.fillText(drop.characters&#91;j], drop.x, charY);\n                }\n            }\n\n\n            if (drop.y - (drop.characters.length * config.fontSize) > canvas.height) {\n                resetDrop(drop);\n            }\n        }\n\n        animationId = requestAnimationFrame(animate);\n    }\n\n\n    function resetDrop(drop) {\n        drop.y = Math.random() * -canvas.height * 2;\n        drop.x = Math.random() * canvas.width; \/\/ \u968f\u673ax\u4f4d\u7f6e\u786e\u4fdd\u5747\u5300\n        drop.startTime = Date.now() + Math.random() * 2000; \/\/ \u968f\u673a\u5ef6\u8fdf\n        drop.isActive = false;\n        drop.speed = config.speed * (0.8 + Math.random() * 0.4);\n    }\n\n\n    function onResize() {\n        resizeCanvas();\n        createDrops();\n    }\n\n \n    function onVisibilityChange() {\n        if (document.hidden) {\n            if (animationId) {\n                cancelAnimationFrame(animationId);\n                animationId = null;\n            }\n        } else {\n            if (!animationId) {\n                lastTime = performance.now();\n                animate();\n            }\n        }\n    }\n\n\n    init();\n\n})();\n&lt;\/script>\n    &lt;?php\n}\nadd_action('wp_footer', 'matrix_rain_effect');<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u6570\u636e\u96e8\u6548\u679c\u5982\u56fe\uff1a css\u90e8\u5206\uff1a js\u90e8\u5206\uff08\u9700php\u5c01\u88c5\uff09\uff1a<\/p>\n","protected":false},"author":1,"featured_media":1224,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-1222","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-6"],"_links":{"self":[{"href":"https:\/\/zhhovo.top\/index.php\/wp-json\/wp\/v2\/posts\/1222","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zhhovo.top\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zhhovo.top\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zhhovo.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhhovo.top\/index.php\/wp-json\/wp\/v2\/comments?post=1222"}],"version-history":[{"count":2,"href":"https:\/\/zhhovo.top\/index.php\/wp-json\/wp\/v2\/posts\/1222\/revisions"}],"predecessor-version":[{"id":1227,"href":"https:\/\/zhhovo.top\/index.php\/wp-json\/wp\/v2\/posts\/1222\/revisions\/1227"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zhhovo.top\/index.php\/wp-json\/wp\/v2\/media\/1224"}],"wp:attachment":[{"href":"https:\/\/zhhovo.top\/index.php\/wp-json\/wp\/v2\/media?parent=1222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zhhovo.top\/index.php\/wp-json\/wp\/v2\/categories?post=1222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zhhovo.top\/index.php\/wp-json\/wp\/v2\/tags?post=1222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}