HTML on MoeJue's Blog

打造 macOS 風格的 Web 應用

Sun, 11 May 2025 11:46:03 +0000

專案概述

在當今的 Web 開發領域，使用者體驗和介面設計變得越來越重要。

Mac Web Vue Template 是一個受 macOS 設計啟發的現代優雅的 Vue.js Web 模板，它是一個基於 Vue.js 的現代化 Web 應用模板，其設計靈感來源於 macOS 的優雅介面。這個專案不僅提供了美觀的 UI 設計，還包含了完整的專案結構和最佳實踐。

線上演示

你可以透過造訪 WebAi 來體驗這個模板的實際效果。邀請碼(MoeJue)

核心特色

macOS 風格的 UI 設計
- 採用 macOS 的設計語言
- 精緻的毛玻璃效果
- 優雅的動畫過渡
現代化的技術棧
- Vue.js 作為核心框架
- Vite 作為建構工具
- Pinia 進行狀態管理
- Vue Router 處理路由
- SCSS 預處理器
- ES6+ 現代特性
響應式設計
- 完美適配各種螢幕尺寸
- 流暢的行動裝置體驗

專案結構解析

專案採用了清晰且模組化的目錄結構：

src/
├── assets/          # 靜態資源
├── components/      # Vue 組件
│   ├── common/     # 通用組件
│   ├── system/     # 系統組件
│   └── apps/       # 應用組件
├── views/          # 頁面視圖
├── router/         # 路由配置
├── stores/         # 狀態管理
└── utils/          # 工具函數

這種結構設計使得專案具有良好的可維護性和可擴展性。

我的二次元相簿又回來了

Fri, 08 Nov 2024 09:52:39 +0000

從最早的圖庫，到圖床，再到現在的相簿。我對圖片的執著已經可以說是跨越了好幾個世紀了。圖庫的圖片是存在七牛雲的，後來流量被刷就關閉了。圖床，現在轉為為部落格提供圖片上傳服務了。相簿，就是手機中相簿的概念，它既可以存圖片也可以放影片。逐漸是越來越完善了。

這兩天就把平常保存的影片圖片什麼的上傳到了伺服器，寫了個介面和介面，順帶開源出來。(我要做一個堅定的開源愛好者)

我的二次元相簿前端介面

這裡是阿珏醬的私人相簿，保存著阿珏在平常收集的圖片，和各大平台中點讚收藏的影片。
包括但不限於B站、YouTube、抖音、X、facebook、pixiv等平台的影片或圖片，相關的數據資訊版權歸原作者所有。
數據將不定期手動更新，如果你想要某些圖片或者影片，請直接聯繫阿珏醬獲取。

預覽

https://photo.moejue.cn

特性

支援圖片和影片的展示
支援相簿的展示
支援相簿的密碼保護
支援18+保護
支援搜尋

待辦事項

優化特效展示
優化介面流暢度

安裝說明

複製倉庫到本地：

git clone https://github.com/iAJue/PhotoGallery.git

進入專案目錄：
```
cd PhotoGallery
```
安裝依賴：
```
npm install
```
打包專案
```
npm run build
```

後端介面

僅供參考 https://github.com/iAJue/wasteCode/tree/main/photo

返回數據格式

照片介面

[
{
    "date": "\u6628\u5929",
    "items": [
        {
            "src": "https:\/\/moejuevideo.pages.dev\/file\/1730957555106_ocgRCdDEA07fAILEKEFOA8ADAyETABBMffIBE6~tplv-dy-aweme-images_q75.webp",
            "alt": "ocgRCdDEA07fAILEKEFOA8ADAyETABBMffIBE6~tplv-dy-aweme-images_q75.webp",
            "isVideo": false,
            "duration": null
        }
    ]
}
]

相簿介面

[
{
    "folder_id": "3",
    "folder_name": "images",
    "created_at": "2024-11-07 15:09:06",
    "photo_count": "61",
    "latest_image": "https:\/\/moejuevideo.pages.dev\/file\/1730963758087_GZIaBGlbAAALz_E.jpeg",
    "attribute": "2",
    "ispassword": true
}
]

隨機介面

論網速快慢的區別

Sat, 07 Nov 2020 14:09:07 +0000

