Ask for help, can you draw this background picture with css?

if you can Hua, how to draw, kneel and beg

Nov.02,2021

draw a rough one with canvas. There is some difference. You can change the specific effect by yourself

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var clg = ctx.createLinearGradient(0, 0, 0, -640);
ctx.fillStyle = "-sharpfc3";
ctx.fillRect(0, 0, 719, 1280);
ctx.strokeStyle = "transparent";
ctx.fillStyle = clg;
draw(23);
        
ctx.translate(360, 640);
ctx.fillStyle = "-sharpfc3";
ctx.beginPath();
ctx.arc(0, 0, 25, 0, 2 * Math.PI);
ctx.closePath();
ctx.stroke();
ctx.fill();
ctx.translate(-360, -640);
        
function draw(n) {
    for (var i = 0; i < n; i PP) {
        ctx.translate(360, 640);
        ctx.rotate(2 * Math.PI / n * i);
        clg.addColorStop(0.6, "-sharpff6");
        clg.addColorStop(0.9, "-sharpfc3");
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-50, -640);
        ctx.lineTo(50, -640);
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
        ctx.rotate(-2 * Math.PI / n * i);
        ctx.translate(-360, -640);
    };    
};

this is troublesome to do with css. Generally, no one in the front end will use css to write, mostly using gif dynamic map

painting with canvas plus js, but there are compatibility problems

css radial gradient, you will know at a glance.

basic implementation (search the fan menu). All that's left is to adjust the parameters and deal with the details. I won't do it

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Light</title>
    <style type="text/css">
    .frame {position:relative;margin:200px;width:200px;height:400px;box-shadow:0 0 0 1px -sharpF00 inset;overflow:hidden;}
    .frame .p {position:absolute;display:none;width:200px;height:200px;top:200px;left:100px;background-color:rgba(255,196,196,0.5);transform-origin:left top}
    .frame .p:nth-child(2n+1) {background-color:rgba(196,196,255,0.5);}
    .frame .p00 {display:block;transform:rotate(0deg) skew(60deg);}
    .frame .p01 {display:block;transform:rotate(30deg) skew(60deg);}
    .frame .p02 {display:block;transform:rotate(60deg) skew(60deg);}
    .frame .p03 {display:block;transform:rotate(90deg) skew(60deg);}
    .frame .p04 {display:block;transform:rotate(120deg) skew(60deg);}
    .frame .p05 {display:block;transform:rotate(150deg) skew(60deg);}
    .frame .p06 {display:block;transform:rotate(180deg) skew(60deg);}
    .frame .p07 {display:block;transform:rotate(210deg) skew(60deg);}
    .frame .p08 {display:block;transform:rotate(240deg) skew(60deg);}
    .frame .p09 {display:block;transform:rotate(270deg) skew(60deg);}
    .frame .p10 {display:block;transform:rotate(300deg) skew(60deg);}
    .frame .p11 {display:block;transform:rotate(330deg) skew(60deg);}
    </style>
</head>
<body>
<div class="frame">
    <div class="p p00"></div>
    <div class="p p01"></div>
    <div class="p p02"></div>
    <div class="p p03"></div>
    <div class="p p04"></div>
    <div class="p p05"></div>
    <div class="p p06"></div>
    <div class="p p07"></div>
    <div class="p p08"></div>
    <div class="p p09"></div>
    <div class="p p10"></div>
    <div class="p p11"></div>
</div>
</body>
</html>

Previous: How does Mini Program connect to the local database through a remote server? Use JDBC

Next: When using echarts, to slide echarts on app, it will get stuck, and the switching components will also get stuttered.

If you want to implement the element-ui DatePicker date selector, you can only choose within 7 days.
demand is 1: 15 days after the current time is banned, 2: the date range can only be within 7 days. If the start time is the 2nd, the end time cannot be greater than the 8th, and the rest display mouse display is disabled . have you ever done it, ...

Node.js html5 html css javascript

Feb.28,2021
Domain name issues in wepy development and production environment
We use wepy to develop Mini Program. The development environment and production environment are different domain names. Cut and return the domain names according to the needs of the environment. does not seem to find the relevant configuration in wepy.c...

Node.js html5 html css javascript

Mar.10,2021
When vue clicks delete, how can I be sure which one I clicked?
The page is shown in the figure the question now is: after I click Delete, how can I tell how much id I deleted? HTML Code: <div id="app" class="container"> <table class="table table-hover"> ...

