粥粥个人博客

删除具有大量部署的cloudflare pages项目

Fri, 02 Jan 2026 00:00:00 +0000

文章在个人网站中发布，原文链接：删除具有大量部署的cloudflare pages项目

部署量不是很大

如果你的部署量也就是一两百，可以尝试手动删除旧的部署，删除到部署数量小于一百一般就能删除了。

记录一个纯CSS实现滚动驱动动画的效果

Sun, 14 Sep 2025 00:00:00 +0000

文章在个人网站中发布，原文链接：记录一个纯CSS实现滚动驱动动画的效果

先看一下这个简单的案例

代码：

你也可以直接划到下边看效果。

<div class="out-cont">
    <!-- 最外层元素，用于框定元素需要固定的距离 -->
    <div class="inner-cont">
        <!-- 内层元素，用于固定元素的位置 -->
        <div class="animation-item">
            <!-- 播放动画的元素内容 -->
        </div>
    </div>
</div>
<style>
.out-cont {
/* 最外层元素，用于框定元素需要固定的距离，这里表示元素将被固定两个屏幕的高度 */
    width: 100%;
    height: 200vh;
    position: relative;
}
.inner-cont {
/* 内层元素，用于固定元素的位置，使用sticky使元素在范围内固定 */
    width: 100%;
    height: 50vh;
    position: sticky;
    top: 25vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.animation-item{
/* 播放动画的元素内容，使用animation-timeline实现滚动驱动动画 */
    width: 20%;
    aspect-ratio: 1;
    background-color: #2E74B5;
    animation: move 1s linear forwards;
    animation-timeline: view();
    animation-range: contain;
}
@keyframes move {
    0% {
        transform: rotate(0deg);
        border-radius: 8%;
    }
    50% {
        transform: rotate(360deg);
        border-radius: 50%;
    }
    100% {
        border-radius: 8%;
        transform: rotate(720deg);
    }
}
</style>

效果：

.out-cont

.inner-cont

视口

sticky：粘性布局

对于前端码农来说这个玩意并不陌生，所以就只简单介绍一下：
position:sticky是介于position:relative与position:fixed之间的一种布局方式。当父元素出现在屏幕中时它表现得像fixed，会把自己固定在屏幕上。当父元素出现在屏幕外时它表现得像relative，会按照正常的文档流进行布局，被父容器带走。
关于这个案例是如何使用sticky实现类似元素固定的效果的，上面效果示例右边有一个简单的展示，可以帮助理解。而且这个展示也是纯css的哦。

在vue中contenteditable元素的双向数据绑定

Tue, 26 Aug 2025 00:00:00 +0000

文章在个人网站中发布，原文链接：在vue中contenteditable元素的双向数据绑定

记录一下在vue中使用contenteditable属性所需要注意的地方。

如何向页面中嵌入UnityWeb3D

Fri, 18 Apr 2025 00:00:00 +0000

文章在个人网站中发布，原文链接：如何向页面中嵌入UnityWeb3D

随着现在设备性能的提升，向网站中插入3D模型已经不是啥稀奇事情了。而且插入3D元素能极高地提高用户体验，再加上一些用户交互就能给人非常惊艳的体验。
目前比较流行的Web3D技术有three.js、还有可视化编辑模型与交互的spline，不过three.js的学习难度和spline的高昂价格已经足够让一部分人望而却步了。
那有没有更经济和简单的技术呢？有的有的，兄弟有的，UnityWeb3D也许就是一个不错的选择。

自己写一个小小vue - getter与setter

Thu, 13 Mar 2025 00:00:00 +0000

文章在个人网站中发布，原文链接：自己写一个小小vue - getter与setter

我相信各位前端大佬和小佬们都听过这句话：

vue2使用getter与setter来控制数据，vue3则直接使用proxy。

纯css实现跑马灯效果

Thu, 20 Feb 2025 00:00:00 +0000

文章在个人网站中发布，原文链接：纯css实现跑马灯效果

先看效果

我是练习市场两年半的个人实习生，喜欢html、css、js。我是练习市场两年半的个人实习生，喜欢html、css、js。

`<marquee>`标签

这时候一些前端大佬就会站起来说了，这不就是一个<marquee>标签的事吗？
不过这个元素目前已经被废弃了，虽然还能继续使用，但保不齐哪天就被主流浏览器移除了。我们还是少用为妙

记一次将博客网站迁移

Tue, 04 Feb 2025 00:00:00 +0000

文章在个人网站中发布，原文链接：记一次将博客网站迁移

起因

因为某一天在gitlab上号时发现被下发了60天死亡通知，账号会在两个月后被删除，所以网站搬家就被提上了日程。
当然氪金是不可能氪金的，于是把主意打到了赛博活佛cloudflare身上。

纯css实现环形进度条

Sun, 15 Dec 2024 00:00:00 +0000

文章在个人网站中发布，原文链接：纯css实现环形进度条

先看效果

这个环形进度条使用纯css制作，使用css变量控制进度，你可以打开开发者工具选中它改变它内联的css变量--progress: 60，进度和内容均会发生变化。

纯CSS实现一个炫酷的输入框效果

Tue, 22 Oct 2024 00:00:00 +0000

文章在个人网站中发布，原文链接：纯CSS实现一个炫酷的输入框效果

先看效果

username

`:valid`与`:invalid`伪类

这两个伪类可以用于input元素和select元素，用于选中校验通过和未校验通过的输入框。我们通过下边这个简单的小案例了解一下它们：
这个输入框会校验输入是否是个电子邮箱地址，否则背景颜色将红色警告。

巧用属性选择器纯CSS实现筛选器

Fri, 18 Oct 2024 00:00:00 +0000

文章在个人网站中发布，原文链接：巧用属性选择器纯CSS实现筛选器

先看看这个样例的效果

所有黄色红色绿色紫色

🍉

🍊

🍈

🍇

🥝

🍋

‍🍌

🍍

🥭

🍎

🍏

🍐

🍑

🍒

🍓

🫐

‍🍅

🫒

`:has()`伪类与属性选择器

我们通过下边这个小案例来了解一下这俩选择器

我的简历编辑器上线了

Mon, 07 Oct 2024 00:00:00 +0000

文章在个人网站中发布，原文链接：我的简历编辑器上线了

立即进入

纯CSS实现输入框的编辑和保存按钮

Sun, 29 Sep 2024 00:00:00 +0000

文章在个人网站中发布，原文链接：纯CSS实现输入框的编辑和保存按钮

先看效果

点击右侧编辑激活左侧input,点击右侧完成保存输入框内容

pointer-events

我们都知道可以通过<input disabled="true"/>中disabled属性来使输入框不可编辑，但是它作为元素属性需要使用js来修改。那我们纯css环境如何实现呢？答案是使用pointer-events属性，它用来定义元素如何响应用户的点击。例如下边这两个例子：

纯CSS实现循环翻牌效果

Fri, 27 Sep 2024 00:00:00 +0000

文章在个人网站中发布，原文链接：纯CSS实现循环翻牌效果

先看效果

点击卡片就能切换一张，并且整个实现过程并没有用到js。这个样例中除了两张卡片外其实还有两个透明的input，你点击到的其实是这俩input，而且这俩input会在点击后修改自身的z-index属性，保证你下次点击必定会点击到另外一个。

随时随地，一键召唤看板娘。

Fri, 27 Sep 2024 00:00:00 +0000

文章在个人网站中发布，原文链接：随时随地，一键召唤看板娘。

如何使用

将下面这个蓝色方块拖拽至收藏夹栏再松开鼠标，浏览器会自动创建一个书签。

纯CSS实现评分组件

Wed, 25 Sep 2024 00:00:00 +0000

文章在个人网站中发布，原文链接：纯CSS实现评分组件

先看效果

以下是一个纯靠css实现的评分组件，点击星星即可评分，不同的评分将会展示不同的颜色。

纯CSS实现选项选择效果

Wed, 25 Sep 2024 00:00:00 +0000

文章在个人网站中发布，原文链接：纯CSS实现选项选择效果

先看效果

你可以通过点击来切换不同的选项，而这个样例没有使用js而是完全使用css实现的。

如何实现一个宽度随文字变化的输入框

Tue, 24 Sep 2024 00:00:00 +0000

文章在个人网站中发布，原文链接：如何实现一个宽度随文字变化的输入框

有些时候我们需要制作宽度随输入的文字变化的输入组件，例如下面这个tag输入框：

为不确定高度的元素添加过渡动画

Tue, 24 Sep 2024 00:00:00 +0000

文章在个人网站中发布，原文链接：为不确定高度的元素添加过渡动画

有时候我们会遇到这种情况，容器内部由元素撑开无法知道其高度，又需要实现平滑过渡。就像这样：

HUGO，评论！

Thu, 19 Sep 2024 00:00:00 +0000

文章在个人网站中发布，原文链接：HUGO，评论！

前言：本文继续上文，讲一讲如何为你的博客添加评论系统。阅读之前的文章

部署waline

这部分waline官网有详细介绍，我们只需要做到 Vercel 部署 (服务端) 这一步即可。有购买域名的小伙伴可以往下再做一步。完成部署后就能回到本文继续配置啦。点击前往waline教程

HUGO，域名！

Tue, 17 Sep 2024 00:00:00 +0000

文章在个人网站中发布，原文链接：HUGO，域名！

前言：本文继续上文，讲一讲如何购买一个域名，然后将咱的网页绑定在其上。阅读之前的文章

HUGO，启动！

Sat, 14 Sep 2024 00:00:00 +0000

文章在个人网站中发布，原文链接：HUGO，启动！

前言：本文章将光速教会你如何启动一个hugo项目，并且将其免费托管至gitlab pages以供所有人访问，就像你现在看到的这个网站一样。

归档

Sun, 06 Mar 2022 00:00:00 +0000

搜索

Mon, 01 Jan 0001 00:00:00 +0000

友链

Mon, 01 Jan 0001 00:00:00 +0000

粥粥个人博客

删除具有大量部署的cloudflare pages项目

部署量不是很大

记录一个纯CSS实现滚动驱动动画的效果

先看一下这个简单的案例

代码：

效果：

sticky：粘性布局

在vue中contenteditable元素的双向数据绑定

如何向页面中嵌入UnityWeb3D

自己写一个小小vue - getter与setter

纯css实现跑马灯效果

先看效果

<marquee>标签

记一次将博客网站迁移

起因

纯css实现环形进度条

先看效果

纯CSS实现一个炫酷的输入框效果

先看效果

:valid与:invalid伪类

巧用属性选择器纯CSS实现筛选器

先看看这个样例的效果

:has()伪类与属性选择器

我的简历编辑器上线了

纯CSS实现输入框的编辑和保存按钮

先看效果

pointer-events

纯CSS实现循环翻牌效果

先看效果

随时随地，一键召唤看板娘。

如何使用

纯CSS实现评分组件

先看效果

纯CSS实现选项选择效果

先看效果

如何实现一个宽度随文字变化的输入框

为不确定高度的元素添加过渡动画

HUGO，评论！

部署waline

HUGO，域名！

HUGO，启动！

归档

搜索

友链

`<marquee>`标签

`:valid`与`:invalid`伪类

`:has()`伪类与属性选择器