HTML on MoeJueのブログ

打造 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+ 現代特性
響應式設計

我的二次元相簿又回來了

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

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

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

我的二次元相簿前端介面

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

預覽

https://photo.moejue.cn

論網速快慢的區別

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

如何優雅地提交一個表單

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

這是一個非常基礎的HTML表單提交問題，但卻是一個非常實用的技巧我的業務場景是這樣的：一個可動態建立input的表單，如下圖

這意味著input的name不能是一個固定的，否則肯定會被覆蓋掉的

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

瀏覽器提交抓到的格式是這樣子的

伺服器獲取列印出來的是這樣的，對後端的資料處理就非常不友善

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

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

一些常見功能的查詢sql

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

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

PHP

$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'];
}

クリックして展開し、詳細を表示

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

萌音影視 - 線上影視應用

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

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

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 部分 (記得切換圖片地址)

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

程式碼部分：

HTML

<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 部分

CSS

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

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

クリックして展開し、詳細を表示

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

用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; }