Features
Features:

Product Tour >

Edraw AI >

Paid Plans:

Individuals >

Business >

Eduaction >
Resources
Blog

History

How-tos & Tips

Discovery

Biography

Business Analysis

Examples

AI concept Map

Free AI Mind Map Generator

Onenote Mind Map

Bcg Matrix Examples

Nike Marketing Strategy

Unilever SWOT Analysis

Make Mind Maps in Google Docs

Guide

FAQs

What's New

Resource Center
Templates
All Templates

Brain Storming Templates

Strategy and Planning Templates

Project Management Templates

Product Management Templates

Human Resources Templates

Agile Workflow Templates

Marketing Templates

Education Templates

Fun and Games Templates

User Gallery
Download
Pricing
Enterprise

MindMap Gallery Programming Basics 5 HTML5CSS3 Advanced

Programming Basics 5 HTML5CSS3 Advanced

0% is the start of the animation, and 100% is the completion of the animation. This rule is the animation sequence; specifying a certain CSS style in @keyframes will gradually change the animation effect from creating the current style to the new style.

Edited at 2022-12-01 20:08:58

PlotWizard

Recent works View more works>>

Programming Basics 5 HTML5CSS3 Advanced

PlotWizard

Recent works View more works>>

Recommended to you
Outline

HTML5 CSS3 advanced

1: HTML5 (review)

Add semantic tags

header --- header tag

nav --- Navigation label

article --- content tag

section --- block-level label

aside --- sidebar label

footer --- tail tag

Add multimedia tag

audio -- audio

It can also natively support the playback of audio format files without using tags.

video -- video

Summarize

Audio tags are basically the same as video tags

Multimedia tags behave differently in different browsers, and there are compatibility issues

Google Chrome disables autoplay for audio and video tags

Videos in Google Chrome can be played by themselves by adding muted tags

Note: Just remember the usage method and automatic playback. For other properties, you can find the corresponding manual when using them.

Added form attributes and type types

Added input tag type

type="email" restricts user input to Emd type

type="url" restricts user input to URL type

type="date" restricts user input to date type

type= "time" restricts user input to time type

type="month" restricts user input to month type

type="week" restricts user input to week type

type="number" restricts user input to numeric type

type="tel" mobile phone number

type="search" search box

type="color" generates a color selection form

New expression attribute

required="required" The form has this attribute to indicate that its content cannot be empty and is required.

placeholder="Prompt text (placeholder)" Prompt information of the form, if there is a default value, it will not be displayed.

autofocus="autofocus" autofocus attribute, the page will automatically focus on the specified form after loading.

autocomplete="on/off" When the user starts typing in the field, the browser should display the options filled in the field based on the previously typed value; it is turned on by default and needs to be placed in the form with the name attribute and Successfully submitted

multiple="multiple" allows you to select multiple files for submission

2: CSS3 (review)

attribute selector

E[ata] selects the E element with att attribute

E[att="val"] selects E elements with an att attribute whose value is equal to val

/* Select only the input of the type =text text box */ input[type=text] { color: pink; }

E[att^="val"] matches E elements that have an att attribute and whose value starts with val

/* Select the elements that are first div and then have class attribute and the attribute value must start with icon */ div[class^=icon] { color: red; }

E[att$="val"] matches E elements with an att attribute whose value ends in val

/* Select the elements that are section first and then have class attributes and the attribute values must end with data */ section[class$=data] { color: blue; }

E[att*="val"] matches E elements with an att attribute and a value containing val

Structural pseudo-class selector

E:first-child

Matches the first child element E of the parent element

List item one List item two List item three List item four

E:nth-child(n)

ul li:nth-child(2){} matches the second child element of the parent element

ul li:nth-child(odd){} matches the odd-numbered child element of the parent element

ul li:nth-child(-n 3){} matches the first 3 child elements of the parent element

Pseudo element selector

::before Insert content before inside the element

::after inserts content after inside the element

3: CSS3-2D conversion

2D transformation is to change the position and shape of the label on the two-dimensional plane

move translate

rotate rotate

Rotation center point transform-origin

scale scale

translate

transform: translate(x, y)

transform: translateX(n)

transfrom: translateY(n)

x is the horizontal movement on the x-axis

y is the horizontal movement on the y-axis

Does not affect the position of other elements

100% unit is calculated relative to its own width and height.

rotate

Let the element rotate clockwise or counterclockwise in a two-dimensional plane

transform: rotate(degree) /* unit is: deg */

When the angle is positive, it goes clockwise; when the angle is negative, it goes counterclockwise.

