grammar:
First parameter: from angle: starting angle, optional, default is from top to bottom position: the position of the cone point Second parameter: start-color : defines the start color stop-color : defines the end color 1. The first parameter Likewise, the first parameter can be empty, the default angle is 0 degrees, and the cone center is the center point of the shape. For example: background-image: conic-gradient(#69f, #fd44ff); We can change the starting angle, such as: background-image: conic-gradient(from -90deg, #69f, #fd44ff); Change the cone center position: background-image: conic-gradient(from -90deg at 80px 120px, #69f, #fd44ff) 2. The second parameter Like linear and radial gradients, you can set the color and the starting position of the gradient. The position parameters accepted are percentage and angle. For example: background-image: conic-gradient(#69f 10%, #fd44ff 10%); The above code is equivalent to: background-image: conic-gradient(#69f 36deg, #fd44ff 36deg); The display effect is as follows: 3. Repeat the cone gradient Like linear and radial gradients, conic gradients also have the property of repeating. background-image: repeating-conic-gradient(#69f 0 36deg, #fd44ff 36deg 72deg); The effect is as shown below: Does this rendering look a little familiar? Let's set it to a circle and add a button, and it will become a lottery disc. The effect is as follows: Address: https://codepen.io/jianxiujiucan/pen/bGddbez We can use cones to create a variety of loading effects: Address: https://codepen.io/jianxiujiucan/pen/bGdGyKN For the second loading, please study it yourself and write some exercises~ We can use gradients to create a variety of effects. Summarize The above is the editor's introduction to the conic-gradient effect achieved with CSS3. I hope it will be helpful to everyone! |
>>: Analysis of Facebook's Information Architecture
This article mainly introduces the implementation...
CSS is the realm of style, layout, and presentati...
<br />Once, Foyin and Mr. Dongpo were chatti...
The semantics, writing style, and best practices ...
Many organizations have the need to back up file ...
1.core file When a Segmentation fault (core dumpe...
1. Arrange CSS in alphabetical order Not in alphab...
We better start paying attention, because HTML Po...
Table of contents Preface 1. Preparation 2. Actua...
Table of contents 1. Synchronization Principle 2....
Table of contents Preface 1. How to write functio...
Table of contents Introduction to Arrays Array li...
vue scaffolding -> vue.cli Quickly create a la...
Preface The best method may not be the one you ca...
Table of contents Background 1. What is dns-prefe...