Tag:css3

  • Three ways of background blur in CSS3 (summary)

    Time:2021-4-22

    1、 General background blur code: <Style> html, body { width: 100%; height: 100%; } * { margin: 0; padding: 0; } /*The background is blurred*/ .bg { width: 100%; height: 100%; position: relative; background: url(“./bg.jpg”) no-repeat fixed; background-size: cover; box-sizing: border-box; filter: blur(2px); z-index: 1; } .content { position: absolute; left: 50%; top: 50%; transform: […]

  • Using CSS3 to realize the effect of progress bar and dynamic adding percentage

    Time:2021-4-11

    In the process of the project, we began to use js’s request animation frame method to realize the progress bar, but when there are too many data, it greatly affects the performance, so we use CSS to realize and optimize it. Post code first: <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> […]

  • CSS3 to achieve lyrics progress text color fill changes in the dynamic effect of ideas detailed explanation

    Time:2021-4-10

    When playing music, the lyrics will gradually fill in color with the progress of the song. Instead of changing the color word by word, the lyrics will change pixel by pixel horizontally from left to right. That is to say, there will be different colors on the left and right sides of a word. This […]

  • CSS3 implementation of Taobao blank method

    Time:2021-4-2

    Make a blank on Taobao: When you are reducing the browser page, its content area is not reduced, it is left blank smaller. <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title></title> <style type=”text/css”> *{ margin: 0; padding: 0; } .wrapper{ height: 30px; background-color: gray; } .content{ width: 1200px; height: 30px; background-color: #0f0; Margin: 0 Auto; […]

  • Detailed explanation of CSS3 to achieve responsive accordion effect

    Time:2021-3-29

    Recently, I watched the video of foreign tycoons using CSS3 to achieve accordion effect, so I wrote it down in the form of blog to facilitate my review in the future. The code structure is as follows (the font is genericons) The final results are as follows: Full screen: When the screen width is less […]

  • HTML5 and CSS3 example tutorial summary (recommended)

    Time:2021-3-27

    On the separation of behavior and content of onclick 1. Trigger pop-up window by link (not recommended)!) XML/HTML CodeCopy content to clipboard <a href=‘#’         onclcik = “window.open(‘holiday_pay.html’,WinName,’width=300, height = 300′);”>   Holiday Pay     </a>   If JS is disabled and the link cannot guide the user to the corresponding page, do not assign “#” or similar values to the attribute 2. General […]

  • On the new interactive features of HTML5 & CSS3

    Time:2021-3-26

    This picture of the title of this article is made with Photoshop. However, you can’t find it in the search engine. The search engine is not strong enough to recognize the text in the image. And because the size of the image is not too small, may slow Internet users have to patiently wait for […]

  • Introducing a variety of custom font face in CSS3

    Time:2021-3-24

    Today, we found a problem in HTML. There are many default fonts provided to us, but except for those “bold”, “Song typeface” and “regular script” that support Chinese fonts, others don’t know Chinese fonts. What if we need to use our favorite fonts? Can CSS3 introduce custom downloaded fonts? If we can, how should we […]

  • CSS3 + JavaScript to achieve cool breathing effect example code

    Time:2021-3-22

    Using CSS3 animation to achieve a simple cool effect, the final effect is as follows: Page structure( index.html ): <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> <link rel=”stylesheet” href=”style.css”> </head> <body> <h1>Relax And Breath</h1> <div class=”container”> <div class=”circle”></div> <p id=”text”></p> <div class=”pointer-container”> <div class=”pointer”></div> </div> <div class=”gradient-circle”></div> </div> <script src=”script.js”></script> […]

  • How to use CSS3 to achieve a class live queue animation example code

    Time:2021-3-16

    Before, a friend in the group asked such a question, that is, how to work in the groupAppletsImplementation of similarLive broadcast platformWhen users ofQueue animation? as a front-end engineer, there are no more than two solutions: usejavascriptAccording to the conditions to control the style of elements to achieve queue animation With purecss3With data driven model […]

  • CSS3 box shadow property instance explanation

    Time:2021-3-12

    CSS3 — add shadow (use of box shadow) CSS3 – add shadow to div or text (use of box shadow and text shadow) CSS3 defines two kinds of Shadows: box shadows and text shadows. Box shadow needs IE9 and its updated version, while text shadow needs ie10 and its updated version. The following describes the […]

  • CSS3 draw basic graphics, such as circle, ellipse, triangle, etc

    Time:2021-3-12

    CSS3 circle#css3-circle{ width: 150px; height: 150px; border-radius: 50%; background-color: #232323;}CSS3 oval#css3-elipse{ width: 200px; height: 100px; border-radius: 50%; background-color: #232323;}CSS3 triangle#css3-triangle{ width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 150px solid #232323;}CSS3 parallelogram#css3-parallelogram{ width: 200px; height: 100px; background: #232323; -webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); -o-transform: skew(-45deg); transform: skew(-45deg);}CSS3 trapezoid#css3-trapezoid{ width: 100px; height: 0; border-bottom: 100px solid #232323; border-left: 50px solid transparent; border-right: 50px solid transparent;}CSS3 hexagonal star#css3-six-star{ width: 0; height: 0; position: relative; border-bottom: 100px solid #232323; border-left: 50px solid transparent; border-right: 50px […]