HTML on MoeJueのブログ

Build macOS-style web apps

Sun, 11 May 2025 11:46:03 +0000

Project Overview

In today’s world of web development, user experience and interface design are becoming increasingly important.

Mac Web Vue Template This is a modern and elegant Vue.js Web template inspired by macOS design. It is a modern web application template based on Vue.js. Its design is inspired by the elegant interface of macOS. This project not only provides beautiful UI design, but also includes complete project structure and best practices.

My 2D photo album is back

Fri, 08 Nov 2024 09:52:39 +0000

From the earliest [Gallery] (https://moejue.cn/archives/10) , to [Picture Bed] (https://moejue.cn/archives/61) , to the current photo album. My persistence in pictures can be said to have spanned several centuries. The pictures in the gallery were stored in Qiniuyun, but later the traffic was blocked and closed. The Picture Bed is now providing image upload services for blogs. Photo album is the concept of a photo album in a mobile phone. It can store both pictures and videos. Gradually it is becoming more and more perfect.

On the difference between fast and slow Internet speeds

Sat, 07 Nov 2020 14:09:07 +0000

On the difference between fast and slow Internet speeds

With the popularity of the Internet, users pay more and more attention to the speed of response. The faster the website, the higher the user stickiness and conversion rate.
To put it simply, it means increasing the speed! There are many factors that affect website speed, such as………………….

Being serious is not my style, please watch my performance below Origin of the idea:

The initial idea was to use pure CSS to implement it. Base64-encode the base image and place it directly on the background-image, so that the background image can be loaded together with the web page.

The owner is back with a new version of the triple.

Sun, 04 Aug 2019 01:42:18 +0000

Since the 5.20 confession, the owner has been missing …….

I don’t know how many months have passed, but the 3 in 1 is updated again. I set a flag in the group two months ago, and today I fulfill it, don’t ask me what I did in the middle two months -. - Don’t ask me what I was doing in the middle two months.

How to submit a form gracefully

Mon, 06 May 2019 07:28:33 +0000

This is a very basic HTML form submission question, but it is a very practical technique My business scenario is like this: A form that can dynamically create input, as shown below

This means that the name of the input cannot be fixed, otherwise it will definitely be overwritten.

The first one is the traditional ordinary submission method, giving each input to be submitted a unique name.

Query sql for some common functions

Wed, 10 Apr 2019 09:33:11 +0000

1. Scenario: Query a player’s ranking and how many votes away from the previous one Method 2 (remove reordering and query the number less than yourself)

$temp = DB::fetch_first(“SELECT distinct total+jewel_vote+forge_vote ,COUNT(*)+1 AS RANK FROM " . DB::table(‘vote_competition’) .” WHERE total+jewel_vote+forge_vote>" . $competition[‘all’] . " and aid={$aid} ORDER by forge_vote desc"); $rank = $temp[‘RANK’]; Unable to directly query the votes of the previous contestant if ($temp[’total+jewel_vote+forge_vote’]) { //What is queried here is the number of votes different from the first contestant. $up = $temp[’total+jewel_vote+forge_vote’]-$competition[‘all’]; }

Mengyin Film and Television – Online film and television application

Tue, 25 Sep 2018 07:41:02 +0000

Blog | Demo Site | QQ group | GitHub

CSS3 Random Background Image Switching Effect

Wed, 16 May 2018 11:58:08 +0000

css3 random background image fade switching effects demo effect as shown in the background of this article See you pick my fantasy field of secondary limited edition pick more tired, pick a half an hour, take the time to organize and send it out! design was originally intended to use jQuery to achieve, but noticed the css3 @keyframes rule, css3 has been so powerful that once only js can achieve the effect!

Randomized Secondary Image API 2nd

Sun, 04 Mar 2018 11:01:46 +0000

After a gap of 2 days and three months, it’s been a long time since the first randomized secondary image API was released. The second bullet api, out of the blue

Update Notes:

Compared to the last version, this time the images are more suitable for background images, desktop wallpapers, etc. The last version was a hodgepodge of images, all kinds of images, miserable (I don’t even use them myself). In this version, I spent some time to select some pictures (1080P+) and upload them to Sina Cloud. Support https in the real sense, the pictures are all hosted on Sina cloud, the speed is also improved. Remove all kinds of meaningful parameter settings The content of the images are all anime and secondary yuan images (all ages (laughs))

HTML5 Canvas - Ball Collision

Tue, 18 Jul 2017 09:17:31 +0000

html5 is the fifth major revision of Hypertext Markup Language (HTML), an application under the Standard Generalized Markup Language, the core language of the World Wide Web. HTML 4.01 has changed a lot since 1999, and today, several of the elements that were deprecated in HTML 4.01 have been removed or redefined in HTML5. In order to better handle today’s Internet applications, HTML5 adds many new elements and features, such as: graphics drawing, multimedia content, better page structure, better form handling, and several api drag-and-drop elements, positioning, including web application caching, storage, web workers, and more.

Simple css3 avatar rotation and 3D rotation effect

Mon, 10 Jul 2017 07:45:23 +0000

You often see comment sections on some websites, where the commenter’s avatar will rotate 360° when the mouse passes over it.

Let’s take a look at the effect first

.tximg{ height:300px; border-radius:50%; border:2px solid green; /*Change rules*/ transition:all 2s; } .tximg:hover{ /* Change action defines 2d rotation, parameter fills in angle */ transform:rotate(360deg); }

css part

img{ height:300px; border-radius:50%; border:2px solid green; /*Change rules*/ transition:all 2s; }

Draw iPhone with CSS3

Mon, 03 Jul 2017 06:09:01 +0000

Let’s take a sneak peek at the renderings first. (This is definitely not a picture. Well~ why are these words so weird~)

Don’t ask me how much my iPhone is, because I don’t know, I haven’t used it, so you know.

css style part

#phone{ width:250px; height:500px; background-color:#2E2E2E; border:10px solid #3B3B3B; margin:100px auto; border-radius:30px;/*Set the rounded border of the div element*/ }

#camera{ width:8px; height:8px; background-color:#1A1A1A; border-radius:50%; border:2px solid #505050; margin:10px auto;/*10px from top margin, left and right center*/ }