The website uses APlayer+MetingJS to achieve music playback and refresh the page to keep the music playing progress

Recently, I have been tinkering with the website gebilaoli.com. I suddenly wanted to add a function of playing music online to him a few days ago. So I thought of APlayer. APlayer is a simple and beautiful HTML5 music player that supports multiple modes, including playlist mode and bottom suction mode. It is also very simple to use, just add relevant code in the page

skill • 7 months ago

Ttf conversion woff2 tool, woff2 ttf mutual conversion

Recently, the HarmonyOSSans font was embedded in the theme, but the volume of the Chinese font package was too large. A HarmonyOS_Sans_SC_Regular font reached 7.87M. So I thought of reducing the volume by converting the ttf format font to the woff2 format. woff...

share • 8 months ago

CSS uses font weigh to select different fonts according to their thickness

Seeing this title, someone's first reaction may be that font weigh controls the font thickness? Why choose a different font package? Because many fonts do not contain thickness levels, setting font weight is invalid! Let's take the following example to use the same font. The font weight is set to 600, 500, 40

skill • 8 months ago

Use CSS steps () animation to make my brother move, 🐔🍐🌞🍓

The css step function steps() is another function value of the animation timing function attribute, which can be transited in the form of a frame to form a freeze frame animation. Syntax: animation timing function: steps (number, [end | start]) The parameter says

skill • 9 months ago

Briefly describe the mask attribute of CSS

skill • 1 year ago

CSS adds shadow effect to transparent pictures

skill • 2 years ago

How to keep the footer at the bottom of the page more elegantly

A few months ago (as if yesterday), I wrote an article about how to keep the footer at the bottom of the page gracefully. Using flex layout, the footer is always at the bottom of the container. I used the grid layout when I was creating a page these days. It suddenly occurred to me that it seems easier to use the grid layout to implement sticky footers. What is a grid layout? A grid layout can transform

skill • 2 years ago

Differences between CSS pseudo classes and pseudo elements and commonly used pseudo classes and pseudo elements

Pseudoclass and pseudo element are frequently used in front-end development, but they are particularly easy to confuse. What are pseudo classes and pseudo elements? Pseudo class: starts with a colon (:) to select elements in a specific state. Pseudo element: starts with a double colon (::), which is used to insert a fictitious element in the document

skill • 2 years ago

How to keep the footer at the bottom of the page gracefully

Today, someone in Tuoyuan's ZBLOG group asked why the pure theme footer was not at the bottom. After looking at the screenshot, I found that the reason is that his articles are too few and there are not enough content parts, so some blank spaces will be left at the bottom of the page. The solution is to add a minimum height to the main part, such as section {min hei

skill • 2 years ago

Write a pure HTML5 fold menu with details

Details is an interesting and useless tag added in HTML5, because its compatibility is really poor. According to Baidu, details is only compatible with Chrome, Safari8+, and Opera 26+details tags, which are used to describe the details of a document or a part of a document. It is easier to understand a way: fold the menu example

skill • 2 years ago

Artifact UnCSS Online, one click to remove invalid styles in css

In the process of project development, the front-end design changes from time to time. At this time, new effects are often produced first. When the project is completed, there will be some abandoned CSS code. Or when picking up a station, sometimes I just want to pick up a small place. If I pick up the corresponding CSS bit by bit, it is also a lot of work. At this time, UnCSS Online will come into use. Open web address:

Source code • 5 years ago