Tag：css3
-
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: […]
-
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″> […]
-
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 […]
-
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; […]
-
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 […]
-
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 […]
-
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 […]
-
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 […]
-
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> […]
-
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 […]
-
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 […]
-
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 […]
