CSS

✨ 緒山真尋的小窩 ✨ 🌸 歡迎來到緒山真尋的小窩 🌸 哇！你發現了我的秘密基地！(*≧ω≦) 這裡是緒山真尋的個人網站，充滿了可愛的動畫和有趣的內容！我會在這裡分享我喜歡的動畫、漫畫、遊戲和一些日常生活中的小確幸～ 💕 關於我 💕 我是緒山真尋，一個熱愛成人遊戲的家裡蹲廢柴尼特族。喜歡動畫、漫畫、輕小說和各種可愛的東西！最喜歡的顏色是粉色和淡藍色！ ∩∩ （･ω･） <- 這是我！ ＿|　⊃／(＿＿ ／ └-(＿＿＿／ 🎀 網站內容 🎀 🌟 精美動畫展示 📚 我的私房照 🎵 好聽的音樂 📷 日常生活的小片段 🌈 關於 🌈 🎭 演示: 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. 💌 特別感謝 💌 感謝所有喜歡緒山真尋的朋友們！(●’◡’●) ...

從最早的圖庫，到圖床，再到現在的相簿。我對圖片的執著已經可以說是跨越了好幾個世紀了。圖庫的圖片是存在七牛雲的，後來流量被刷就關閉了。圖床，現在轉為為部落格提供圖片上傳服務了。相簿，就是手機中相簿的概念，它既可以存圖片也可以放影片。逐漸是越來越完善了。 這兩天就把平常保存的影片圖片什麼的上傳到了伺服器，寫了個介面和介面，順帶開源出來。(我要做一個堅定的開源愛好者) 我的二次元相簿前端介面 這裡是阿珏醬的私人相簿，保存著阿珏在平常收集的圖片，和各大平台中點讚收藏的影片。 包括但不限於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 } ] 隨機介面 ...

論網速快慢的區別 隨著網路的普及，使用者對響應速度快慢越來越重視了，網站越快，使用者的黏性和轉化率也會越高。 簡單來說，就是要提高速度！影響網站速度的因素有很多，比如…………………. 一本正經可不是我的風格，下面請看我的表演 想法起源： 一開始的想法是使用純CSS進行實現，把底圖base64編碼後直接放在background-image上，就可以達到背景圖片與網頁一同載入出來的效果 第一步： 首先將提前準備好的素材圖片進行處理，拔下泳衣和泳裙 第二步： 新建個HTML檔案 第三步： 完成。。 然後就發現個問題，由於我的底圖檔案大小達到了12兆，編碼後的字串過大，導致網頁載入又卡又慢，實在無使用者體驗 而且這種方式載入的底圖會突然的顯示出來，過於唐突，效果不好 後改用： CSS+JavaScript進行實現，由background-image直接載入背景圖片，能達到逐漸顯示的效果，待底圖載入完畢後再由JS動態插入配圖 window.onload = function(){ var img=new Image(); img.src=‘裸体.jpg’; if(img.width==0){ alert(‘圖片載入失敗’) }else{ document.getElementById(“泳衣”).style.backgroundImage=“url(泳衣.png)”; document.getElementById(“泳裙”).style.backgroundImage=“url(泳裙.png)”; } } 不禁感慨一句，什麼破網路，慢得連人物圖片的衣服都載入不出來

幾天前閒來無事，然後就去找了一下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 隨機背景圖片淡入淡出切換特效 演示效果如本篇文章背景所示 看大家扒我的幻想領域二次元限定版扒得比較累，扒了大半個小時的，抽空整理一下發出來 設計之初本來是打算使用 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> 的數量是可以隨意更改的) ...

經常會在一些網站看到評論區，評論人的頭像當滑鼠經過會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); } ...

先上效果圖，先睹為快。(這絕對不是一張圖片。嗯這話怎麼怪怪的) 不要問我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秒後又再次熄滅螢幕 ...