How to dynamically draw a smiley face using HTML5+CSS3
Aug 31, 2021 am 11:34 AM
In the previous article, we introduced the method of using HTML5 CSS3 to dynamically draw an elephant. If you are interested, you can click on the link to read → "HTML5 CSS3 to dynamically draw an elephant". This time we continue to talk about using HTML5 CSS3 to achieve animation effects and introduce how to dynamically draw a smiley face.
The main content of today’s article is: use HTML5 svg to draw a line smiley face, and then use CSS3 to add animation effects to it so that it can be drawn slowly. Just saying that you may not understand what the effect is, let’s take a look at the rendering directly:
Let’s study how to achieve this effect:
First set the background color of the entire page, the size of the svg canvas, and the color of the lines.
body {
background: #222;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
margin: 0;
}
svg {
display: block;
height: 90vmin;
width: 90vmin;
}
.stroke {
stroke-width: 1;
stroke: #fff;
fill: none;
}Then use svg to draw a line smiley face
Define the svg tag and nest an independent svg fragment in the current document
<svg viewBox="-50 -50 100 100"> </svg>
Define a path tag and draw a circle
<svg viewBox="-50 -50 100 100"> <path class="stroke" d="M-40 0 a 40 40 0 0 1 80 0 a 40 40 0 0 1 -80 0"></path> </svg>
Use the path tag to draw the eye on the left
<svg viewBox="-50 -50 100 100"> <path class="stroke" d="M-40 0 a 40 40 0 0 1 80 0 a 40 40 0 0 1 -80 0"></path> <path class="stroke" d="M-20 -20 a 5 5 0 0 1 10 0 a 5 5 0 0 1 -10 0"></path> </svg>
Draw out the right eye as well
<svg viewBox="-50 -50 100 100"> <path class="stroke" d="M-40 0 a 40 40 0 0 1 80 0 a 40 40 0 0 1 -80 0"></path> <path class="stroke" d="M-20 -20 a 5 5 0 0 1 10 0 a 5 5 0 0 1 -10 0"></path> <path class="stroke" d="M10 -20 a 5 5 0 0 1 10 0 a 5 5 0 0 1 -10 0"></path> </svg>
- ##Draw the mouth
<svg viewBox="-50 -50 100 100"> <path class="stroke" d="M-40 0 a 40 40 0 0 1 80 0 a 40 40 0 0 1 -80 0"></path> <path class="stroke" d="M-20 -20 a 5 5 0 0 1 10 0 a 5 5 0 0 1 -10 0"></path> <path class="stroke" d="M10 -20 a 5 5 0 0 1 10 0 a 5 5 0 0 1 -10 0"></path> <path class="stroke" d="M30 0 a 30 30 0 1 1 -60 0"></path> </svg>
.stroke {
stroke-linecap: round;
}
Finally realize the animation effect:
Bind an animation to the .stroke element, and then set the stroke-dasharray and stroke-dashoffset properties so that the smiley face pattern will be hidden first.stroke {
animation: stroke-anim 2s linear forwards;
stroke-dasharray: 300;
stroke-dashoffset: 300;
}Use the @keyframes rule to set the action for the animation and set the value of the stroke-dashoffsets attribute to 0 so that the smiley face pattern can slowly appear @keyframes stroke-anim {
to {
stroke-dashoffset: 0;
}
}
.stroke:nth-child(2) {
animation-delay: 2s;
}
.stroke:nth-child(3) {
animation-delay: 3s;
}
.stroke:nth-child(4) {
animation-delay: 4s;
}
@keyframes stroke-anim {
to {
stroke-dashoffset: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background: #222;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
margin: 0;
}
svg {
display: block;
height: 90vmin;
width: 90vmin;
}
.stroke {
stroke-width: 1;
stroke: #fff;
fill: none;
stroke-linecap: round;
animation: stroke-anim 2s linear forwards;
stroke-dasharray: 300;
stroke-dashoffset: 300;
}
.stroke:nth-child(2) {
animation-delay: 2s;
}
.stroke:nth-child(3) {
animation-delay: 3s;
}
.stroke:nth-child(4) {
animation-delay: 4s;
}
@keyframes stroke-anim {
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<svg viewBox="-50 -50 100 100">
<path class="stroke" d="M-40 0 a 40 40 0 0 1 80 0 a 40 40 0 0 1 -80 0"></path>
<path class="stroke" d="M-20 -20 a 5 5 0 0 1 10 0 a 5 5 0 0 1 -10 0"></path>
<path class="stroke" d="M10 -20 a 5 5 0 0 1 10 0 a 5 5 0 0 1 -10 0"></path>
<path class="stroke" d="M30 0 a 30 30 0 1 1 -60 0"></path>
</svg>
</body>
</html>You can copy the above code directly and run the demonstration locally.
Here are some key tags and attributes:
- ##
- Path
The path element is a general element used to define shapes. All basic shapes can be created using the path element. The SVGelement is used to draw advanced shapes composed of lines, arcs, curves, etc., with or without fill. The element is probably the most advanced and versatile SVG shape of all elements. It's also probably the hardest element to master.
- animation
- Properties and
@keyframes
Rules/* 定義動畫*/ @keyframes 動畫名稱{ /* 樣式規(guī)則*/ } /* 將它應(yīng)用于元素 */ .element { animation-name: 動畫名稱（在@keyframes中已經(jīng)聲明好的）; /* 或使用動畫簡寫屬性*/ animation: 動畫名稱 1s ... }animation property is a shorthand property. There are six animation properties that can be used to set:
animation-name：規(guī)定需要綁定到選擇器的 keyframe 名稱。。 animation-duration：規(guī)定完成動畫所花費(fèi)的時間，以秒或毫秒計。 animation-timing-function：規(guī)定動畫的速度曲線。 animation-delay：規(guī)定在動畫開始之前的延遲。 animation-iteration-count：規(guī)定動畫應(yīng)該播放的次數(shù)。 animation-direction：規(guī)定是否應(yīng)該輪流反向播放動畫。
- animation-delay
- property defines when the animation starts.
The value of this property is measured in seconds or milliseconds; negative values ??are allowed, -2s causes the animation to start immediately, but skips 2 seconds to enter the animation.:nth-child() - Selector
n can be a number, a keyword, or a formula.:nth-child(n) The selector matches the nth child element in the parent element , there are no restrictions on element types.
PHP Chinese website platform has a lot of video teaching resources. Welcome everyone to learn "css video tutorial" and "HTML video tutorial"!
The above is the detailed content of How to dynamically draw a smiley face using HTML5+CSS3. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Handling reconnections and errors with HTML5 Server-Sent Events.
Jul 03, 2025 am 02:28 AM
When using HTML5SSE, the methods to deal with reconnection and errors include: 1. Understand the default reconnection mechanism. EventSource retrys 3 seconds after the connection is interrupted by default. You can customize the interval through the retry field; 2. Listen to the error event to deal with connection failure or parsing errors, distinguish error types and execute corresponding logic, such as network problems relying on automatic reconnection, server errors manually delay reconnection, and authentication failure refresh token; 3. Actively control the reconnection logic, such as manually closing and rebuilding the connection, setting the maximum number of retry times, combining navigator.onLine to judge network status to optimize the retry strategy. These measures can improve application stability and user experience.
Integrating CSS and JavaScript effectively with HTML5 structure.
Jul 12, 2025 am 03:01 AM
HTML5, CSS and JavaScript should be efficiently combined with semantic tags, reasonable loading order and decoupling design. 1. Use HTML5 semantic tags, such as improving structural clarity and maintainability, which is conducive to SEO and barrier-free access; 2. CSS should be placed in, use external files and split by module to avoid inline styles and delayed loading problems; 3. JavaScript is recommended to be introduced in front, and use defer or async to load asynchronously to avoid blocking rendering; 4. Reduce strong dependence between the three, drive behavior through data-* attributes and class name control status, and improve collaboration efficiency through unified naming specifications. These methods can effectively optimize page performance and collaborate with teams.
Declaring the correct HTML5 doctype for modern pages.
Jul 03, 2025 am 02:35 AM
Doctype is a statement that tells the browser which HTML standard to use to parse the page. Modern web pages only need to be written at the beginning of the HTML file. Its function is to ensure that the browser renders the page in standard mode rather than weird mode, and must be located on the first line, with no spaces or comments in front of it; there is only one correct way to write it, and it is not recommended to use old versions or other variants; other such as charset, viewport, etc. should be placed in part.
Improving SEO with HTML5 semantic markup and Microdata.
Jul 03, 2025 am 01:16 AM
Using HTML5 semantic tags and Microdata can improve SEO because it helps search engines better understand page structure and content meaning. 1. Use HTML5 semantic tags such as,,,, and to clarify the function of page blocks, which helps search engines establish a more accurate page model; 2. Add Microdata structured data to mark specific content, such as article author, release date, product price, etc., so that search engines can identify information types and use them for display of rich media summary; 3. Pay attention to the correct use of tags to avoid confusion, avoid duplicate tags, test the effectiveness of structured data, regularly update to adapt to changes in schema.org, and combine with other SEO means to optimize for long-term.
Explaining the HTML5 `` vs `` elements.
Jul 12, 2025 am 03:09 AM
It is a block-level element, suitable for layout; it is an inline element, suitable for wrapping text content. 1. Exclusively occupy a line, width, height and margins can be set, which are often used in structural layout; 2. No line breaks, the size is determined by the content, and is suitable for local text styles or dynamic operations; 3. When choosing, it should be judged based on whether the content needs independent space; 4. It cannot be nested and is not suitable for layout; 5. Priority is given to the use of semantic labels to improve structural clarity and accessibility.
Understanding HTML5 Media Source Extensions (MSE)
Jul 08, 2025 am 02:31 AM
MSE (MediaSourceExtensions) is part of the W3C standard, allowing JavaScript to dynamically build media streams, thus enabling advanced video playback capabilities. It manages media sources through MediaSource, stores data from SourceBuffer, and represents the buffering time range through TimeRanges, allowing the browser to dynamically load and decode video clips. The process of using MSE includes: ① Create a MediaSource instance; ② Bind it to an element; ③ Add SourceBuffer to receive data in a specific format; ④ Get segmented data through fetch() and append it to the buffer. Common precautions include: ① Format compatibility issues; ② Time stamp pair
What are the new input types available in HTML5 forms?
Jul 12, 2025 am 03:07 AM
HTML5introducednewinputtypesthatenhanceformfunctionalityanduserexperiencebyimprovingvalidation,UI,andmobilekeyboardlayouts.1.emailvalidatesemailaddressesandsupportsmultipleentries.2.urlchecksforvalidwebaddressesandtriggersURL-optimizedkeyboards.3.num
Submitting Form Data Using New HTML5 Methods (FormData)
Jul 08, 2025 am 02:28 AM
It is more convenient to submit form data using HTML5's FormData API. 1. It can automatically collect form fields with name attribute or manually add data; 2. It supports submission in multipart/form-data format through fetch or XMLHttpRequest, which is suitable for file upload; 3. When processing files, you only need to append the file to FormData and send a request; 4. Note that the same name field will be overwritten, and JSON conversion and no nesting structure need to be handled.
