How to dynamically draw a smiley face using HTML5+CSS3

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

• Define a path tag and draw a circle

• Use the path tag to draw the eye on the left
  

• Draw out the right eye as well
  

• ##Draw the mouth

  
  

Copy after login

.stroke { stroke-linecap: round; }

Finally realize the animation effect:

.stroke { animation: stroke-anim 2s linear forwards; stroke-dasharray: 300; stroke-dashoffset: 300; }

@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; } }

##ok, Finish! The complete code is given below:

You can copy the above code directly and run the demonstration locally.

Here are some key tags and attributes:

##
• Elements
  SVG images are created using various elements that are applied to the structure, drawing, and layout of vector images. If svg is not the root element, the svg element can be used to nest a separate svg fragment within the current document (for example, an HTML document). This independent fragment has its own viewport and coordinate system.

• Path
  The path element is a general element used to define shapes. All basic shapes can be created using the path element. The SVG element 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

  @keyframesRules

  /* 定义动画*/ @keyframes 动画名称{ /* 样式规则*/ } /* 将它应用于元素 */ .element { animation-name: 动画名称（在@keyframes中已经声明好的）; /* 或使用动画简写属性*/ animation: 动画名称 1s ... }

  Copy after login
  animation property is a shorthand property. There are six animation properties that can be used to set:

animation-name：规定需要绑定到选择器的 keyframe 名称。。 animation-duration：规定完成动画所花费的时间，以秒或毫秒计。 animation-timing-function：规定动画的速度曲线。 animation-delay：规定在动画开始之前的延迟。 animation-iteration-count：规定动画应该播放的次数。 animation-direction：规定是否应该轮流反向播放动画。

Copy after login
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

  :nth-child(n) The selector matches the nth child element in the parent element , there are no restrictions on element types.

  n can be a number, a keyword, or a formula.

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!