CSS on MoeJue's Blog

我不會AE,但是我會Code

Sat, 23 Aug 2025 12:29:01 +0000

✨ 緒山真尋的小窩 ✨

🌸 歡迎來到緒山真尋的小窩 🌸

哇！你發現了我的秘密基地！(*≧ω≦)

這裡是緒山真尋的個人網站，充滿了可愛的動畫和有趣的內容！我會在這裡分享我喜歡的動畫、漫畫、遊戲和一些日常生活中的小確幸～

💕 關於我 💕

我是緒山真尋，一個熱愛成人遊戲的家裡蹲廢柴尼特族。喜歡動畫、漫畫、輕小說和各種可愛的東西！最喜歡的顏色是粉色和淡藍色！

  ∩∩
（･ω･）  <- 這是我！
＿|　⊃／(＿＿
／ └-(＿＿＿／

🎀 網站內容 🎀

🌟 精美動畫展示
📚 我的私房照
🎵 好聽的音樂
📷 日常生活的小片段

🌈 關於 🌈

🎭 演示: https://mahiro.moejue.cn/
🏠 個人部落格: https://MoeJue.cn/
🐱 GitHub: https://github.com/iAJue/Mahiro
📧 官方網站: https://onimai.jp/

📝 版權聲明 📝

本網站由 @Moejue 設計和開發
網站中使用的所有動畫片段、漫畫圖片、角色形象及相關內容的版權均歸原作者(ねことうふ（Nekotofu）)及其發行公司(Studio Bind、Ichijinsha)所有
如有侵權，請透過以上聯絡方式告知，我會立即刪除相關內容
GNU GENERAL PUBLIC LICENSE Version 2
Copyright © 2025 MoeJue. All rights reserved.

💌 特別感謝 💌

感謝所有喜歡緒山真尋的朋友們！(●’◡’●)

我的二次元相簿又回來了

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動態插入配圖

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

Discuz! 論壇個人空間自訂 CSS 樣式

Tue, 24 Mar 2020 13:23:51 +0000

幾天前閒來無事，然後就去找了一下Discuz論壇的漏洞，然後還真就找到了，順便就寫成了個軟體，再就順勢水了一篇。下面這是事件起因這個漏洞對網站並沒有太大的危害，僅只能自定義個人空間的CSS樣式，對網站數據並不構成威脅，還請放心。

軟體效果即可以自定義Discuz個人空間的裝扮的CSS樣式，豐富美化個人空間，讓其不再單調。

測試Discuz版本X3.4，其他版本請自行測試。
僅測試了全球主機交流論壇(站長求放過)，同版本Discuz理論上通用
未開通個人空間的論壇不可用
自定義CSS不建議過多且建議壓縮成一行，以免導致失敗
協議頭正常情況下，理論上可以不用修改，放置文本框主要是為了方便擴展
如果操作的是loc論壇，默認會關注並添加阿珏醬為好友 [#手動滑稽 + 狗頭保命]

本軟體僅本地請求，不將任何數據上傳到伺服器。軟體有加殼，防毒軟體可能誤報，還請放心使用 獲取Cookie

瀏覽器打開開發人員工具(F12)，進入目標網站，在登入狀態下的任何頁面即可。開發人員工具切換到Network選項欄，重新整理頁面(F5)，找到並點擊當前網域的請求數據的Headers欄，Request Headers處的Cookie。我知道大家肯定聽不懂我在說什麼，所以我特意做了圖。

第二種方法操作更簡單快捷，但是這種方法適用於你知道自己想要的Cookie是哪一個。如下圖所示。

第一種方法中的開發人員工具在早期的部落格文章中也有使用過，但沒有講到如何獲取Cookie。推薦還是第一種，Cookie反正不怕多，但少了就不行了。 免責聲明

本軟體僅供學習交流使用！
本軟體作者不承擔任何責任！
使用本軟體即視為同意本條款！

下載

下面這個下載樣式已經好幾年沒用過了，今天終於重出江湖了。 .down_link{background:url('https://www.52ecy.cn/content/uploadfile/201707/md-bg.jpeg') no-repeat 100% 0% #fffdff; border: 1px solid #faf8fb; border-radius: 2px; color: #666; font-size: 14px; margin-bottom: 10px; padding: 5px 20px;}.downbtn{background: none repeat scroll 0 0 #1BA1E2; border: 0 none; border-radius: 2px; color: #FFFFFF; cursor: pointer; font-family: "Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 8px 30px;text-transform:none;text-decoration:none;} .downlink a{text-decoration:none;} .downlink a{text-decoration:none;font-size:15px;} .downlink a:link{color: #ffffff;} .downlink a:visited{color: #ffffff;} .downlink a:hover{color: #ffffff;} .downlink a:active{color: #ffffff;} .downbtn{background: none repeat scroll 0 0 #1BA1E2; border: 0 none; border-radius: 2px; color: #FFFFFF !important; cursor: pointer; font-family: "Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 8px 30px;} .yanshibtn{background: none repeat scroll 0 0 #d33431; border: 0 none; border-radius: 2px; color: #FFFFFF!important; cursor: pointer; font-family: "Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 8px 30px;text-transform:none;text-decoration:none;} .downbtn:hover,.yanshibtn:hover{background: none repeat scroll 0 0 #9B59B6; border: 0 none; border-radius: 2px; color: #FFFFFF!important; cursor: pointer; font-family: "Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 8px 30px;} .downbtn a:hover,.yanshibtn a:hover{background: none repeat scroll 0 0 #9B59B6; border: 0 none; border-radius: 2px; color: #FFFFFF; cursor: pointer; font-family: "Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 8px 30px;}

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> 的數量是可以隨意更改的)

簡單的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秒後又再次熄滅螢幕