这些代码片段正在页面上缓慢飘落,模拟编程代码的视觉效果,给网站增添科技感和极客氛围。
效果特点:
- 不同编程语言用不同颜色区分(HTML橙、CSS蓝、JS黄、PHP紫、Python青)
- 随机速度飘落(慢/中/快)
- 轻微旋转动画
- 不影响页面交互(鼠标可穿透)
WordPress 后台 → 外观 → 主题文件编辑器 → footer.php → 在 </body> 前粘贴
<script>
(function(){
var box=document.createElement("div");
box.id="codeRainBox";
box.style.cssText="position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;overflow:hidden";
document.body.appendChild(box);
var style=document.createElement("style");
style.textContent=".code-item{position:absolute;top:-60px;font-family:Consolas,monospace;font-size:13px;padding:4px 8px;border-radius:6px;animation:code-down linear infinite;user-select:none}.code-item.html{background:rgba(227,76,38,.15);color:#e34c26;border:1px solid rgba(227,76,38,.3)}.code-item.css{background:rgba(38,77,228,.15);color:#264de4;border:1px solid rgba(38,77,228,.3)}.code-item.js{background:rgba(247,223,30,.15);color:#f7df1e;border:1px solid rgba(247,223,30,.4)}.code-item.php{background:rgba(119,123,180,.15);color:#7773b4;border:1px solid rgba(119,123,180,.3)}.code-item.python{background:rgba(55,118,171,.15);color:#3776ab;border:1px solid rgba(55,118,171,.3)}.code-item.bracket{background:rgba(255,255,255,.1);color:#888;border:1px solid rgba(255,255,255,.2);font-size:18px;font-weight:bold}.code-item.slow{animation-duration:18s}.code-item.normal{animation-duration:12s}.code-item.fast{animation-duration:7s}@keyframes code-down{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(calc(100vh + 100px));opacity:0}}";
document.head.appendChild(style);
var list=[["<div>","html"],["</div>","html"],["<span>","html"],["class=","html"],["display:flex","css"],["position:fixed","css"],["margin:0","css"],["padding:10px","css"],["function()","js"],["=> {}","js"],["const ","js"],["let ","js"],["return ","js"],["echo ","php"],["$var","php"],["def ","python"],["import ","python"],["print()","python"],["{ }","bracket"],["[ ]","bracket"],["( )","bracket"]];
function create(){
var item=list[Math.floor(Math.random()*list.length)];
var el=document.createElement("div");
el.className="code-item "+item[1];
el.textContent=item[0];
el.style.left=Math.random()*95+"%";
el.classList.add(["slow","normal","fast"][Math.floor(Math.random()*3)]);
el.style.animationDelay=Math.random()*3+"s";
el.addEventListener("animationend",function(){if(el.parentNode)el.parentNode.removeChild(el)});
box.appendChild(el);
}
for(var i=0;i<15;i++)setTimeout(create,Math.random()*5000);
setInterval(function(){if(box.children.length<40)create()},800);
})();
</script>
© 版权声明
文章版权归作者所有,未经允许请勿转载。
相关文章
暂无评论...




