Tag：css
-
Time：2021-10-27
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) […]
-
Time：2021-10-26
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; } […]
-
Time：2021-10-25
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 […]
-
Time：2021-10-24
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 […]
-
Time：2021-10-21
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, […]
-
Time：2021-10-19
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 […]
-
Time：2021-10-18
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; […]
-
Time：2021-10-18
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 […]
-
Time：2021-10-17
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> […]
-
Time：2021-10-16
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 — […]
-
Time：2021-10-14
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 […]
-
Time：2021-10-13
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 […]
