主页 / 问题 / 811378
Accepted
Дмитрий Полянин
Asked:2020-04-09 02:38:28 +0800 CST2020-04-09 02:38:28 +0800 CST

用 HTML 制作复活节彩蛋

  • 772

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

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

javascript

3 个回答

  1. 使用 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. 彩蛋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

    带有 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

相关问题