論網速快慢的區別

隨著網路的普及，使用者對響應速度快慢越來越重視了，網站越快，使用者的黏性和轉化率也會越高。簡單來說，就是要提高速度！影響網站速度的因素有很多，比如………………….

一本正經可不是我的風格，下面請看我的表演 想法起源：一開始的想法是使用純CSS進行實現，把底圖base64編碼後直接放在background-image上，就可以達到背景圖片與網頁一同載入出來的效果

第一步：首先將提前準備好的素材圖片進行處理，拔下泳衣和泳裙第二步：新建個HTML檔案第三步：

完成。。然後就發現個問題，由於我的底圖檔案大小達到了12兆，編碼後的字串過大，導致網頁載入又卡又慢，實在無使用者體驗而且這種方式載入的底圖會突然的顯示出來，過於唐突，效果不好

後改用： CSS+JavaScript進行實現，由background-image直接載入背景圖片，能達到逐漸顯示的效果，待底圖載入完畢後再由JS動態插入配圖

不禁感慨一句，什麼破網路，慢得連人物圖片的衣服都載入不出來

鴿主帶著新版三合一回來了

Sun, 04 Aug 2019 01:42:18 +0000

自從5.20表白後，鴿主就一直處於失蹤狀態…….

時隔不知道多少個月，三合一它竟然又更新了，兩個月前在群裡立下的flag，今天我把它給圓了，不要問我中間兩個月幹嘛去了-.- （忙著參加大型鴿子聚會）

正文

