RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 811378
Accepted
Дмитрий Полянин
Дмитрий Полянин
Asked:2020-04-09 02:38:28 +0000 UTC2020-04-09 02:38:28 +0000 UTC 2020-04-09 02:38:28 +0000 UTC

用 HTML 制作复活节彩蛋

  • 772

任务是使用任何 WEB 技术制作复活节彩蛋。

HTML、CSS、SVG、Canvas、JavaScript,你可以使用任何技术和技巧。

javascript
  • 3 3 个回答
  • 10 Views

3 个回答

  • Voted
  1. Дмитрий Полянин
    2020-04-09T02:38:28Z2020-04-09T02:38:28Z

    使用 scss 生成的 CSS 代码。为了选择颜色的和谐组合,使用了颜色坐标系中hue相同的统一偏移。HSL

    $baseColor: hsl(225, 100%, 84%);
    
    @for $i from 0 through 11 {
      .c#{$i} { fill: adjust-hue($baseColor, 36 * $i); };
    }
    

    使用模式和翻转。

    以全屏模式观看。

    html {
      height: 100%;
    }
    
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      align-content: center;
      height: 100%;
    }
    
    .str {
      stroke: #7247cb;
      stroke-width: 5px;
    }
    
    .str2 {
      stroke: #7247cb;
      stroke-width: 2px;
    }
    
    .c0 {
      fill: #adc2ff;
    }
    
    .c1 {
      fill: #caadff;
    }
    
    .c2 {
      fill: #fbadff;
    }
    
    .c3 {
      fill: #ffadd2;
    }
    
    .c4 {
      fill: #ffbaad;
    }
    
    .c5 {
      fill: #ffebad;
    }
    
    .c6 {
      fill: #e2ffad;
    }
    
    .c7 {
      fill: #b1ffad;
    }
    
    .c8 {
      fill: #adffda;
    }
    
    .c9 {
      fill: #adf3ff;
    }
    
    .c10 {
      fill: #adc2ff;
    }
    
    .c11 {
      fill: #caadff;
    }
    <svg id="svg1" style="width:500px; height: 500px;" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink">
        <defs>
            <symbol id="el1" width="50" height="50" viewBox="0 0 50 50">
                <rect x="-5" y="-5" width="60" height="60" class="str" />
                <line class="str " x1="-5" y1="-5" x2="55" y2="55" />
                <path d="M 30 -5 L -5 30 L -5 -5 Z" class="c5 str" />
                <circle cx="50" cy="50" r="26" class="c6 str" />
                 <circle cx="50" cy="50" r="16" class="c10 str" />
            </symbol>
            <symbol id="big1" width="100" height="100" viewBox="-50 -50 100 100">
                <use width="50" height="50"  href="#el1" transform=""/>
                <use width="50" height="50"  href="#el1" transform="scale(-1, -1)"/>
                <use width="50" height="50" href="#el1" transform="scale(-1, 1)"/>
                <use width="50" height="50" href="#el1" transform="scale(1, -1)"/>
            </symbol>
            <pattern id="pat1" width="56" height="56" viewBox="0 0 200 200" patternUnits="userSpaceOnUse">
                <use x="0" y="0" width="100"  height="100" href="#big1" class="c1"/>
                <use x="100" y="0" width="100"  height="100" href="#big1" class="c3"/>
                <use x="0" y="100" width="100"  height="100" href="#big1" class="c4"/>
                <use x="100" y="100" width="100"  height="100" href="#big1" class="c2"/>
            </pattern>
        </defs>
        
        <ellipse class="str2" cx="250" cy="250" rx="200" ry="246" fill="url(#pat1)"></ellipse>
        <text class="str2" x="50%" text-anchor="middle" y="320" width="100%" font-family="Arial" font-weight="bold" font-size="194" fill="white">
            ХВ
        </text>
    </svg>

    • 8
  2. MobiDevices
    2020-04-09T03:01:48Z2020-04-09T03:01:48Z

    彩蛋Inkscape:

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path fill="#54b88b" d="M256 512c105.317 0 190.694-85.376 190.694-190.694C446.694 160.245 339.791 0 256 0S65.306 160.245 65.306 321.306C65.306 426.624 150.683 512 256 512z"/>
      <path fill="#fbdd56" d="M256 0c-51.928 0-112.73 61.547-151.465 146.689 42.849 6.937 92.412 10.808 151.465 10.808s108.616-3.871 151.465-10.808C368.729 61.547 307.928 0 256 0z"/>
      <path fill="#b5e489" d="M65.322 322.529C65.981 427.282 151.092 512 256 512s190.019-84.718 190.678-189.471c0 0-74.056-33.831-190.678-33.831S65.322 322.529 65.322 322.529z"/>
      <path fill="#fff" d="M436.035 371.327c-10.841 1.967-21.948-1.5-29.716-9.267-18.918-18.916-49.695-18.917-68.613.001-6.33 6.33-14.747 9.817-23.699 9.817-8.953 0-17.37-3.486-23.7-9.817-18.918-18.916-49.695-18.916-68.613 0-13.069 13.068-34.332 13.068-47.4 0-18.918-18.915-49.696-18.917-68.612 0a33.555 33.555 0 0 1-29.717 9.267 7.447 7.447 0 0 0-3.912.34 188.965 188.965 0 0 0 4.74 14.91c14.535 1.555 29.085-3.501 39.496-13.91 13.066-13.068 34.332-13.068 47.398 0 18.917 18.914 49.695 18.916 68.614 0 13.066-13.068 34.332-13.068 47.398 0 9.164 9.163 21.348 14.21 34.308 14.21 12.959 0 25.143-5.047 34.307-14.21 13.066-13.068 34.331-13.068 47.399 0 10.41 10.409 24.958 15.465 39.495 13.91a189.439 189.439 0 0 0 4.739-14.907 7.44 7.44 0 0 0-3.912-.344zm-64.022 37.227c-12.959 0-25.143 5.047-34.307 14.21-13.066 13.069-34.331 13.067-47.399.001-9.164-9.164-21.348-14.211-34.307-14.211-12.959 0-25.143 5.047-34.306 14.21-13.068 13.069-34.332 13.067-47.4.001-9.164-9.164-21.348-14.211-34.307-14.211s-25.143 5.047-34.306 14.21a33.43 33.43 0 0 1-7.489 5.616 191.353 191.353 0 0 0 8.982 12.138 48.389 48.389 0 0 0 9.113-7.147c6.33-6.33 14.747-9.816 23.699-9.816 8.952 0 17.369 3.486 23.7 9.817 18.917 18.916 49.696 18.915 68.613-.001 6.33-6.33 14.747-9.816 23.699-9.816 8.952 0 17.369 3.486 23.7 9.817 18.914 18.915 49.695 18.917 68.613-.001 6.33-6.33 14.747-9.816 23.699-9.816s17.369 3.486 23.7 9.817a48.379 48.379 0 0 0 9.114 7.144 191.282 191.282 0 0 0 8.98-12.136 33.423 33.423 0 0 1-7.488-5.614c-9.161-9.165-21.344-14.212-34.303-14.212z"/>
      <path fill="#f985ac" d="M256 0c-39.849 0-84.925 36.245-121.244 91.584 30.73 9.749 68.731 15.668 121.244 15.668s90.514-5.919 121.244-15.668C340.925 36.245 295.849 0 256 0z"/>
      <g fill="#fbdd56">
        <circle cx="256" cy="53.626" r="21.275"/>
        <path d="M191.542 27.026c-9.843 7.842-19.569 17.215-28.995 27.902 3.393 7.244 10.728 12.274 19.257 12.274 11.75 0 21.275-9.525 21.275-21.275-.001-8.237-4.691-15.366-11.537-18.901zm128.916 0c9.843 7.842 19.569 17.215 28.995 27.902-3.393 7.244-10.728 12.274-19.257 12.274-11.75 0-21.275-9.525-21.275-21.275.001-8.237 4.691-15.366 11.537-18.901z"/>
      </g>
      <path fill="#414b58" d="M188.498 225.556a7.499 7.499 0 0 1-7.5-7.5v-11.394c0-4.143 3.357-7.5 7.5-7.5s7.5 3.357 7.5 7.5v11.394a7.5 7.5 0 0 1-7.5 7.5zM256 246.005c-10.621 0-19.232-8.61-19.232-19.232v-13.982a5.25 5.25 0 0 1 5.25-5.25h27.963a5.25 5.25 0 0 1 5.25 5.25v13.982c.001 10.622-8.61 19.232-19.231 19.232zm67.502-20.449a7.499 7.499 0 0 1-7.5-7.5v-11.394c0-4.143 3.357-7.5 7.5-7.5a7.5 7.5 0 0 1 7.5 7.5v11.394a7.5 7.5 0 0 1-7.5 7.5z"/>
      <path d="M245.489.818C163.545 13.268 65.306 166.909 65.306 321.306 65.306 426.624 150.683 512 256 512c9.39 0 18.618-.691 27.645-2.002C101.718 432.107 182.812 75.73 245.489.818z" opacity=".1"/>
    </svg>

    • 6
  3. Best Answer
    Bharatha
    2020-05-26T04:37:18Z2020-05-26T04:37:18Z

    带有 Canvas 和 JavaScript 的复活节彩蛋:

    var canvas = document.getElementById('canvas'),
    	canvas2 = document.createElement('canvas'),
    	ctx = canvas.getContext('2d'),
    	ctx2 = canvas2.getContext('2d');
    
    canvas2.width = canvas2.height = 50;
    
    ctx2.lineWidth = 5;
    ctx2.fillStyle = '#8f0';
    ctx2.fillRect(0, 0, 50, 50);
    ctx2.strokeStyle = '#80f';
    ctx2.fillStyle = '#0ae';
    
    ctx2.beginPath();
    ctx2.moveTo(0, 25);
    ctx2.lineTo(25, 0);
    ctx2.lineTo(50, 25);
    ctx2.lineTo(25, 50);
    ctx2.lineTo(0, 25);
    ctx2.stroke();
    ctx2.fill();
    
    ctx2.strokeStyle = '#8f0';
    ctx2.fillStyle = '#00ae00';
    ellipse(ctx2, 25, 25, 15, 15);
    ctx2.fill();
    ctx2.fillStyle = '#80f';
    ellipse(ctx2, 25, 25, 9, 9);
    ctx2.fill();
    ctx2.stroke();
    
    ctx.lineWidth = 2;
    //следующая строка будет работать не везде
    //ctx.ellipse(130, 195, 125, 170, 0, 0, 2 * Math.PI);
    ellipse(ctx, 130, 195, 125, 170);
    
    ctx.strokeStyle = '#80f';
    ctx.fillStyle = ctx.createPattern(canvas2, 'repeat');
    ctx.fill();
    ctx.stroke();
    
    ctx.font = 'bold 164px "Palatino Linotype",serif';
    ctx.fillStyle = '#ddd';
    ctx.fillText('ХВ', 20, 250);
    ctx.strokeText('ХВ', 20, 250);
    
    //stackoverflow.com/a/8372834/
    function ellipse(ctx, cx, cy, rx, ry)
    {
    	ctx.save();
    	ctx.beginPath(); 
    	ctx.translate(cx - rx, cy - ry);
    	ctx.scale(rx, ry);
    	ctx.arc(1, 1, 1, 0, 2 * Math.PI, false);
    	ctx.restore();
    }
    <canvas id="canvas" width="500" height="500"></canvas>

    • 4

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    是否可以在 C++ 中继承类 <---> 结构?

    • 2 个回答
  • Marko Smith

    这种神经网络架构适合文本分类吗?

    • 1 个回答
  • Marko Smith

    为什么分配的工作方式不同?

    • 3 个回答
  • Marko Smith

    控制台中的光标坐标

    • 1 个回答
  • Marko Smith

    如何在 C++ 中删除类的实例?

    • 4 个回答
  • Marko Smith

    点是否属于线段的问题

    • 2 个回答
  • Marko Smith

    json结构错误

    • 1 个回答
  • Marko Smith

    ServiceWorker 中的“获取”事件

    • 1 个回答
  • Marko Smith

    c ++控制台应用程序exe文件[重复]

    • 1 个回答
  • Marko Smith

    按多列从sql表中选择

    • 1 个回答
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Suvitruf - Andrei Apanasik 什么是空? 2020-08-21 01:48:09 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5