Zhou's blog

Nuxt Learning Journey 1

Mon, 06 Apr 2026 00:00:00 +0000

This article is published on my personal website. Original link: Nuxt Learning Journey 1

Introduction

In the era of AI, being a simple “UI slicer” or having only basic knowledge of frontend engineering is no longer a high-value skill. To avoid being left behind by the rapidly advancing wheels of technology, I’ve decided to learn full-stack development while I’m still young. Since there are relatively few comprehensive Nuxt tutorials in Chinese, I’ve started this series to document my learning and help others avoid common pitfalls.

Deleting Cloudflare Pages projects with many deployments

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

This article was originally published on my personal website: Deleting Cloudflare Pages projects with many deployments

Small number of deployments

If your deployment count is only one or two hundred, you can try manually deleting old deployments. Delete until the deployment count is less than one hundred, and then you should be able to delete the project.

Large number of deployments

You need to use Cloudflare’s API to delete deployments, and you need to install Cloudflare CLI to perform this operation.
This part has been covered by others in tutorials, so I won’t repeat it here. You can refer to this article.

A CSS-Only Scroll-Driven Animation Effect

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

This article is published on my personal website, original link: A CSS-Only Scroll-Driven Animation Effect

First, let’s look at this simple example

Code:

You can also scroll down to see the effect directly.

<div class="out-cont">
    <!-- The outermost element, used to define the fixed distance of the element -->
    <div class="inner-cont">
        <!-- Inner element, used to fix the position of the element -->
        <div class="animation-item">
            <!-- The content of the element that plays the animation -->
        </div>
    </div>
