• CSS completes the parallax scrolling effect


    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 […]

  • The new CSS feature contains controls the redrawing and rearrangement of pages


    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 […]

  • Solution to the problem of adaptive height and width of CSS display table


    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 […]

  • HTML + CSS box model cases (circle, semicircle, etc.) “border radius” is simple and easy to use


    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); […]

  • Parsing CSS to extract picture theme color function (TIPS)


    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 […]

  • Implementation of heartbeat effect made by HTML + CSS


    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; […]

  • How to make wave effect with CSS


    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 […]

  • Implementation of cyberpunk style button with HTML + CSS


    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: […]

  • Common naming rules for class and ID of CSS


    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 — […]

  • An example of implementing hierarchical pyramid with HTML + CSS


    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 […]

  • HTML + CSS to achieve text folding effect example


    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, […]

  • What’s the magic use of CSS filter


    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 […]