Node.js html5 html css javascript

Mar.10,2021
There is an extra line in the vscode paste.
vscode paste will have an extra line of space after it. How to solve this problem? ...

Node.js html5 html css javascript

Mar.11,2021
You can't use vue data directly in js?
addPermission:function(){ this.$validator.validateAll().then((result) => { if(result){ var finalPath = this.new_path1 + ":" + this.new_path2; console.log(finalPath); underfine } ...

Node.js html5 html css javascript

Mar.12,2021
Navigation contraction doesn't work, but it works after F5 refreshes the page.
as shown in the figure, the control navigation of this button shrinks. 1. As soon as the page opens (that is, after logging in), this button doesn t work at all. 2. But after the F5 refresh, this button works. 3. So I tested the code locally ...

Node.js html5 html css javascript

Mar.13,2021
Input will automatically store the previously entered data, how to clear it?
A created page can be opened for the first time. However, after the input data is submitted, the second time you open input, you will display the previously entered data and I didn t set the yellow background to run out automatically. The projec...

Node.js html5 html css javascript

Mar.13,2021
Used vue_cli, the interviewer asked if webpack should answer?
I have not learned webpack, to learn vue scaffolding as soon as I started. I have done projects independently and packing is normal. Do I answer this question in the interview or not? ...

Node.js html5 html css javascript

Mar.14,2021
About the city selector of vue
first of all, the interface looks like this : 1.elementUI 2.: - 3.: - Mayabeque 4.Mayabeque according to the normal logic, I deleted the country, and the corresponding province should be deleted automatically. <el-select v-model="coun...

Node.js html5 html css javascript

Mar.16,2021
On the failure of ElementUI form value type detection
just started contact with Vue and ElementUI, recently encountered problems in the development process and experienced all kinds of painful debug. Let s get to the point: it seems that you can t transfer files here, so I ll just paste the code: <...

Node.js html5 html css javascript

Mar.18,2021
How to get the currently selected id? in the elementUI table
read the official document and was really deceived. ...

Node.js html5 html css javascript

Mar.18,2021
How do I get the text node in this DOM element?
< div id= test > asdfgh < span class= cancel-btn > < div > how do you get only asdfgh if you want to get it? You can use either jquery or native js. Thank you, guys. Thank you. ...

Node.js html5 html css javascript

Mar.19,2021
Why does vue not recommend global registration components?
if it is a global registration, so that I do not have to introduce each page one by one, isn t it very convenient? Why don t so many people recommend global components? ...

Node.js html5 html css javascript

Mar.20,2021
How to calculate the distance between two div
...

Node.js html5 html css javascript

Mar.20,2021
Vux framework, how to get the id? selected by the check box
the official document is as follows: <checklist title="" :options="commonList" v-model="fruitID">< checklist> {{fruitID}} commonList:[ China , Japan , America ] but the actual project data wi...

Node.js html5 html css javascript

Mar.21,2021
Gaud, how to enter prompts by area
Why can t you press the regional prompt only by the city prompt ...

Node.js html5 html css javascript

Mar.22,2021
Can vue bind global properties?
A toash component, the time I set is 1800 milliseconds, and a project has N pages using toash. If one day the product asks me to change it to 3000 milliseconds, then I have to change it one by one. Is there a good solution? <toast v-model=&qu...

Node.js html5 html css javascript

Mar.22,2021
How do two arrays of vue judge duplicate data?
is doing a tagging module, as follows: my problem: I can choose the same tag the effect I want: the tag cannot choose the same my first thought is to use v-if to determine whether two arrays have the same data, so that they can show and hide, but...

Node.js html5 html css javascript

Mar.23,2021
If the upload of a single picture is changed to that of multiple images, the data will not be received in the background?
<input type="file" multiple accept="image png,image gif,image jpeg" @change="getFile($event)"> input getFile:function(e){ this.file = e.target.files; }, creation:function(){ console.log(this.file); ...

Node.js html5 html css javascript

Mar.23,2021
Ask for advice: use the page of iScroll to cover up the content problem in the header of the latest version of Wechat's built-in browser.
as shown in the figure: normal status: : this page uses iscroll to roll down. I don t know if it has any effect. Only in Wechat built-in browser (QQ Browser) will appear this problem, other browsers are normal, ask Daniel, how to deal with compati...

Node.js html5 html css javascript

Mar.23,2021