<thead id="hrpdo"></thead>
    <i id="hrpdo"></i>
    <li id="hrpdo"></li><span id="hrpdo"><optgroup id="hrpdo"></optgroup></span>

    \n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t<\/g>\n\t\t<\/svg>\n\t<\/body>\n<\/html><\/pre>

    You can copy the above code directly and run the demonstration locally. <\/p>

    Here are some key tags and attributes: <\/p>

    HTML5 <\/code> Tags are used to draw images<\/p>

    < ;g><\/code> Container element used to combine related elements, <\/p>

    \"HTML5+CSS3<\/p>

    ##: Define a path <\/code><\/p>

    \"HTML5+CSS3<\/p>

    animation attribute is a shorthand attribute: <\/code>

    animation-name:規(guī)定需要綁定到選擇器的 keyframe 名稱。。   \nanimation-duration:規(guī)定完成動畫所花費的時間,以秒或毫秒計。   \nanimation-timing-function:規(guī)定動畫的速度曲線。   \nanimation-delay:規(guī)定在動畫開始之前的延遲。   \nanimation-iteration-count:規(guī)定動畫應該播放的次數(shù)。   \nanimation-direction:規(guī)定是否應該輪流反向播放動畫。<\/pre><\/p>Animation can be created through 

    @keyframes rules. The <\/code>

    \/* 定義動畫*\/\n@keyframes 動畫名稱{\n    \/* 樣式規(guī)則*\/\n}\n\n\/* 將它應用于元素 *\/\n.element {\n    animation-name: 動畫名稱(在@keyframes中已經(jīng)聲明好的);\n\n    \/* 或使用動畫簡寫屬性*\/\n    animation: 動畫名稱 1s ...\n}<\/pre>

    stroke-dasharray property controls the pattern pattern of dotted lines used for strokes. As an appearance property, it can also be used directly as a property inside a CSS style sheet. <\/code><\/p>\n

    stroke-dashoffset The attribute specifies the distance from the dash mode to the beginning of the path. If a value is used, then this value represents a percentage of the current viewport. The value can be negative. <\/percentage><\/code><\/p>PHP Chinese website platform has a lot of video teaching resources. Welcome everyone to learn \"

    css video tutorial\" and \"<\/a>HTML video tutorial\"! <\/a><\/p>"}

    国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

    Home Web Front-end H5 Tutorial HTML5+CSS3 dynamically draws an elephant

    HTML5+CSS3 dynamically draws an elephant

    Aug 30, 2021 pm 04:11 PM
    css3 html5 svg animation

    In the previous article "Using CSS to create interesting text swing animation special effects", we introduced the method of using CSS to create interesting text swing animation special effects. This time we will introduce to you how to dynamically draw an elephant using HTML5 CSS3. If you are interested, you can learn about it~

    The main content of today’s article is: use HTML5 svg to draw a line elephant, and then Add animation 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:

    HTML5+CSS3 dynamically draws an elephant

    Let’s study how to achieve this effect:

    First set the background color of the entire page, the color of the lines, and the size of the svg canvas

    body {
      margin: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #000000;
      color: #fff
    }
    
     svg {
      display: block;
      width: 90vmin;
      height: 90vmin;
    }

    Then use svg to draw a line elephant

    <svg role="img" aria-label="A stroke illustration of an elephant" viewBox="0 0 120 120">
      <g fill="none" stroke="currentColor" line-join="round" stroke-width="1">
    	<path class="stroke" d="M2 66 
    			 q0 -3 3 -3 q3 0 3 3
    			 q0 15 10 15 q10 0 10 -20 q0 -50 30 -40
    			 s 15 -20 30 0 s -10 50 -20 35 m24 -25 
    			 q 20 0 20 30 q0 10 -10 20
    			 l 0 15 q 0 3 -6 3 q -6 0 -6 -3l0 -15
    			 q 0 -3 -2 -5 m 2 5
    			 s -10 3 -20 0
    			 l 0 15 q 0 3 -6 3 q -6 0 -6 -3l0 -15
    			 q 0 -5 -4 -10 m 4 23
    			 h-3 q -6 0 -6 -3
    			 l0 -12
    			 q 0 -5 -6 -12
    			 m 2 -5
    			 l 3 1 m -3 -1
    			 l -3 -2 m 3 2
    			 q -10 30 -27 30
    			 q -16 0 -16 -26
    			 m 80.5 16.5
    			 v11 q0 3 6 3 h1.5
    			 m-40 -50
    			 a 3 3 0 0 1 6 0 a 3 3 0 0 1 -6 0
    			 m 11 -17
    			 q 15 -15 23 5
    			 m 27.8 20
    			 q 0 5 5 10
    			 h2 m-2 0 v2
    			 ">
      </g>
    </svg>

    HTML5+CSS3 dynamically draws an elephant

    Finally realize the animation effect:

    First use the stroke-dasharray attribute to control the pattern paradigm of the dotted lines used for strokes , stroke-dashoffset controls the distance from the dash pattern to the beginning of the path. The values ??of these two properties need to be consistent.

    .stroke {
      stroke-dasharray: 300;
      stroke-dashoffset: 300;
    }

    After setting these two properties, the line elephant pattern will be hidden, and then bind an animation to the .stroke element

    .stroke {
      animation: stroke-anim 4s linear forwards;
    }

    Use @ keyframes rules, set the action for the animation, set the value of the stroke-dashoffsets attribute to 0

    @keyframes stroke-anim {
      to {
    	stroke-dashoffset: 0;
      }
    }

    HTML5+CSS3 dynamically draws an elephant

    ok! The complete code is given below:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style>
    			body {
    				margin: 0;
    				height: 100vh;
    				display: flex;
    				justify-content: center;
    				align-items: center;
    				background: #000000;
    				color: #fff
    			}
    
    			svg {
    				display: block;
    				width: 90vmin;
    				height: 90vmin;
    			}
    
    			.stroke {
    				stroke-dasharray: 300;
    				stroke-dashoffset: 300;
    				animation: stroke-anim 4s linear forwards;
    			}
    
    			@keyframes stroke-anim {
    				to {
    					stroke-dashoffset: 0;
    				}
    			}
    		</style>
    	</head>
    	<body>
    		<svg role="img" aria-label="A stroke illustration of an elephant" viewBox="0 0 120 120">
    			<g fill="none" stroke="currentColor" line-join="round" stroke-width="1">
    				<path class="stroke" d="M2 66 
    			 q0 -3 3 -3 q3 0 3 3
    			 q0 15 10 15 q10 0 10 -20 q0 -50 30 -40
    			 s 15 -20 30 0 s -10 50 -20 35 m24 -25 
    			 q 20 0 20 30 q0 10 -10 20
    			 l 0 15 q 0 3 -6 3 q -6 0 -6 -3l0 -15
    			 q 0 -3 -2 -5 m 2 5
    			 s -10 3 -20 0
    			 l 0 15 q 0 3 -6 3 q -6 0 -6 -3l0 -15
    			 q 0 -5 -4 -10 m 4 23
    			 h-3 q -6 0 -6 -3
    			 l0 -12
    			 q 0 -5 -6 -12
    			 m 2 -5
    			 l 3 1 m -3 -1
    			 l -3 -2 m 3 2
    			 q -10 30 -27 30
    			 q -16 0 -16 -26
    			 m 80.5 16.5
    			 v11 q0 3 6 3 h1.5
    			 m-40 -50
    			 a 3 3 0 0 1 6 0 a 3 3 0 0 1 -6 0
    			 m 11 -17
    			 q 15 -15 23 5
    			 m 27.8 20
    			 q 0 5 5 10
    			 h2 m-2 0 v2
    			 ">
    			</g>
    		</svg>
    	</body>
    </html>

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

    Here are some key tags and attributes:

    HTML5 <SVG> Tags are used to draw images

    &lt ;g> Container element used to combine related elements,

    HTML5+CSS3 dynamically draws an elephant

    ##: Define a path

    HTML5+CSS3 dynamically draws an elephant

    animation attribute is a shorthand attribute:

    animation-name:規(guī)定需要綁定到選擇器的 keyframe 名稱。。   
    animation-duration:規(guī)定完成動畫所花費的時間,以秒或毫秒計。   
    animation-timing-function:規(guī)定動畫的速度曲線。   
    animation-delay:規(guī)定在動畫開始之前的延遲。   
    animation-iteration-count:規(guī)定動畫應該播放的次數(shù)。   
    animation-direction:規(guī)定是否應該輪流反向播放動畫。

    Animation can be created through

    @keyframes rules. The

    /* 定義動畫*/
    @keyframes 動畫名稱{
        /* 樣式規(guī)則*/
    }
    
    /* 將它應用于元素 */
    .element {
        animation-name: 動畫名稱(在@keyframes中已經(jīng)聲明好的);
    
        /* 或使用動畫簡寫屬性*/
        animation: 動畫名稱 1s ...
    }

    stroke-dasharray property controls the pattern pattern of dotted lines used for strokes. As an appearance property, it can also be used directly as a property inside a CSS style sheet.

    stroke-dashoffset The attribute specifies the distance from the dash mode to the beginning of the path. If a <percentage> value is used, then this value represents a percentage of the current viewport. The value can be negative. </percentage>

    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 HTML5+CSS3 dynamically draws an elephant. For more information, please follow other related articles on the PHP Chinese website!

    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

    Hot AI Tools

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Clothoff.io

    Clothoff.io

    AI clothes remover

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Hot Tools

    Notepad++7.3.1

    Notepad++7.3.1

    Easy-to-use and free code editor

    SublimeText3 Chinese version

    SublimeText3 Chinese version

    Chinese version, very easy to use

    Zend Studio 13.0.1

    Zend Studio 13.0.1

    Powerful PHP integrated development environment

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    SublimeText3 Mac version

    SublimeText3 Mac version

    God-level code editing software (SublimeText3)

    Hot Topics

    PHP Tutorial
    1502
    276
    Handling reconnections and errors with HTML5 Server-Sent Events. 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. 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. 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. 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. 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) 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? 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

    How to chain multiple animations together? How to chain multiple animations together? Jul 05, 2025 am 01:59 AM

    To make multiple animations play in sequence, you can set delays through CSS's animation-delay to achieve simple concatenation; use JavaScript to listen for events or setTimeout for dynamic control; or use the timeline functions of animation libraries such as GSAP to arrange animations in order. 1. The CSS method realizes sequential playback by adding a delay value equal to the duration of the previous animation to the subsequent animation, which is suitable for simple scenes; 2. The JS method triggers the next animation by listening to the animationend event or using setTimeout, which is flexible and controllable but requires compatibility; 3. Animation libraries such as GSAP provide timeline functions, which can easily manage complex animation sequences and support intervals and overlapping effects; pay attention to delay calculation

    See all articles