Tag：css3
-
Time：2020-5-28
Why to replace JS animation with CSS animation There are two reasons for JavaScript inefficiency: DOM manipulation and page animation. Usually we use frequent operations The CSS of DOM is used to achieve the visual animation effect, and the two factors that lead to the low efficiency of JS are included. When Dom and CSS […]
-
Time：2020-5-21
problem Recently, I met a need to achieve the edge tracing effect of the text, as shown in the following figure Solution 1 First of all, I want to see if CSS3 has any properties to implement. Later, I found text stroke This attribute is a composite attribute, which can set the text width and […]
-
Time：2020-5-18
Description: limit the number of lines of text displayed in a block element. -WebKit line clamp is an unsupported WebKit property that does not appear in the draft CSS specification. To achieve this effect, it needs to combine other foreign WebKit properties. Common binding properties: Display: – WebKit box; the attributes that must be combined […]
-
Time：2020-5-2
Nowadays, the screen resolution of the computer monitor is developing more and more, but the resolution of mobile devices such as mobile phones can not be much. More and more websites begin to adapt their pages to various resolutions, display basic content in small resolution, display all functions in large resolution, or even multi-level and […]
-
Time：2020-4-29
1. Flex layout .father { display: flex; justify-content: center; align-items: center; } This way is not compatible 2、position + transform .son { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } IE9 does not support the transform attribute below 3、table + table-cell .father { display: table; } .son { display: table-cell; vertical-align: middle; text-align: […]
-
Time：2020-4-28
Translate and transition have always made me think that they are very powerful and can’t learn. In fact, they are quite resistant to understand them. The interface has seen the document for less than half an hour, and they have probably understood it. Here is an example. You can download it and run it yourself […]
-
Time：2020-4-27
Transform and translate Transform refers to transformation and deformation. It is an attribute of CSS3, just like other width and height attributes Translate is the attribute value of transform, which refers to 2D transformation of elements. 2D transformation refers to how much elements move in the current position (0,0) in the direction of X axis […]
-
Time：2020-4-25
1、 Flex direction: (element arrangement direction) ※ flex direction: row (horizontally arranged from left to right = = left aligned) * flex direction: row reverse * flex direction: column (top down = = top aligned) * flex direction: column reverse 2、 Flex Wrap: (only valid if one line of content cannot be contained) * flex […]
-
Time：2020-4-24
1.device-width Definition: defines the screen visible width of the output device. Whether your web page is opened in safari or embedded in a WebView, device width is only related to your device. If it is the same device, its value will not change. For example, the device width * device height of iPhone 6 is […]
-
Time：2020-4-17
This paper introduces the example code of implementing star animation by CSS3 advanced less, which is shared to you as follows: The rendering is as follows: Preview links and code in my codepen: https://codepen.io/lio-mengxiang/pen/yzkrede Preview of knowledge points This article’s less skills + CSS skills knowledge points include: How to write a loop How […]
-
Time：2020-4-15
// Grammar: @media mediatype and | not | only (media feature) { css-code; } //You can also use different stylesheets for different media: <link rel=”stylesheet” media=”mediatype and|not|only (media feature)” href=”mystylesheet.css”> 1、 The first is the < meta > tag <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”> Several parameters of this code are explained: Width = device […]
-
Time：2020-4-1
Preface Fix the footer area at the bottom, no matter how wide the page is, it will not change at the bottom, just like the menu on the mobile end. <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>document</title> <!– css –> <style> #demo{ position: fixed; left: 0px; bottom: 0px; width: 100%; height: 50px; background-color: #eee; […]
