粥粥个人播客

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

先看效果 点击右侧编辑激活左侧input,点击右侧完成保存输入框内容 .s-box { background: #fff; border: 1px solid #ddd; border-radius: 12px; pa...

纯CSS实现循环翻牌效果

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

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

如何使用 将下面这个蓝色方块拖拽至收藏夹栏再松开鼠标，浏览器会自动创建一个书签。 .waifu{ margin: auto; background:#99e6ff; display: block; width: 160px; height: 40px;...

纯CSS实现评分组件

先看效果 以下是一个纯靠css实现的评分组件，点击星星即可评分，不同的评分将会展示不同的颜色。 .cont{ position: relative;...

纯CSS实现选项选择效果

先看效果 你可以通过点击来切换不同的选项，而这个样例没有使用js而是完全使用css实现的。 选项1 选项2 选项3 选项4 .cont{ display: flex;...

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

有些时候我们需要制作宽度随输入的文字变化的输入组件，例如下面这个tag输入框： 我的内容是可以编辑的 1 2 3 4 5 6 7 8 9 10 11 <...

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

有时候我们会遇到这种情况，容器内部由元素撑开无法知道其高度，又需要实现平滑过渡。就像这样： 把鼠标摸我头上试试 我是内容 我是内容 我是内容 我是内容 .cont{ disp...

HUGO，评论！

前言：本文继续上文，讲一讲如何为你的博客添加评论系统。 阅读之前的文章 部署waline 这部分waline官网有详细介绍，我们只需要做到 Vercel 部署 (服务端) 这一步即可。有购买域名的小伙伴可以往下再做一...

HUGO，域名！

前言：本文继续上文，讲一讲如何购买一个域名，然后将咱的网页绑定在其上。 阅读之前的文章 购买域名 查询域名 在购买域名之前，第一步应该是查询想购买的域名是否还在。就像你没法购买baidu.com，因为这...

HUGO，启动！

前言：本文章将光速教会你如何启动一个hugo项目，并且将其免费托管至gitlab pages以供所有人访问，就像你现在看到的这个网站一样。 准备账号 目前你需要准备的非常简单，只需要一个gitlab账号，没有的话...

你好，世界！

第一篇帖子，堂堂发布。

归档