比其他记录先来的竟是装修记录

但其实这件事的优先级不是最高。只是我突然有这想法了。

这是我博客之前的样子。有没有觉得右下角空空荡荡的？

之前其实有想过，要是我哪天乐意折腾自己，我就放个L2d模型上去。但是我这几天真看了L2d教程之后又觉得有点太折腾了。于是乎就决定退而求其次，平面立绘足矣。

如果有人好奇L2d教程。

其二

以上是放弃的第一个原因：有点折腾了

放弃的第二个原因：L2d约稿的价格很高。当然我可以约一个立绘然后自己手搓。但我一直都不确定这个博客我会运营到什么时候（虽然已经运营了很久）。但要是真的某一天我把它搁置了，那高价+折腾装修换来的L2d模型放在这也是真的可惜了。

第三个原因：对着gpt老师一顿狂问之后得知平面立绘也可以做一些简单的动画效果上去。那么显然放平面立绘是性价比更高的选择。

于是乎进入教程部分。

步骤：

1.打开米画师约稿。

2.打开：https://chatgpt.com/，问就完事了。

（……总感觉很值得吐槽啊）（博客白痴和画画白痴也能做博客放立绘。现代社会还是太美好了）

步骤2.详细记录一下。Gpt老师给了如下方案：

1.在static文件夹下新建images文件夹

然后约好的立绘：home-corner.png放进去。

然后在layouts/partials/footer/custom.html安排代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<style>
    .home-corner-image {
        position: fixed;
        right: 30px;
        bottom: 20px;
        width: 160px;
        height: auto;
        z-index: 999;
        pointer-events: none;
    }
</style>

<img
    class="home-corner-image"
    src="/images/home-corner.png"
    alt=""
>

就ok了。

Gpt老师这次在给本代码盲扫盲的时候引入了思维导图。不得不说看的还是很舒服一目了然的。以后上课如果能用上也要勤用思维导图。

开始愉快地修改css

要求给gpt，然后复制黏贴之。

这次装修从约稿到让Gpt写代码我都是纯享甲方体验。很舒服。如果能当一辈子甲方就好了。

想要的效果：上下浮动，鼠标过去的时候放大。

代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48


<style> 
    .home-corner-image { 
        position: fixed; 
        right: 30px; 
        bottom: 20px; 
        width: 160px; 
        height: auto; 
        z-index: 999; 
        pointer-events: auto;

        /* 轻微上下漂浮 */
        animation: home-corner-float 3.5s ease-in-out infinite;

        /* 悬停时平滑变化 */
        transition: transform 0.25s ease;
    }

    /* 鼠标移到角色上 */
    .home-corner-image:hover {
        transform: translateY(-5px) scale(1.1);
    }

    /* 漂浮动画 */
    @keyframes home-corner-float {
        0%, 100% {
            translate: 0 0;
        }

        50% {
            translate: 0 -8px;
        }
    }

    /* 手机端 */
    @media (max-width: 768px) {
        .home-corner-image {
            width: 110px;
            right: 10px;
            bottom: 10px;
        }
    }
</style> 
 
<img 
    class="home-corner-image" 
    src="/images/home-corner.png" 
    alt="" 
> 