CSS on 阿珏酱のBlog

我不会AE,但是我会Code

xxx@example.com (MoeJue) — Sat, 23 Aug 2025 12:29:01 +0000

我不会AE,但是我会Code

作者：MoeJue（xxx@example.com）

✨ 緒山まひろの小窝 ✨

🌸 欢迎来到緒山まひろの小窝 🌸

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

这里是緒山まひろ的个人网站，充满了可爱的动画和有趣的内容！我会在这里分享我喜欢的动画、漫画、游戏和一些日常生活中的小确幸~

💕 关于我 💕

我是緒山まひろ，エロゲを愛する引きこもりのダメニート。喜欢动画、漫画、轻小说和各种可爱的东西！最喜欢的颜色是粉色和淡蓝色！

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

🎀 网站内容 🎀

🌟 精美动画展示
📚 我的私房照
🎵 好听的音乐
📷 日常生活的小片段

🌈 关于 🌈

🎭 演示: 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.

💌 特别感谢 💌

感谢所有喜欢緒山まひろ的朋友们！(●’◡’●)

本文2025-08-23首发于阿珏酱のBlog，最后修改于2025-08-23

论网速快慢的区别

xxx@example.com (MoeJue) — Sat, 07 Nov 2020 14:09:07 +0000

论网速快慢的区别

作者：MoeJue（xxx@example.com）

论网速快慢的区别

随着网络的普及，用户对响应速度快慢越来越重视了，网站越快，用户的黏性和转化率也会越高。
简单来说，就是要提高速度！影响网站速度的因素有很多，比如………………….

一本正经可不是我的风格，下面请看我的表演
想法起源：

一开始的想法是使用纯css进行实现，把底图base64编码后直接放在background-image上，就可以达到背景图片于网页一同加载出来的效果

第一步：
首先将提前准备好的素材图片进行处理，拔下泳衣和泳裙

第二步：
新建个HTML文件

第三步：

完成。。
然后就发现个问题，由于我的底图文件大小达到了12兆，编码后的字符串过大，导致网页加载又卡又慢，实在无用户体验
而且这种方式加载的底图会突然的显示出来，过于唐突，效果不好

后改用：
css+JavaScript进行实现，由background-image直接加载背景图片，能达到逐渐显示的效果，待底图加载完毕后再由js动态插入配图

不禁感慨一句，什么破网络，慢的连人物图片的衣服都加载不出来

本文2020-11-07首发于阿珏酱のBlog，最后修改于2025-08-15

我的二次元相册又回来了

xxx@example.com (MoeJue) — Fri, 08 Nov 2024 09:52:39 +0000

我的二次元相册又回来了

作者：MoeJue（xxx@example.com）

从最早的图库,到图床,在到现在的相册.我对图片的执着已经可以说是跨越了好几个世纪了. 图库的图片是存在七牛云的,后来流量被刷就关闭了. 图床,现在转为为博客提供图片上传服务了. 相册,就是手机中相册的概念,它既可以存图片也可以放视频. 逐渐是越来越完善了

这两天就把平常保存的视频图片什么的上传到了服务器,写了个界面和接口,顺带开源出来.(我要做一个坚定的开源爱好者)

我的二次元相册前端界面

这里是阿珏酱的私人相册,保存着阿珏在平常收集的图片,和各大平台中点赞收藏的视频.
包括但不限于B站,YouTube,抖音,X,facebook,pixiv等平台的视频或图片,相关的数据信息版权归原作者所有.
数据将不定期手动更新,如果你想要某些图片或者视频,请直接联系阿珏酱获取.

预览

https://photo.moejue.cn

特性

支持图片和视频的展示
支持相册的展示
支持相册的密码保护
支持18+保护
支持搜索

Todo

优化特效展示
优化界面流畅度

安装说明

克隆仓库到本地：

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
        }
    ]
}
]

相册接口

本文2024-11-08首发于阿珏酱のBlog，最后修改于2024-12-04

discuz论坛个人空间自定义css样式

xxx@example.com (MoeJue) — Tue, 24 Mar 2020 13:23:51 +0000

discuz论坛个人空间自定义css样式

作者：MoeJue（xxx@example.com）

前几天闲来无事，然后就去找了一下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;}

本文2020-03-24首发于阿珏酱のBlog，最后修改于2020-03-24

CSS3随机背景图片切换特效

xxx@example.com (MoeJue) — Wed, 16 May 2018 11:58:08 +0000

CSS3随机背景图片切换特效

作者：MoeJue（xxx@example.com）

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) }

本文2018-05-16首发于阿珏酱のBlog，最后修改于2018-05-16

简单的css3头像旋转与3D旋转效果

xxx@example.com (MoeJue) — Mon, 10 Jul 2017 07:45:23 +0000

简单的css3头像旋转与3D旋转效果

作者：MoeJue（xxx@example.com）

经常会在一些网站看到评论区，评论人的头像当鼠标经过会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部分(很简单，就一张图片)

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

CSS代码

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

本文2017-07-10首发于阿珏酱のBlog，最后修改于2017-07-10

用CSS3绘制iPhone手机

xxx@example.com (MoeJue) — Mon, 03 Jul 2017 06:09:01 +0000

用CSS3绘制iPhone手机

作者：MoeJue（xxx@example.com）

先上效果图，先睹为快。(这绝对不是一张图片。恩~~这话怎么怪怪的~~)

不要问我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部分

晚些我又加了点玩意上去

本文2017-07-03首发于阿珏酱のBlog，最后修改于2017-07-03