• CSS implements various loading effects with parsing process


    HTML <div class=”spinner”></div> CSS .spinner { width: 40px; height: 40px; background-color: #333; margin: 100px auto; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes sk-rotateplane { 0% { transform: perspective(120px) […]

  • A text teaches you to play with CSS border (border)


    Border style The border style property specifies what border to display. The border style property defines the style of the border Border style value code demonstration: <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> < title > shuixiangmuyu blog < / Title > <style> p.none { border-style: none; } […]

  • CSS implementation tiktok text dithering effect example


    The front-end students will blush because of some dynamic effects and design competition in daily development. The design hopes to be realized by code. The front-end should design a GIF diagram. Finally, no one will let anyone. The design has gone, leaving the front-end to work overtime alone CSS technology is a skill that the […]

  • A text teaches you to play with CSS combo selectors


    CSS combination selectors include the combination of various simple selectors. CSS3 contains four combinations: Descendant selector (space delimited) Child element selectors (separated by a greater than sign) Adjacent sibling selectors (separated by a plus sign) Normal sibling selectors (separated by dashes) 1. Descendant selector The descendant selector is used to select the descendant elements of […]

  • Pure CSS allows the website to have the implementation code of dark mode switching function for free


    preface The concept of dark mode originated fromMacOS systemofMojave, provideLight themeandDark themeTwo kinds of skin for users to choose from,Dark themeThat’s what we often sayDiablo mode。 For the sake of eye health, the author chose mobile phones, tablets and computersDiablo mode 。 As apple officials gradually require that all major system platforms be adaptedDiablo modeTherefore, […]

  • Pure CSS and fluent realize the effect of breathing lamp respectively (example code)


    Last time, a very studious fan asked if it was possible to make the moon a breathing lamp effect, because there was no picture of the size of the moon, so he used stars insteadToday, this blogger usesPure CSS and fluent animationRealize it separately and remember to collect and learn effect: Want to test, the […]

  • HTML + CSS to realize the special effects of image scanner


    This article mainly introduces the HTML CSS image scanner and shares it with you as follows: effect: In this way, there are jitters: Jitter free: realization: 1. Define a box: <body> <div class=”tu”></div> </body> 2. Basic style, length and width background drawing, etc~ .tu{ width: 500px; height: 300px; background-image: url(8.jpg); background-size: 100% auto; background-repeat: no-repeat; […]

  • How to use CSS composite selector


    Intersection selector The intersection selector consists of two selectors directly connected. The first selector must be an element selector, and the second selector must be a class selector or ID selector. The two selectors must be written continuously without spaces.The element selected by the intersection selector must be the element type specified by the first […]

  • CSS method to fill the remaining space of the parent container with the height of the child element Div


    1. Use floating mode design sketch: The code is as follows: (note that the height of. Content is 500px, that is, the height of the parent element, but the floating element is above. Content and covers. Content. Change the. NAV background style to background color: RGBA (0,0,0,0.1); the effect can be observed) <!DOCTYPE html> <html> […]

  • Explain in detail the implementation of various three column adaptive layouts in CSS


    preface In order to follow the normal web layout, the left, middle and right layout is written in the mode of having header and footer. The first is based on float Realization idea Conventional thinking, make the left and right asides float to the left and right sides respectively code implementation <!– HTML section — […]

  • Using HTML + CSS to realize the slow drop-down effect of menu bar


    Objective: use HTML + CSS to realize the effect that the menu bar will appear slowly when the mouse moves to the menu bar We can solve this problem in two ways Method 1: Transition Turn on forum-1Absolute positioning(absolute), let the insideliBreak away from its parent element, otherwise it will squeeze the subsequent content to […]

  • Pure CSS drag and drop effect code


    catalogue 1、 Drag effect example 2、 CSS implementation principle 3、 CSS implementation details 4、 CSS implementation layout 1. Fixed positioning 5、 CSS implements other functions 1. Adsorption function 6、 Description and summary Using your imagination, CSS can also achieve drag and drop effects. 1、 Drag effect example This is a very common effect on the […]