HTML on Zhou's blog

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.

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.

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.