问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

求助，这张背景图能否用css画出来啊？

头像
热饭班长
    3.7k20241349

    如果能的华，怎么画啊，跪求了

    clipboard.png

    javascriptcsshtmlhtml5node.js
    阅读 3.9k
    5 个回答
    得票最新
    头像
    930881306
      27117
      头像
      泊浮目
        4.9k11035

        用canvas大致画了一个。有点差异，具体的效果可以自己改

        var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var clg = ctx.createLinearGradient(0, 0, 0, -640);
ctx.fillStyle = "#fc3";
ctx.fillRect(0, 0, 719, 1280);
ctx.strokeStyle = "transparent";
ctx.fillStyle = clg;
draw(23);
        
ctx.translate(360, 640);
ctx.fillStyle = "#fc3";
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 ++) {
        ctx.translate(360, 640);
        ctx.rotate(2 * Math.PI / n * i);
        clg.addColorStop(0.6, "#ff6");
        clg.addColorStop(0.9, "#fc3");
        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);
    };    
};
        头像
        blueangel
          50864563

          这个用css做得有多麻烦，一般前端没人会用css写，大多采用gif动态图

          头像
          Futurefinger
            98720180204

            用canvas加js绘画，不过有兼容问题

            头像
            leadream
              1151514

              css径向渐变，你百度一下就知道了。

              头像
              Fractal
                5.5k22433

                基础实现（去搜下 扇形菜单），剩下就是调整参数和细节处理，我就不弄了
                图片描述

                <!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 #F00 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>
                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题