由於網路識別經常掛掉，非常不穩定，一直有小夥伴在跟我反饋，所以這次特意更新了本地識別。
推薦1G記憶體以上的機子安裝，推薦配置2核2G，最佳配置16核32G [#手動滑稽]

v2.0

新增本地二維碼識別與生成
移除網路識別介面
修復已知BUG
其他一些細節優化

詳細說明和安裝教程可點擊這裡查看上個版本
新版網站均保留了舊版本資料，不影響之前使用者使用，並且與贊助版資料同步

贊助版

由於舊版本盜版氾濫，新版三合一增設了贊助版。
演示網站：https://qr.moeins.cn

贊助版主要特色：

優化二維碼的識別與生成，大大提高識別準確率，更快的識別速度，不佔CUP與記憶體，更穩定
新增21套三合一生成模板，並且可支援無限擴展，添加教程在文末
新增對外的API介面，不再針對該程式使用，任何程式都可呼叫

如何獲得：
點擊這裡贊助項目18.88元以上即可獲得收款碼三合一的贊助專享版，你值得擁有！

關於贊助版的一些小小說明（之前都是沒有特意拿出來說明）
到目前為止，我所有的贊助版項目均不綁定網域，不曾加密，可自由擴展，支援二次開發，且贊助金額都偏低，即可獲得。所以還請有贊助的小夥伴們不要隨意分享贊助得到的原始碼，這是對作者的尊重也是對自己權益的保障。由於不存在買賣關係，如無重大BUG作者將不定期更新或無限期拖更。如遇小問題，在作者空閒之餘願意指導或幫助修改，但是要新增大功能這種情況下我有權拒絕幫忙或需另外付費。

贊助版模板擴展教程

模板推薦尺寸為：900*1200

將模板圖片放至/public/static/images/template/模板目錄，注意請不要使用中文名，且只支援jpg副檔名
在根目錄的config.php中 qr_template 項下配置相關資料，格式如下：

‘001’ => [ ’name’ => ‘預設模板’, ‘data’ => [ 150,200 ], ’title’ => true, ‘size’ => 20 ]

參數說明

名稱

變數名

必填

類型

範例值

描述

模板ID

無

是

int

001

模板的檔案名，推薦數字，不可重複

別名

name

是

string

預設模板

在前台顯示的模板別名

X,Y

data

是

array

[150,200]

二維碼生成的左上角的起始X（橫坐標）,Y（縱坐標）坐標，不可為負數且小於模板尺寸

模板標題

如何優雅地提交一個表單

Mon, 06 May 2019 07:28:33 +0000

這是一個非常基礎的HTML表單提交問題，但卻是一個非常實用的技巧我的業務場景是這樣的：一個可動態建立input的表單，如下圖這意味著input的name不能是一個固定的，否則肯定會被覆蓋掉的

第一種，傳統的普通提交方式，給每一個要提交的input一個唯一的name

瀏覽器提交抓到的格式是這樣子的伺服器獲取列印出來的是這樣的，對後端的資料處理就非常不友善

第二種，陣列的方式進行表單提交

瀏覽器和後端列印的結果分別為

細心觀察就會發現，提交的name值發生了變化，變成了一樣的？陣列？提交到後端就會發現資料比之前整齊多了但這裡要注意的是，提交的陣列鍵中不需要使用引號，否則引號也會成為鍵的一部分

當然了，實際中還可能遇到這樣的問題，要提交的組數（像上面的1、2、3）是不確定的，可以在前端隨意地添加，這個時候怎麼去用陣列提交這些內容呢？下面就是我業務中的實際解決方案這樣的話，二維陣列的鍵則不需要我們自己去維護了，由瀏覽器幫我們自動生成後端接收到的資料則變成了這樣子，變得非常好處理了此方法適用於，要提交一堆不確定個數的一組相關的資料對完結撒花！~

一些常見功能的查詢sql

Wed, 10 Apr 2019 09:33:11 +0000

1、情境：查詢一位選手的排名及距離上一名差多少票 方法二（去重排序查詢比自己少的數量）

$temp = DB::fetch_first("SELECT distinct total+jewel_vote+forge_vote  ,COUNT(*)+1 AS RANK FROM " . DB::table('vote_competition') ." WHERE total+jewel_vote+forge_vote>" . $competition['all'] . " and aid={$aid} ORDER by forge_vote desc");
$rank = $temp['RANK'];
// 無法直接查詢到上一名選手票數
if ($temp['total+jewel_vote+forge_vote']) {
        // 這裡查詢出來的是和第一名選手相差的票數
    $up = $temp['total+jewel_vote+forge_vote']-$competition['all'];
}

方法一（定義變數累加排序）

$temp = DB::fetch_all("SELECT a.cid,a.total,a.forge_vote,a.jewel_vote,(@rowNum:=@rowNum+1) AS rank FROM pre_vote_competition AS a, (SELECT (@rowNum :=0) ) b WHERE aid={$aid} ORDER BY (a.total+a.forge_vote+a.jewel_vote) DESC ");
foreach ($temp as $key => $value) {
    if ($value['cid'] == $cid) {
        // 當前自己的排名
 $rank = $value['rank'];
     if ($up) {
             $up = $up - ($value['total'] +  $value['forge_vote'] + $value['jewel_vote']);
            }
 break;
    }
    // 和上一名選手相差的票數
    $up = $value['total'] +  $value['forge_vote'] + $value['jewel_vote'];
}

2、情境：查詢一篇文章的上一篇和下一篇，支援斷號

萌音影視 - 線上影視應用

Tue, 25 Sep 2018 07:41:02 +0000

部落格 | 演示站 | QQ群 | GitHub

基於優雅的 Laravel 框架和一點都不妹子的妹子UI 的線上影視應用

作者有話要說

雖然線上影視網上也是遍地都是，但這並不影響我自個寫一個，這樣以後自己看番也方便，畢竟自己動手才能豐衣足食，又能學習到新的知識，豈不美哉。

頁面設計參考了部分網站。影視資源均來自網上，如有侵權，請及時聯繫我們。

讓我們一起拋棄那些ex的60秒廣告吧~

無資料庫、無後台模式，僅只有一個設定檔(config/web.php)
無廣告，支援VIP解析，官方源，速度快，多頻道，多分類

待辦事項:

- 獨立的頻道首頁
- 電視台直播
- 多解析介面
- 待添加…

贊助專享版

另外這是一個雙版本應用，就是它會有兩個不同的版本，贊助版基於普通版的優化而來，在功能和效能上做了很大提升，大大加快運行速度，並且保持優先的更新。

那麼，問題來了，如何獲得贊助專享版呢？

你可以在這裡或者這裡對專案贊助58元以上即可獲得

當然，如果專案對你有幫助，或者你有需要，都可以選擇贊助我們，哪怕一分也是愛

我想沒有一個人寫開源專案是為了牟利而寫，畢竟它還沒有去磚廠搬一天磚賺的多。

安裝需求

LNMP/AMP With PHP5.6+
curl、OpenSSL擴展
Composer

透過Composer安裝主程式

1. 使用composer安裝moeins

$ composer create-project a-jue/moeins

#等待安裝依賴庫後，會自動執行安裝腳本
#出現如下提示表示安裝完成

> Illuminate\Foundation\ComposerScripts::postInstall
> php artisan optimize
Generating optimized class loader
The compiled services file has been removed.
> php artisan key:generate
Application key [base64:Hx0I9UUQg7OyIz8lpDYG6Y/gW1uxS760ERdWzGG2jyQ=] set successfully.

2. 目錄權限

將public 子目錄設定為對外公開的web目錄

CSS3 隨機背景圖片切換特效

Wed, 16 May 2018 11:58:08 +0000

CSS3 隨機背景圖片淡入淡出切換特效演示效果如本篇文章背景所示看大家扒我的幻想領域二次元限定版扒得比較累，扒了大半個小時的，抽空整理一下發出來設計之初本來是打算使用 jQuery 進行實現的，但是注意到了 CSS3 的 @keyframes 規則，CSS3 已經強大到曾經只有 JS 才能實現的效果

定義和用法

透過 @keyframes 規則，您能夠建立動畫。

建立動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。

在動畫過程中，您能夠多次改變這套 CSS 樣式。

以百分比來規定改變發生的時間，或者透過關鍵詞 “from” 和 “to”，等價於 0% 和 100%。

0% 是動畫的開始時間，100% 是動畫的結束時間。

為了獲得最佳的瀏覽器支援，您應該始終定義 0% 和 100% 選擇器。

註釋：請使用動畫屬性來控制動畫的外觀，同時將動畫與選擇器綁定。

核心 CSS 部分 (記得切換圖片地址)

body {
	background: #000;
	background-attachment: fixed;
	word-wrap: break-word;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat
}

ul {
	list-style: none
}

.cb-slideshow li:nth-child(1) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341099)
}

