MindMap Gallery 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:58This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
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
<style> div { width: 200px; height: 200px; background-color: pink; } /* div::before weight is 2 */ div::before { /* This content must be written */ content: 'I'; } div::after { content: 'Peppa Pig'; } </style> <body> <div> yes </div> </body>
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