為了結合后端而學習前端的學習日志—

為了結合后端而學習前端的學習日志——【黑洞光標特效】

在這里插入圖片描述

前端設計專欄

今天給大家帶來一個超酷的前端特效——黑洞光標！讓你的鼠標變成一個會吞噬光粒子的迷你黑洞，點擊時還會噴射出綠色能量粒子！🌠

🚀 效果預覽

想象一下：你的鼠標變成一個旋轉的黑洞，周圍環繞著綠色的吸積盤，當你在頁面上移動時，它就像宇宙中的神秘天體一樣吸引著周圍的光粒子… 點擊屏幕時，還會像超新星爆發一樣噴射出能量粒子！?

在這里插入圖片描述

🌟 特效亮點

旋轉的吸積盤 💫
黑洞周圍有發光的綠色吸積盤，不停旋轉模擬真實黑洞效果
懸停放大效果 🔍
當鼠標懸停在元素上時，黑洞會微微膨脹，仿佛在"吞噬"那個元素
點擊粒子爆發 ?
點擊屏幕時會噴射出10個綠色光粒子，像能量爆發一樣
流暢的動畫 🎬
所有效果都使用CSS動畫和requestAnimationFrame實現，60fps絲滑流暢

🛠? 技術實現

1. 黑洞本體設計

.black-hole-cursor {background: radial-gradient(circle at center,#000 0%,#000 60%,#227030 80%,#32a144 100%);box-shadow: 0 0 15px rgba(50, 161, 68, 0.5),inset 0 0 10px rgba(50, 161, 68, 0.1);
}

使用徑向漸變創造黑洞的層次感，從純黑到主題綠色漸變🌿

2. 吸積盤動畫

@keyframes rotate {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }
}

簡單的旋轉動畫，讓黑洞看起來更真實🌀

3. 粒子噴射系統

document.addEventListener('click', function(e) {// 創建5個光粒子for (let i = 0; i < 5; i++) {const photon = document.createElement('div');// 設置粒子初始位置和樣式...document.body.appendChild(photon);// 粒子動畫邏輯const animate = () => {// 更新粒子位置和透明度...requestAnimationFrame(animate);};animate();}
});

點擊時動態創建粒子元素，并使用requestAnimationFrame實現流暢動畫?

🎨 設計思路

顏色選擇 🟢
使用#32a144作為主色調，從深綠到淺綠的漸變模擬能量衰減
物理模擬 🌍
- 黑洞懸停時放大模擬引力增強
- 粒子噴射后逐漸消失模擬能量耗散
性能優化 ?
- 使用transform和opacity實現高性能動畫
- 粒子消失后及時移除DOM節點

🚀 完整源碼

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>黑洞光標效果</title><style>body {margin: 0;padding: 0;box-sizing: border-box;height: 100vh;background-color: #000;cursor: none;overflow-x: hidden;}/* 黑洞光標 */.black-hole-cursor {position: fixed;width: 20px;height: 20px;border-radius: 50%;background: radial-gradient(circle at center,#000 0%,#000 60%,#227030 80%,#32a144 100%);pointer-events: none;transform: translate(-50%, -50%);z-index: 9999;transition:width 0.3s ease,height 0.3s ease;box-shadow:0 0 15px rgba(50, 161, 68, 0.5),inset 0 0 10px rgba(50, 161, 68, 0.1);}/* 黑洞吸積盤 */.accretion-disk {position: absolute;width: 100%;height: 100%;border-radius: 50%;border: 2px solid transparent;border-top-color: #32a144;border-right-color: #46c75b;border-bottom-color: #288036;border-left-color: #56e36c;animation: rotate 3s linear infinite;opacity: 0.8;}@keyframes rotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}/* 不同狀態的黑洞樣式 */.black-hole-hover {width: 30px;height: 30px;box-shadow:0 0 25px rgba(50, 161, 68, 0.8),inset 0 0 15px rgba(50, 161, 68, 0.2);}.black-hole-active {width: 25px;height: 25px;box-shadow:0 0 20px rgba(50, 161, 68, 0.8),inset 0 0 10px rgba(50, 161, 68, 0.3);}/* 光粒子 */.light-particle {position: fixed;width: 4px;height: 4px;border-radius: 50%;background-color: #32a144;pointer-events: none;z-index: 9998;opacity: 1;transform: translate(-50%, -50%);transition: all 0.5s ease-out;}</style>
</head><body><!-- 黑洞光標 --><div class="black-hole-cursor" id="cursor"><div class="accretion-disk"></div></div><script>document.addEventListener('DOMContentLoaded', function () {const cursor = document.getElementById('cursor');let mouseX = window.innerWidth / 2;let mouseY = window.innerHeight / 2;// 鼠標移動時更新黑洞位置document.addEventListener('mousemove', function (e) {mouseX = e.clientX;mouseY = e.clientY;cursor.style.left = `${mouseX}px`;cursor.style.top = `${mouseY}px`;});const hoverables = document.querySelectorAll('*');// 為可交互元素添加事件hoverables.forEach(item => {item.addEventListener('mouseenter', function () {cursor.classList.add('black-hole-hover');});item.addEventListener('mouseleave', function () {cursor.classList.remove('black-hole-hover');});item.addEventListener('mousedown', function () {cursor.classList.add('black-hole-active');});item.addEventListener('mouseup', function () {cursor.classList.remove('black-hole-active');});});// 鼠標點擊事件，創建少量光子document.addEventListener('click', function (e) {const clickX = e.clientX;const clickY = e.clientY;const photonCount = 10; // 點擊出現的光子數量for (let i = 0; i < photonCount; i++) {const photon = document.createElement('div');photon.classList.add('light-particle');photon.style.left = `${clickX}px`;photon.style.top = `${clickY}px`;document.body.appendChild(photon);const angle = Math.random() * Math.PI * 2;const speed = 2 + Math.random() * 3;let x = clickX;let y = clickY;let opacity = 1;const animate = () => {x += Math.cos(angle) * speed;y += Math.sin(angle) * speed;opacity -= 0.02;photon.style.left = `${x}px`;photon.style.top = `${y}px`;photon.style.opacity = opacity;if (opacity > 0) {requestAnimationFrame(animate);} else {photon.remove();}};animate();}});});</script>
</body></html>

💡 創意擴展

想讓這個特效更酷？試試這些idea：

增加音效 🔊
點擊時添加"嗖嗖"的粒子音效
粒子追蹤 🎯
讓光粒子不是直線飛出，而是螺旋飛向黑洞
重力影響 🌌
讓頁面上的元素微微向光標方向傾斜，模擬引力效果
星空背景 🌠
添加閃爍的星星作為背景，增強宇宙感

🌈 結語

這個黑洞光標特效非常適合用于：

科幻主題網站 🚀
個人博客 🎮
創意作品集 🎨

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/79377.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/79377.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/79377.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！