• N kinds of methods to realize adaptive dividing line skillfully in CSS


    Segmentation line is a common kind of design in web pages, such as Zhihu’s more answers The adaptation here means that the horizontal lines on both sides will be adaptive with the number of text and the width of the parent Secretly look at the realization of Zhihu, it is obviously covered with a white […]

  • Cool charging animation with pure CSS


    Step by step, let’s see what kind of charging animation effect can be achieved by using CSS only. Draw a battery Of course, to charge a battery, first you have to use CSS to draw a battery. This is not difficult. Just make a whole battery Oh, it’s just it. With the battery, you can […]

  • Analysis of the method of using border attribute and display attribute in CSS


    Introduction to border attribute borderProperty to set the element border. frame3Such as thickness, line type and color. Border line type property value theoryThey are as follows:     Attribute refers to describe none Defines no borders. hidden Same as “None”. Except for tables, where hidden is used to resolve border conflicts. dotted Defines a dotted […]

  • CSS transparent border background clip


    This article mainly introduces the background clip magic of CSS transparent border, to share with you, but also to leave a note for yourself <div class=”border”></div> .border { width: 300px; height: 300px; background: url(“https://waiqin.oss-cn-shenzhen.aliyuncs.com/jxb-vip-ts/activitys/activitys15677540269589timg.jpg”); background-size: cover; margin-left: 100px; border: 10px solid rgba(255,255,255,.6); background-clip: padding-box; } Background clip: padding box; key code The initial value of […]

  • Explain the new background property of CSS3


    Previously, in CSS, we knew several attributes of background color, image, repeat, attachment, position, which are commonly used in CSS. What are the new attributes of CSS3? Look down: ** New attributes of CSS3: background clip, background origin, background size 1.background-clip The clipping property of the background is drawn from the specified position. ** ** […]

  • Div solution to conflict between relative width and absolute width of HTML + CSS


    Solution to div when relative width and absolute width conflict Abstract: generally, we will use PX when using absolute width, and% when using relative width. But what should we do if we use both absolute width and relative width? We use an example to explain today’s content 1. Complete the title requirements on the picture2. […]

  • Using pure CSS to achieve 3D rotation effect of the sample code


    It mainly uses preserve-3d and perspective attributes in CSS to achieve 3D effect effect HTML code <body> <div class=”box”> <div class=”face front”> <h2>Front</h2> </div> <div class=”face back”> <h2>Back</h2> </div> </div> </body> To demonstrate the effect, center the element and set the CSS of the body *{ margin: 0; padding: 0; } body{ width: 100%; height: […]

  • Realization of controllable dashed line by CSS


    preface CSS generated dashed line, the front end of Pediatrics. Generally, border will be used to implement, without further research, but the following dotted line will be generated? How to operate?   Implementation mode Some people use multiple span to generate, and a small dot is a span. This is OK, but it is troublesome […]

  • E-sports hero League data API interface – [event list] API call example code


    Revision of the official website of Yezi E-sports https://www.xxe.io/ Brand newimport com.alibaba.fastjson.JSON;import com.alibaba.fastjson.annotation.JSONField; import java.nio.charset.StandardCharsets;import java.nio.file.Files;import java.nio.file.Paths;import java.util.List; /** @API: event list @Website: https://www.xxe.io/ */public class LolLeague { public static void main(String[] args) { try { String content = getContent(); Respond rsp = JSON.parseObject(content, Respond.class); System.out.println(rsp.code); System.out.println(rsp.message); rsp.getLeagueList().forEach(System.out::println); } catch (Throwable t) { t.printStackTrace(); } […]

  • Implementation of particle dynamic button effect with CSS


    Link to original text https://github.com/XboxYan/no… Button is probably one of the most common components in web pages. Most of them are dull. If you encounter such a button, can’t help it a few more times? Usually, the first reaction to this kind of effect may be to use thecanvasLet’s take the following example The effect […]

  • CSS realizes suspension customer service effect


    <div class=”sideBar”> <div> < div class = “tips” > online customer service < / div > <ul class=”list”> <li>QQ:1846492969</li> <li>QQ:1846492969</li> <li>QQ:1846492969</li> <li>QQ:1846492969</li> <li>QQ:1846492969</li> </ul> </div> </div> .sideBar { position:fixed; right:-182px; top:50px; background-color:#ffffff; border:#eea236 solid 1px; transition:right 0.5s; border:solid 1px red; } .sideBar:hover { right:0; } .sideBar>div { position:relative; } .sideBar .tips { position:absolute; height:120px; line-height:25px; […]

  • Example code of triangle and arrow realized by CSS border


    1、 CSS box model The box includes: margin, border, padding, contentThe border border presents a smooth diagonal line. Using this feature, small triangles can be obtained by setting the width and color of each border.Div element is a block level element, which is displayed as a block box, and can be implemented by using it. […]