Tag：css
-
Time：2019-8-24
Note Notes The front-end of re-learning is a column run by Cheng Shaofi [former head of mobile phone Taobao front-end] in Geek time, 10 minutes a day, to reconstruct your front-end knowledge system. The author mainly collates some key notes and insights of the learning process, and can complete the column study of Winter [original […]
-
Time：2019-8-24
The calc () function of CSS3 allows us to perform mathematical operations in attribute values. For example, we can use calc () to specify a fixed pixel value of an element’s width as the sum of multiple values. .foo { width: calc(100px + 50px); } Why calc () If you have used CSS preprocessors, such […]
-
Time：2019-8-24
* Note: This article is the collation of knowledge points contacted in the process of work. The price ratio of things involved is disorderly. If there are any mistakes, you are welcome to correct and guide them. First, the anchor link of the page Second, WebSocket Third, thermal renewal IV. Request Animation Frame Fifth, data […]
-
Time：2019-8-24
1. Transition and animation effect in Vue Single component (<transition name=”” mode=”> <p-if=”> </p> </transition>)V-enter, v-enter-to, v-enter-active, v-leave, v-leave-to, v-leave-active six states.(Defines the transition name and replaces the prefix V with the transition name)V-enter-activity and v-leave-activity reflect the main visible state, where the main effect can be added.V-enter is the initial state of transition and […]
-
Time：2019-8-24
Final effect Definition of initial variables Let radius = 140 // outer ring radius Let thickness = 20 // ring thickness Let innerRadius = radius – thickness // inner ring radius Let start Angle = 90 // start angle Let endAngle = 180// End Angle Let x = 0 // center x coordinates Let y […]
-
Time：2019-8-24
Our mission is to keep you abreast of the latest and coolest Web development trends. That’s why we publish some selected resources every month that we accidentally find worthy of your attention. 1.Cube.js Powerful open source framework for the development of complex customized analysis systems. It consists of a front-end SDK and a back-end API […]
-
Time：2019-8-24
This paper introduces the implementation code of CSS warping shadow and shares it with you. Specifically as follows: Looking carefully, you can see that the two corners below each picture have different degrees of warping edges. The principle of implementation is similar to that of [CSS] curve shadow, which is also realized by pseudo-elements. HTML […]
-
Time：2019-8-23
Demand: The expected effect of layout in item is: a round user’s head on the left side, a nickname on the top and a personalized signature on the bottom of the right side (single line display, the maximum width beyond the actual display is replaced by’…’). As shown in the figure: Code: Wxml layout: <view […]
-
Time：2019-8-22
Effect: <!doctype html> <html> <head> <meta charset=”utf-8″> <title>Untitled Document </title> <style> /* Style 1*/ .a-upload { padding: 4px 10px; height: 20px; line-height: 20px; position: relative; cursor: pointer; color: #888; background: #fafafa; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; display: inline-block; *display: inline; *zoom: 1 } .a-upload input { position: absolute; font-size: 100px; right: 0; […]
-
Time：2019-8-21
Record some of the CSS tips you’ve learned recently. Media Inquiry There is a boundary value problem in media queries. If max-width is equal to the next min-width value, then we need to write a style in min-width to cover the inside of max-width. Otherwise, we will see that the style of boundary value is […]
-
Time：2019-8-20
Elastic layout Elastic layout is a kind of layoutSolving the layout of neutron elements of an elementIt provides great flexibility for layout Concepts and Grammar Basic settings Display: flex; // Set block-level elements as containers Display: inline-flex /// Set in-line elements as containers Here comes the word container, which is used to describe containers and […]
-
Time：2019-8-20
1. Concept To play CSS3 for 3d, you must understand several words, namely perspective, rotate and translate. Perspective is to see the 2D objects on the screen from a realistic perspective, so as to show the effect of 3D. Rotation is no longer the rotation on the 2D plane, but the rotation of the three-dimensional […]
