day02 mobile web (animation)
1, Animation
Objective: to add animation effects using animationFunction: realize the change of multiple states, and the process is controllable (repeated play, alternating play, pause)css attribute: animationShortcut key: an
1.1 animation properties
Goal 1: use animation related attributes to control the animation execution process Goal ...
Posted by steviez on Mon, 25 Apr 2022 20:32:09 +0300
ES language improvement
Piecemeal changes
Strict mode
This is a new syntax for ES5
reference resources: https://www.runoob.com/js/js-strict.html
reference resources: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode
let and const
ES6 recommends that you no longer use var to define variables, but let to define variables and const to de ...
Posted by BRUUUCE on Sat, 23 Apr 2022 10:56:39 +0300
New CSS feature @ layer -- cascade layer
New CSS feature @ layer
New CSS feature @ layer
grammarPriority of non @ layer and @ layer layersAnonymous layerNested layer
C in CSS refers to Cascading, that is, Cascading. Only by understanding how Cascading solves the conflict of style rules, can we accurately and quickly set the style of an element.
The stacking rules are cons ...
Posted by rinkhals on Fri, 22 Apr 2022 06:37:01 +0300
The front-end layout is related to the mobile terminal layout
1, Mobile terminal layout
1. Layout concept
(1) Static layout
Direct use of px as a unit is not recommended and cannot adapt to the screen
(2) Streaming layout
Width percentage height pxThe maximum and minimum values are usually added
(3) Adaptive layout
Each static layout corresponds to multiple screen resolutionsUse @ media media query t ...
Posted by dreglo on Fri, 22 Apr 2022 06:06:46 +0300
[CSS box model learning]
1, What is a box model?
All HTML elements can be regarded as boxes. In CSS, the term "box model" is used for design and layout. CSS box model is essentially a box that encapsulates the surrounding HTML elements, including margins, borders, padding, and actual content. The box model allows us to place elements in the space between ...
Posted by frosero on Thu, 21 Apr 2022 16:20:22 +0300
You'll like the new array method: array At (index)
Author: dmitripavlutin Translator: front end Xiaozhi Source: dmitripavlutin
Recently, a Vue component has been opened source, which is not perfect enough. Welcome to improve it together. I also hope you can give star support. Thank you.
github address: https://github.com/qq449245884/vue-okr-tree
In addition to ordinary objects, arrays are ...
Posted by KDragon on Thu, 21 Apr 2022 03:06:36 +0300
CSS selector summary
element selector
element { style properties }
example:
span {
background-color: skyblue;
}
ID Selector
#id_value { style properties }
example:
#identified {
background-color: skyblue;
}
ID cannot be repeated. It can only be used once
class selector
Similar to id, but * * * class can be repeated***
.class_name { style proper ...
Posted by BRUUUCE on Tue, 19 Apr 2022 19:59:07 +0300
Method for realizing horizontal and vertical centering
In normal development, we often encounter the need to center the content horizontally and vertically. Here are some common methods.
Flex
It is the most common way to set the horizontal and vertical center of an element through the flex attribute. Flex layout is a very popular layout method at present. For flex layout, you can see Ruan Yifeng' ...
Posted by brettpower on Tue, 19 Apr 2022 01:00:57 +0300
JavaScript - array object
catalogue
🍓 What is an array?
🍓 Two ways to create arrays
🐇 Array() constructor to create an array
🐇 Create an array literal
🍓 Two ways to detect whether it is an array
🐇 instanceof operator
🐇Array.isArray()
🍓 Three ways to traverse an array
🐇 for loop
🐇 for in
🐇 forEach()
🐇 map() mapping
🐇 forEach() sum
🐇 Ra ...
Posted by jocknerd on Mon, 18 Apr 2022 21:58:41 +0300
How to realize HTML5 animation page?
HTML5 animation implementation
HTML5 animation can be implemented in the following two ways.
CSS3 animation
Animation is the effect of gradually changing elements from one style to another. You can change any style any number of times. Specify the time of change by percentage, or use the keywords "from" and "to", which ar ...
Posted by kaspari22 on Mon, 18 Apr 2022 13:08:34 +0300