CSS捉迷藏主題派對是一種獨特而有趣的聚會方式,可以為你的活動增添一份神秘和驚奇。該主題派對具有一定的技術性,需要參加者在活動過程中運用他們的CSS技能來藏匿和尋找藏匿者。
/* 樣式表 */ body { background-color: #f2f2f2; } .container { display: flex; flex-wrap: wrap; } .box { width: 100px; height: 100px; background-color: #3d3d3d; margin: 10px; transition: all 0.3s ease-in-out; cursor: pointer; } .box.hidden { visibility: hidden; } .box.visible { background-color: green; } /* JS 代碼 */ const boxes = document.querySelectorAll('.box'); function hideBoxes() { boxes.forEach(box => { box.classList.add('hidden'); box.classList.remove('visible'); }); } function showBox() { const randomBox = boxes[Math.floor(Math.random() * boxes.length)]; randomBox.classList.add('visible'); randomBox.classList.remove('hidden'); } hideBoxes(); setInterval(showBox, 1000);
在這個主題派對中,參加者需要在一個由多個方塊組成的區域內尋找藏匿者,并且在時間限制內盡可能多地找到他們。藏匿者必須隨時改變他們藏匿的方塊,使得尋找他們的參加者更具挑戰性。
使用CSS和JavaScript創建這樣的主題派對可以提供一個樂趣無窮的體驗,不管是在公司聚會還是私人派對中都會成為一次難忘的經歷。
上一篇css按鈕和文字等高
下一篇css有幾種定位坐標