.cb-slideshow li:nth-child(2) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341159)
}

.cb-slideshow li:nth-child(3) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341149)
}

.cb-slideshow li:nth-child(4) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341139)
}

.cb-slideshow li:nth-child(5) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341129)
}

.cb-slideshow li:nth-child(6) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341119)
}

.cb-slideshow,.cb-slideshow:after {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -2
}

.cb-slideshow:after {
	content: ''
}

.cb-slideshow li span {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	color: transparent;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: none;
	opacity: 0;
	z-index: -2;
	-webkit-backface-visibility: hidden;
	-webkit-animation: imageAnimation 36s linear infinite 0s;
	-moz-animation: imageAnimation 36s linear infinite 0s;
	-o-animation: imageAnimation 36s linear infinite 0s;
	-ms-animation: imageAnimation 36s linear infinite 0s;
	animation: imageAnimation 36s linear infinite 0s
}

.cb-slideshow li:nth-child(2) span {
	-webkit-animation-delay: 6s;
	-moz-animation-delay: 6s;
	-o-animation-delay: 6s;
	-ms-animation-delay: 6s;
	animation-delay: 6s
}

.cb-slideshow li:nth-child(3) span {
	-webkit-animation-delay: 12s;
	-moz-animation-delay: 12s;
	-o-animation-delay: 12s;
	-ms-animation-delay: 12s;
	animation-delay: 12s
}

.cb-slideshow li:nth-child(4) span {
	-webkit-animation-delay: 18s;
	-moz-animation-delay: 18s;
	-o-animation-delay: 18s;
	-ms-animation-delay: 18s;
	animation-delay: 18s
}

.cb-slideshow li:nth-child(5) span {
	-webkit-animation-delay: 24s;
	-moz-animation-delay: 24s;
	-o-animation-delay: 24s;
	-ms-animation-delay: 24s;
	animation-delay: 24s
}

.cb-slideshow li:nth-child(6) span {
	-webkit-animation-delay: 30s;
	-moz-animation-delay: 30s;
	-o-animation-delay: 30s;
	-ms-animation-delay: 30s;
	animation-delay: 30s
}

