CSS on Zhou's blog

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.

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

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

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.

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:

CSS on Zhou's blog

A CSS-Only Scroll-Driven Animation Effect

First, let’s look at this simple example

Code:

Effect:

sticky: Sticky Layout

Pure CSS to achieve the marquee effect

See the effect first

<marquee> tag

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

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

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

`<marquee>` tag

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

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