</div>
<style>
.out-cont {
/* The outermost element, used to define the fixed distance of the element, which means the element will be fixed for two screen heights */
    width: 100%;
    height: 200vh;
    position: relative;
}
.inner-cont {
/* Inner element, used to fix the position of the element, using sticky to fix the element within the range */
    width: 100%;
    height: 50vh;
    position: sticky;
    top: 25vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.animation-item{
/* The content of the element that plays the animation, using animation-timeline to achieve scroll-driven animation */
    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>

Effect:

.out-cont

.inner-cont

Viewport

sticky: Sticky Layout

For front-end developers, this is not unfamiliar, so I’ll just briefly introduce it: position: sticky is a layout method between position:relative and position:fixed. When the parent element appears on the screen, it behaves like fixed, fixing itself on the screen. When the parent element goes out of the screen, it behaves like relative, following the normal document flow layout, being taken away by the parent container. Regarding how this case uses sticky to achieve similar element fixing effects, there is a simple demonstration on the right side of the effect example above, which can help with understanding. And this demonstration is also pure CSS.

Two-way data binding of contenteditable elements in Vue

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

This article is published on my personal website, original link: Two-way data binding of contenteditable elements in Vue

A record of what to pay attention to when using the contenteditable attribute in Vue.

contenteditable

Usage

Adding contenteditable=“true” attribute to any element can make the element editable. It can achieve richer editing control layout than ordinary input and textarea. For example, an editor that can embed tags like this:

How to embed UnityWeb3D into a page

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

Original article: How to embed UnityWeb3D into a page

With the improvement of equipment performance now, it is no longer a rare thing to insert 3D models into the website. Moreover, inserting 3D elements can greatly improve the user experience, and some user interactions can give people a very amazing experience. Currently, the most popular Web3D technologies include three.js, visual editing models and interactive splines, but the difficulty of learning three.js and the high price of spline are enough to discourage some people. So are there more economical and simpler technologies? Some are some, some are some, and UnityWeb3D may be a good choice.

Write a Tiny Vue - Getter and Setter

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

Original article: Write a Tiny Vue - Getter and Setter

I believe that all the front-end experts and novices have heard this statement:

Vue 2 uses getters and setters to control data, while Vue 3 directly uses proxy.

Surely, there are many people like me who just want to enjoy using Vue without caring about getters or proxies. However, these things are very practical in actual development and can achieve some very elegant encapsulations. But first, let’s get to know these two things.

Pure CSS to achieve the marquee effect

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

Original article: Pure CSS to achieve the marquee effect

See the effect first

I am a personal intern who has been practicing marketing for two and a half years. I like html, css, and js. I am a personal intern who has been practicing marketing for two and a half years. I like html, css, and js.

`<marquee>` tag

At this time, some front-end bosses will stand up and say, isn’t this just a matter of <marquee> tag? However, this element has been abandoned. Although it can still be used, it may be removed by mainstream browsers one day. It is better to use it less

Recording a blog site migration

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

Original article: Recording a blog site migration

Cause

Because one day when I logged into gitlab, I found that I was issued a 60-day death notice, and the account would be deleted in two months, so the site relocation was put on the agenda. Of course, it is impossible to krypton gold, so I set my sights on the cyber living Buddha cloudflare.

Steps

Transfer warehouse

Gitlab wants to delete my warehouse, so the first priority is of course to transfer the warehouse first, and I am transferring it to github here. The process is very simple. Select Import Repository and fill in the original repository address and account password.

Pure CSS to implement circular progress bar

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

Original article: Pure CSS to implement circular progress bar

See the effect first

This circular progress bar is made with pure CSS and uses CSS variables to control the progress. You can open the developer tool, select it and change its inline CSS variable --progress: 60, and both the progress and content will change.

CSS variables

CSS variables are a new feature introduced in CSS3, which allows you to define a variable. You can define a CSS variable through --variable name and use it through var(--variable name). The following small demo shows how to use CSS variables. You can open the developer tools and play with it.

Pure CSS to achieve a cool input box effect

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

Original article: Pure CSS to achieve a cool input box effect

See the effect first

username

`:valid` and `:invalid` pseudo-classes

These two pseudo-classes can be used on input and select elements to select input boxes that have passed or failed validation. Let’s learn about them through the following simple example: This input box will check whether the input is an email address, otherwise the background color will be red warning.

Cleverly use attribute selectors to implement filters in pure CSS

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

Original article: Cleverly use attribute selectors to implement filters in pure CSS

Take a look at the effect of this example first

All Yellow Red green Purple

🍉

🍊

🍈

🍇

🥝

🍋

‍🍌

🍍

🥭

🍎

🍏

🍐

🍑

🍒

🍓

🫐

‍🍅

🫒

`:has()` pseudo-class and attribute selector

Let’s learn about these two selectors through the following small example

My resume editor is online

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

Original article: My resume editor is online

Drag and drop layout, with two sets of simple and beautiful themes. You can export the resume as an image or call the print function. Free to use, no login required. Welcome to use it.

Enter now

Pure CSS to implement the edit and save buttons of the input box

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

Original article: Pure CSS to implement the edit and save buttons of the input box

See the effect first

Click the Edit on the right to activate the input on the left, and click the Finish on the right to save the input box content

pointer-events

We all know that the disabled attribute in <input disabled="true"/> can be used to make the input box uneditable, but as an element attribute, it needs to be modified using js. So how do we achieve this in a pure CSS environment? The answer is to use the pointer-events attribute, which is used to define how an element responds to user clicks. For example, the following two examples:

Pure CSS to achieve the effect of circular flipping

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

Original article: Pure CSS to achieve the effect of circular flipping

See the effect first

Click on the card to switch one, and the entire implementation process does not use js. In addition to the two cards, this sample actually has two transparent inputs. You actually click on these two inputs, and these two inputs will modify their own z-index properties after clicking, ensuring that you will definitely click on another one next time you click.

Summon the poster girl anytime, anywhere with one click.

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

Original link: https://blog.zhoujump.com/en/p/creat-waifu/

How to use

Drag the blue square below to the favorites bar and release the mouse, the browser will automatically create a bookmark.

Pure CSS Rating Component

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

Original article: Pure CSS Rating Component

See the effect first

The following is a rating component implemented purely by CSS. Click on the star to rate. Different ratings will display different colors.

★ ★ ★ ★ ★

This component is an upgraded version of the article Realize option selection effect without using js. Some prerequisite knowledge is mentioned in it. Students who are interested can read this article first.

Pure CSS to achieve option selection effect

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

Original article: Pure CSS to achieve option selection effect

See the effect first

You can switch different options by clicking, and this example does not use js but is completely implemented with css.

Option 1 Option 2 Option 3 Option 4

:checked pseudo-class selector

The core of this effect is the :checked pseudo-class selector. This selector can match the element clicked by the user, which means that we can set the style for the element selected by the user separately.

Add transition animation for elements with uncertain height

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

Original article: Add transition animation for elements with uncertain height

Sometimes we encounter this situation where the container is stretched by elements and its height cannot be known, but a smooth transition is required. Like this:

Try touching my head with your mouse

I am the content
I am the content
I am the content
I am the content

I believe that CSS beginners have tried this:

How to implement an input box whose width changes with the text

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

Original article: How to implement an input box whose width changes with the text

Sometimes we need to make an input component whose width changes with the input text, such as the tag input box below:

My content is editable

<div
    style="height: 30px;
    background:#99e6ff;
    color:#006080;
    padding:0 8px;
    border-radius:5px;
    display:inline-block;
    line-height:30px;
    outline: none;
    margin-bottom: 16px;"
contenteditable="true">My content is editable</div>

At this time, regular input seems a bit difficult because the width of input is fixed.

HUGO, Comment!

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

Original article: How to add comments to Hugo blog

Foreword: This article continues the previous article and talks about how to add a comment system to your blog. Read the previous article

Deploy waline

This part is introduced in detail on the waline official website. We only need to do Vercel deployment (server). Friends who have purchased domain names can do one more step. After completing the deployment, you can return to this article to continue configuration. Click to go to waline tutorial

HUGO, domain name!

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

Original article: HUGO, domain name!

Foreword: This article continues the previous article and talks about how to buy a domain name and then bind our web page to it. Read previous articles

Buy a domain name

Check the domain name

Before buying a domain name, the first step should be to check whether the domain name you want to buy is still available. Just like you can’t buy baidu.com, because this domain name currently belongs to Baidu, you can only buy those domain names that have not been registered (of course, there is nothing that money can’t do).

HUGO, start!

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

Original article: HUGO, start!

Foreword: This article will teach you how to start a hugo project at the speed of light, and host it for free on gitlab pages for everyone to access, just like the website you are seeing now.

Prepare an account

At present, what you need to prepare is very simple, just a gitlab account, if you don’t have one, you can click here to register one.

Friends Links

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

Search

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

Zhou's blog

Nuxt Learning Journey 1

Introduction

Deleting Cloudflare Pages projects with many deployments

Small number of deployments

Large number of deployments

A CSS-Only Scroll-Driven Animation Effect

First, let’s look at this simple example

Code:

Effect:

sticky: Sticky Layout

Two-way data binding of contenteditable elements in Vue

contenteditable

Usage

How to embed UnityWeb3D into a page

Write a Tiny Vue - Getter and Setter

Pure CSS to achieve the marquee effect

See the effect first

<marquee> tag

Recording a blog site migration

Cause

Steps

Transfer warehouse

Pure CSS to implement circular progress bar

See the effect first

CSS variables

Pure CSS to achieve a cool input box effect

See the effect first

:valid and :invalid pseudo-classes

Cleverly use attribute selectors to implement filters in pure CSS

Take a look at the effect of this example first

:has() pseudo-class and attribute selector

My resume editor is online

Pure CSS to implement the edit and save buttons of the input box

See the effect first

pointer-events

Pure CSS to achieve the effect of circular flipping

See the effect first

Summon the poster girl anytime, anywhere with one click.

How to use

Pure CSS Rating Component

See the effect first

Pure CSS to achieve option selection effect

See the effect first

:checked pseudo-class selector

Add transition animation for elements with uncertain height

How to implement an input box whose width changes with the text

HUGO, Comment!

Deploy waline

HUGO, domain name!

Buy a domain name

Check the domain name

HUGO, start!

Prepare an account

Archive

Friends Links

Search

`<marquee>` tag

`:valid` and `:invalid` pseudo-classes

`:has()` pseudo-class and attribute selector