Tag：css
-
Time：2021-8-2
1、 What is it Parallax scrolling refers to the multi-layer background moving at different speeds to form a three-dimensional motion effect and bring a very excellent visual experience We can decompose the web page into: background layer, content layer and suspension layer When you scroll the mouse wheel, each layer moves at different speeds, resulting […]
-
Time：2021-7-30
Before introducing the new CSS attribute contain, readers need to know what is page redrawing and rearrangement. It has been described many times before. You can see the correct posture to improve the performance of CSS animation [1]. OK, let’s move on to the main topic of this article, Why? The contain attribute allows us […]
-
Time：2021-7-29
Definition and Usage The display attribute specifies the type of box that the element should generate. explain This attribute is used to define the type of display box generated by the element when the layout is established. For document types such as HTML, it is dangerous to use display carelessly, because it may violate the […]
-
Time：2021-7-27
When learning at the front end, many children find that the box model defaults to square. How to turn the box into the desired model? First, let’s look at the default—- <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=, initial-scale=1.0″> <style> .box{ width: 100px; height: 100px; background-color: rgb(116, 51, 51); […]
-
Time：2021-7-26
background The reason is that a classmate in the wechat technology group asked, what is the way to obtain the main color of the picture? There is a picture to get his main tone: The obtained color value is used to realize functions like this – there is a picture in the container. It is […]
-
Time：2021-7-24
Today, let’s make a simple heartbeat effect. It doesn’t need a lot of code. Just add a box and make full use of CSS. 1. First, we add a visual box to the page <body> <div class=”heart”></div> </body> 2. Then turn it into a heart .heart{ position:relative; width:100px; height:100px; margin:100px; } .heart:after, .heart:before{ position:absolute; width:60px; […]
-
Time：2021-7-23
Before, I introduced several ways to use pure CSS to achieve wave effect. There are two articles about them Pure CSS to achieve wave effect! Using CSS to achieve cool charging animation This article will introduce another wave effect using CSS, which is very interesting. Starting from the realization of curved triangle area by definite […]
-
Time：2021-7-23
First look at the effect: preface: This idea was made by Steven in station B. I thought it was very good, and then I got one myself（ Here is the detailed process. The full code is at the end. realization: 1. First define a div tag as a button, and the class name is. Anniu: […]
-
Time：2021-7-22
Page public name: #Wrapper — the width of the overall layout is controlled by the periphery of the page #Container or # content — container, used for outermost layer #Layout — Layout #Head, header — header section #Foot, footer — footer section #NAV — main navigation #Subnav — secondary navigation #Menu — menu #Submenu — […]
-
Time：2021-7-22
This paper mainly introduces an example of implementing hierarchical pyramid with HTML + CSS, which is shared with you as follows: First look at the effect of the code Code directly // html <div class=”finetriangle”> <div class=”sanjiao”> <!– Pyramid — > <div class=”sj sj1″></div> <div class=”sj sj2″></div> <div class=”sj sj3″></div> <div class=”sj sj4″></div> <div class=”sj […]
-
Time：2021-7-21
This paper mainly introduces an example of HTML + CSS to realize text folding effect, which is shared with you as follows: effect: realization: 1. Definition label: <h1>aurora</h1> 2. Set the basic style of text: h1{ text-transform: uppercase; letter-spacing: 3px; font-size: 15vw; transform: rotate(-10deg) skew(30deg); position: relative; color: rgba(0, 101, 253, 0.6); -webkit-text-stroke: 2px rgba(0, […]
-
Time：2021-7-20
background Basic concepts CSS filterAttribute applies blur or color shift to elements to form a filter, which is usually used to adjust the rendering of images, backgrounds, and borders. Its value can befilterfunction<filter-function>Or useurlAdded SVG filter. filter: <filter-function> [<filter-function>]* | none filter: url(file.svg#filter-element-id) <filter-function>Can be used forfilterandbackdrop-filterProperty. Its data type is specified by one of […]