@-webkit-keyframes imageAnimation {
	0% {
		opacity: 0;
		-webkit-animation-timing-function: ease-in
	}

	8% {
		opacity: 1;
		-webkit-transform: scale(1.05);
		-webkit-animation-timing-function: ease-out
	}

	17% {
		opacity: 1;
		-webkit-transform: scale(1.1) rotate(0)
	}

	25% {
		opacity: 0;
		-webkit-transform: scale(1.1) rotate(0)
	}

	100% {
		opacity: 0
	}
}

當然還是需要配合 HTML 程式碼的 HTML 部分 (其中的文字部分和 <li> 的數量是可以隨意更改的)

隨機二次元圖片API第二彈

Sun, 04 Mar 2018 11:01:46 +0000

時隔差2天三個月，距離首個隨機二次元圖片API發佈已有許久時間。
第二彈API，突如其來

更新說明：

相較於上一個版本，這次的圖片更適合做背景圖片、桌面壁紙等。
上一個版本就是個大雜燴，什麼圖片都有，慘不忍睹（我自己都不用）。這個版本，花了一點時間，篩選出部分圖片(1080P+)並上傳至新浪雲。
真正意義上支援HTTPS，圖片全託管在新浪雲上，速度也有所提升。
去除了各種意義上的參數設定
圖片內容均為動漫二次元圖片（全年齡段(笑)）

介面位址：

https://random.52ecy.cn/randbg.php

對，呼叫就是如此簡單，直接訪問即可使用，且行且珍惜。
上一個草率的版本
 項目主頁

隨機動漫桌布，每天刷一刷，每次都不一樣。

HTML5 畫布 - 小球碰撞

Tue, 18 Jul 2017 09:17:31 +0000

HTML5 是全球資訊網的核心語言，屬於標準通用標記語言下超文件標記語言（HTML）的第五次重大修訂。自 1999 年以來，HTML 4.01 已有許多變化，如今，HTML 4.01 中的一些元素已被棄用，這些元素在 HTML5 中已被刪除或重新定義。為了更好地處理當今的網際網路應用程式，HTML5 添加了許多新元素和功能，例如：圖形繪製、多媒體內容、更好的頁面結構、更好的表單處理，以及一些 API，如拖放元素、定位，包括網頁應用程式快取、儲存、網路工作者等。

標籤

描述

<canvas>

標籤定義圖形，例如圖表和其他圖像。此標籤基於 JavaScript 的繪圖 API

效果展示：

您的瀏覽器不支援 H5

程式碼部分：

<canvas id="my-canvas" width="500px" height="400px" style="border:1px solid red" >
您的瀏覽器不支援 H5</canvas>

<script type="text/javascript">
	<!-- 取得畫布物件 -->
	var my\_canvas = document.getElementById("my-canvas");
	<!-- 取得畫筆 -->
	var my\_huabi = my\_canvas.getContext("2d");
	var x = 50;
	var y = 50;
	var r = 20;
	function deawBall(x,y){
		<!-- 設定畫筆顏色 -->
		my\_huabi.fillStyle = "green";
		<!-- 開始一個新路徑 -->
		my\_huabi.beginPath();
		<!-- 畫出小球 -->
		my\_huabi.arc(x, y, r, 0, 2 \* Math.PI);
		<!-- 關閉路徑 -->
		my\_huabi.fill();
	}
	var fx\_x = true;//當 fx_x 為 true 時，向 x 軸移動
	var fx\_y = true;//當 fx_y 為 true 時，向 y 軸移動
	var speen = 1;
	<!-- 計時器 -->
	window.setInterval("moveBall()", 10);
	function moveBall(){
		<!-- 判斷目前小球的運動方向 -->
		if(fx\_x == true){
			x += speen;
			if(x >= 500-r){
				<!-- 當達到底部時，向上彈 -->
				fx\_x = false;
			}
		}else{
			x -= speen;
			if(x <= 0+r){
				<!-- 當達到頂部時，向下彈 -->
				fx\_x = true;
			}
		}
		if(fx\_y == true){
			y += speen;
			if(y >= 400-r){
				<!-- 當達到左側時，向右側彈 -->
				fx\_y = false;
			}
		}else{
			y -= speen;
			if(y <= 0+r){
				<!-- 當達到右側時，向左側彈 -->
				fx\_y = true;
			}
		}
		<!-- 清除畫布 重畫 -->
		my\_huabi.clearRect(0, 0, 500, 400);
		deawBall(x, y);
	}