The default rotation center point is the center point of the element

transform-origin

transform-origin: x y;

Note that the following parameters x and y are separated by spaces.

The default rotation center point of x y is the center of the element (50% 50%), which is equivalent to center center

You can also set pixels or orientation nouns (top, bottom, left, right, center) for x y

scale

The element increases or decreases in size, depending on the width (X-axis) and height (Y-axis) parameters

transform: scale(2,3);

scale(2,3: Change the width to 2 times the original size and the height to 3 times the original size.

4: CSS3-animation

Define animation

@keyframes animation name { 0% { width: 100px; } 100% { width: 200px } }

0% is the beginning of the animation, 100% is the completion of the animation, this rule is the animation sequence

Specifying a certain CSS style in @keyframes will gradually change the animation effect from creating the current style to the new style.

Animation is the effect of gradually changing an element from one style to another. It can change any number of styles any number of times.

Use percentages to specify when changes occur, or use `from` and `to`, equivalent to 0% and 100%

1. Can make multiple state changes keyframe keyframe 2. The percentage inside must be an integer 3. The percentage inside is the division of the total time (10s in this case)

Use animation

div { /* Call animation */ animation-name: animation name; /* duration */ animation-duration: duration; }

Common properties of animation

@keyframes specifies animation;

animation Shorthand property for all animation properties, except the animation-play-state property;

animation-name specifies the name of the keyframes animation. (necessary);

animation-duration specifies the seconds or milliseconds it takes for the animation to complete a cycle, the default is 0 (required);

animation-timing-function specifies the speed curve of animation, the default is "ease";

animation-delay specifies when the animation starts, the default is 0;

animation-iteration-count specifies the number of times the animation is played, the default is 1, and infinite

animation-direction specifies whether the animation will play in reverse in the next cycle, the default is "normal" alternate reverse play

animation-play-state specifies whether the animation is running or paused. The default is running, and "paused"

animation-fill-mode specifies the state after the animation ends, keeping forwards and returning to the beginning backwards

animation abbreviation

/* animation: animation name, duration, motion curve, when to start, number of plays, whether to reverse direction, start and end status */ animation: name duration timing-function delay iteration-count direction fill-mode

The abbreviated attribute does not include animation-paly-state

Pause the animation animation-paly-state: paused; often used in conjunction with other things such as mouse passing

If you want the animation to go back instead of going back directly: animation-direction: alternate

After the box animation ends, it stops at the end position: animation-fill-mode: forwards

Code demonstration: animation: move 2s linear 1s infinite alternate forwards;

Speed curve details animation-timing-function

animation-timing-function: Specifies the speed curve of animation, the default is `ease`

linear The speed is the same from beginning to end. Uniform speed

ease default. The animation starts at a slow speed, then speeds up, then slows down before ending

ease-in animation starts at a slow speed

ease-out animation ends at a slow speed

ease-in-out animation starts and ends at a slow speed.

steps() specifies the number of intervals (steps) in the time function

5: CSS3-3D rotation

three digit coordinates

x-axis: horizontally to the right -- Note: positive values are on the right side of the x-axis and negative values are on the left side

y-axis: vertically downward -- note: positive values are below the y-axis and negative values are above.

Z-axis: Vertical to the screen -- note: positive values going toward the outside and negative values going inward

3D displacement - translate3d(x, y, z)

Syntax: transform: translate3d(x, y, z)

/* Note: The corresponding values of x, y, z cannot be omitted, and do not need to be filled in with 0 */ transform: translate3d(100px, 100px, 0)

3D perspective - perspctive

- Perspective is also called viewing distance. The so-called viewing distance is the distance from the human eyes to the screen; - The closer to the visual point, the larger the image will be on the computer plane, and the further away, the smaller the image will be; - The unit of perspective is pixels;

The perspective needs to be written on the parent box of the inspected element

perspecitve sets the parent element, and translateZ sets different sizes for the child elements.

3D rotation - rotate3d(x, y, z)

transform: rotateX(45deg) -- Rotate 45 degrees along the positive x-axis

transform: rotateY(45deg) -- Rotate 45 degrees along the positive y-axis

transform: rotateZ(45deg) -- Rotate 45 degrees along the positive z-axis

transform: rotate3d(x, y, z, 45deg) -- Rotate 45 deg along the custom axis as an angle

3D rendering - transfrom-style

Controls whether the child element turns on the three-dimensional environment

transform-style: flat means that the child element does not enable 3D space, the default

transform-style: preserve-3d sub-elements enable three-dimensional space

The code is written to the parent, but affects the child box