CSS3 animations include transition animations and keyframe animations, which are mainly simulated by changing CSS property values. I will introduce the three functional modules of Transform, Transitions and Animations in detail. Transform implements the deformation operation of web page objects, Transitions implements CSS attribute transition changes, and Animations implements the step-by-step demonstration effect of CSS […]
Tag: css3
CSS3 media queries and page adaptation
In September 2017, W3C released the Media Query Level 4 Candidate Recommendation Standard Specification, which expands the functions of already released media queries. This specification is used for the @media rules of CSS, which can set the style of specific conditions for documents, and can also be used for HTML, JavaScript and other languages. 1. […]
CSS3 tables and form styles
In traditional web pages, tables are mainly used for web page layout, and therefore have become the main tool for web page editing; in standardized web page design, the main function of tables is to display data and can also appropriately assist structural design. This chapter mainly introduces how to use CSS to control the […]
CSS3 beautification of web page elements
1. How to set up a The style of the label’s lower border is a 1px blue dotted line? Or express it this way 2. How to calculate the total size of the box model? To calculate the total size of the box model, you need to consider the box’s content dimensions, padding, borders, and […]
HTML5 new features + CSS3 new features
Table of Contents New features in HTML5 1. New semantic tags 2. New multimedia tags 3. New input form 4. New form attributes New features in CSS3 1. New selector (1), attribute selector (2), Structural pseudo-class selector (3) Pseudo element selector 2. Box model border-box 3. Other features of css3 (1), the picture becomes blurry […]
CSS3 gradients
CSS3 gradients allow you to display smooth transitions between two or more specified colors. Previously, you had to use images to achieve these effects. However, by using CSS3 gradients, you can reduce download time and bandwidth usage. Additionally, elements with gradients look better when zoomed in because the gradient is generated by the browser. CSS3 […]
CSS3 Flex Box (Flex Box)
CSS3 Flex Box CSS3 flexible box content: The flex box is composed of a flexible container (Flex container) and a flexible sub-element (Flex item). A flex container is defined as a flex container by setting the display property to flex or inline-flex. A flex container contains one or more flex child elements. <!DOCTYPE html> <html> […]
Transform (two-dimensional transformation) in CSS3
Two-dimensional transformations include translation, rotation, scaling, reflection, and cross-cutting. Transform is the transformation attribute of the element, and its attribute value is the transformation function. Using this attribute, the element can be moved in the specified direction, scaled, rotated, etc. Here are the following three commonly used conversion functions: Rotate function (rotate) Move function(translate) scaling […]
09_CSS3 multimedia query
1 Multimedia query 1.1 Media Inquiries Media queries can use different styles under different conditions, so that the page can achieve different rendering effects under different terminal devices. CSS Media Query Media queries (also called media queries) are used to change the way a page is displayed based on differences in window width, screen ratio, […]
css3 selector and css selector summary
css3 selector 1. Basic selector (1) Wildcard selector (*) * { Marigin: 0; padding: 0; } (2) Tag selector such as div p li p{ background-color: gray; color: orange; } (3) Class selector (.class) .important { font-weight: bold; color: yellow; } (4)Multiple class name selector p.items { color: red; } (5)id selector #first { background: […]