</script>

var my\_canvas = document.getElementById("my-canvas"); var my\_huabi = my\_canvas.getContext("2d"); var x = 50; var y = 50; var r = 20; function deawBall(x,y){ my\_huabi.fillStyle = "green"; my\_huabi.beginPath(); my\_huabi.arc(x, y, r, 0, 2 \* Math.PI); my\_huabi.fill(); } var fx\_x = true;//當 fx_x 為 true 時，向 x 軸移動 var fx\_y = true;//當 fx_y 為 true 時，向 y 軸移動 var speen = 1; window.setInterval("moveBall()", 10); function moveBall(){ if(fx\_x == true){ x += speen; if(x >= 500-r){ fx\_x = false; } }else{ x -= speen; if(x <= 0+r){ fx\_x = true; } } if(fx\_y == true){ y += speen; if(y >= 400-r){ fx\_y = false; } }else{ y -= speen; if(y <= 0+r){ fx\_y = true; } } my\_huabi.clearRect(0, 0, 500, 400); deawBall(x, y); }

簡單的css3頭像旋轉與3D旋轉效果

Mon, 10 Jul 2017 07:45:23 +0000

經常會在一些網站看到評論區，評論人的頭像當滑鼠經過會360°旋轉

先來看一下效果

.tximg{ height:300px; border-radius:50%; border:2px solid green; /變化規則/ transition:all 2s; } .tximg:hover{ /* 變化動作定義2d旋轉，參數填寫角度 */ transform:rotate(360deg); }

CSS 部分

img{
	height:300px;
	border-radius:50%;
	border:2px solid green;
	/*變化規則*/
	transition:all 2s;
}

img:hover{
	/*
		變化動作
		定義2d旋轉，參數填寫角度
	*/
	transform:rotate(360deg);
}

HTML 部分 (很簡單，就一張圖片)

<img src="http://www.52ecy.cn/log0.png">

3D 旋轉效果 (前端顯示樣式好像還是衝突了-。-)

.div{ width:300px; height:300px; border:1px solid red; /如果希望看到3D效果，需要在動的這個元素的父元素，增加一個perspective屬性/ perspective:300px;/3D 元素距視圖的距離，一般與圖片的高度一致效果最佳/ } .img{ width:300px; height:300px; border:1px solid red; /變化規則/ /設定旋轉元素的原始點位置/ transform-origin:bottom; transition:all 2s; } .img:hover{ /變化動作/ transform:rotateX(60deg); }

用CSS3繪製iPhone手機

Mon, 03 Jul 2017 06:09:01 +0000

先上效果圖，先睹為快。(這絕對不是一張圖片。嗯~~這話怎麼怪怪的~~)

不要問我iPhone幾，因為我也不知道，沒用過，你懂得。

css樣式部分

#phone{ width:250px; height:500px; background-color:#2E2E2E; border:10px solid #3B3B3B; margin:100px auto; border-radius:30px;/設定div元素的圓角邊框/ }

#camera{ width:8px; height:8px; background-color:#1A1A1A; border-radius:50%; border:2px solid #505050; margin:10px auto;/距離上邊距10px 左右居中/ }

#receiver{ width:80px; height:8px; border:2px solid #505050; margin:10px auto; border-radius:10px; background-color:#1A1A1A; }

#screen{ width:225px; height:385px; background-color:#0A0A0A; border:3px solid #1C1C1C; margin:10px auto; }

#btn{ width:40px; height:40px; background:#1A1A1A; border-radius:50%; /當寬高相同時，則為圓/ margin:10px auto; }

/:before 選擇器在被選元素的內容前面插入內容。/ #btn:before{ width:22px; height:22px; border:2px solid white; border-radius:30%; content:""; /即使插入的內容為空也需要寫，否則不顯示/ display:inline-block; margin-top:7px; margin-left:7px; }

HTML部分

晚些我又加了點玩意上去

點擊Home鍵可以讓手機亮屏，5秒後又再次熄滅螢幕