🐻小熊一直注视着你的鼠标动向，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

            
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -20 446.4 686.5">
  <title>Curious Bear</title>
  <g id="bear">
        <ellipse cx="223.2" cy="637.6" rx="223.2" ry="29" fill="#3F1C0C" opacity="0.3"/>
        <g id="body">
          <path d="M376.3,460.3c0,63.2-17.1,120.3-44.7,161.4h0l-4.5,6.5a18.9,18.9,0,0,1-13,5.1H260.5a19.1,19.1,0,0,1-19-19V553.2a124.2,124.2,0,0,1-30.5.3v62a19.1,19.1,0,0,1-19,19H138.5a19,19,0,0,1-15.2-7.6l-0.5-.7C93.4,584.6,75.1,525.7,75.1,460.3c0-125.3,67.4-226.9,150.6-226.9S376.3,335,376.3,460.3Z" fill="#e07320"/>
          <path d="M211,596.9v18.4a19.1,19.1,0,0,1-19,19H138.5a19,19,0,0,1-15.2-7.7l-0.5-.7C93.4,584.6,75.1,525.7,75.1,460.3q0-4.6.1-9.2c1.6,61.6,19.6,117,47.5,156.4l0.5,0.8a19,19,0,0,0,15.2,7.7H192A19.1,19.1,0,0,0,211,596.9Z" fill="#af571d"/>
          <path d="M376.3,459.3c0,63.1-17.1,120.3-44.7,161.4h0l-4.5,6.5a18.9,18.9,0,0,1-13,5.2H260.5a19.1,19.1,0,0,1-19-19V594.9a19.1,19.1,0,0,0,19,19H314a18.9,18.9,0,0,0,13-5.2l4.5-6.5h0c26.3-39.1,43-92.7,44.6-152.2Q376.3,454.7,376.3,459.3Z" fill="#af571d"/>
          <path id="body-stroke" d="M376.3,460.3c0,63.2-17.1,120.3-44.7,161.4h0l-4.5,6.5a18.9,18.9,0,0,1-13,5.1H260.5a19.1,19.1,0,0,1-19-19V553.2a124.2,124.2,0,0,1-30.5.3v62a19.1,19.1,0,0,1-19,19H138.5a19,19,0,0,1-15.2-7.6l-0.5-.7C93.4,584.6,75.1,525.7,75.1,460.3c0-125.3,67.4-226.9,150.6-226.9S376.3,335,376.3,460.3Z" fill="none" stroke="#3f1c0d" stroke-miterlimit="10" stroke-width="10"/>
          <path id="arm-right" d="M294.1,283h0a41.6,41.6,0,0,1,56.7,15.2l67.1,116.3a41.6,41.6,0,0,1-15.2,56.7h0A41.6,41.6,0,0,1,346.1,456L322,414.3Z" fill="#e07320"/>
          <path id="arm-right-shadow" d="M325,410.8s15.1,34.1,20.8,45.2c7,13.6,21.7,20.7,36,20.7a41.1,41.1,0,0,0,20.6-5.5A41.6,41.6,0,0,0,422,425.6a41.3,41.3,0,0,1-40.2,32c-14.4,0-25.5-10.5-35-22.6C332.9,417.4,325,410.8,325,410.8Z" fill="#af571d"/>
          <path id="arm-left" d="M152.4,283h0a41.6,41.6,0,0,0-56.7,15.2L28.6,414.5a41.6,41.6,0,0,0,15.2,56.7h0A41.6,41.6,0,0,0,100.5,456l25.5-42.1Z" fill="#e07320"/>
          <path id="arm-left-shadow" d="M121.2,410.8s-15.1,34.1-20.8,45.2c-7,13.6-21.7,20.7-36,20.7a41.1,41.1,0,0,1-20.6-5.5,41.6,41.6,0,0,1-19.6-45.5,41.3,41.3,0,0,0,40.2,32c14.4,0,25.5-10.5,35-22.6C113.3,417.4,121.2,410.8,121.2,410.8Z" fill="#af571d"/>
          <path id="neck-shadow" d="M351.9,300.1c-33.4,19.3-78.7,27.6-128.6,27.6s-95.2-8.3-128.6-27.6l1.1-1.9a41.6,41.6,0,0,1,40.4-20.5c25-27.9,56-44.4,89.5-44.4s64.3,16.4,89.3,44.1a41.6,41.6,0,0,1,35.9,20.7Z" fill="#af571d"/>
          <path id="arm-right-stroke" d="M294.1,283h0a41.6,41.6,0,0,1,56.7,15.2l67.1,116.3a41.6,41.6,0,0,1-15.2,56.7h0A41.6,41.6,0,0,1,346.1,456L322,414.3" fill="none" stroke="#3f1c0d" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10"/>
          <path id="arm-left-stroke" d="M152.4,283h0a41.6,41.6,0,0,0-56.7,15.2L28.6,414.5a41.6,41.6,0,0,0,15.2,56.7h0A41.6,41.6,0,0,0,100.5,456l24.1-41.7" fill="none" stroke="#3f1c0d" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10"/>
          <path id="belly" d="M304.8,435.8c0,46.9-36.5,85-81.5,85s-81.5-38-81.5-85S179.5,332,224.5,332,304.8,388.9,304.8,435.8Z" fill="#ee9e5c"/>
          <path d="M299.4,504.7a33,33,0,0,1-.4,4.9c-3.7,24.9-35.1,44.4-73.4,44.4s-69.8-19.5-73.4-44.5a32.7,32.7,0,0,1-.3-4.8h0a2.4,2.4,0,0,1,4.5-1.2c10.3,18.9,37.4,32.4,69.3,32.4s58.9-13.5,69.3-32.4a2.4,2.4,0,0,1,4.5,1.2h0Z" fill="#af571d"/>
          <path d="M165.7,533.3c39.9,27.3,80.5,27.7,120,0" fill="none" stroke="#3f1c0d" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10"/>
        </g>
        <g id="head" class="head">
          <g id="ears" class="ears">
            <g>
              <circle cx="92.2" cy="53.9" r="48.9" fill="#e07320" stroke="#3f1c0d" stroke-miterlimit="10" stroke-width="10"/>
              <circle cx="93.1" cy="53.9" r="31.9" fill="#ee9e5c"/>
            </g>
            <g>
              <circle cx="351.6" cy="53.9" r="48.9" fill="#e07320" stroke="#3f1c0d" stroke-miterlimit="10" stroke-width="10"/>
              <circle cx="352.5" cy="53.9" r="31.9" fill="#ee9e5c"/>
            </g>
          </g>
          <path d="M409.6,176.9c0,94.7-83.5,130.1-186.4,130.1S36.8,271.6,36.8,176.9,120.3,5.4,223.2,5.4,409.6,82.2,409.6,176.9Z" fill="#e07320"/>
          <path id="head-stroke" d="M409.6,176.9c0,94.7-83.5,130.1-186.4,130.1S36.8,271.6,36.8,176.9,120.3,5.4,223.2,5.4,409.6,82.2,409.6,176.9Z" fill="none" stroke="#3f1c0d" stroke-miterlimit="10" stroke-width="10"/>
          <g id="eyes" class="eyes">
            <circle cx="291.1" cy="138" r="16.8" fill="#3f1c0c"/>
            <circle cx="287.3" cy="134.2" r="4.8" fill="#884d3a"/>
            <circle cx="155.3" cy="138" r="16.8" fill="#3f1c0c"/>
            <circle cx="152.3" cy="134.2" r="4.8" fill="#884d3a"/>
            <path d="M117.1,106.7l0.5-2.2,0.3-1.1,0.6-1.5a23.6,23.6,0,0,1,1.6-3.5l1.1-1.9,1.3-1.9,0.7-1,0.8-.9,1.7-1.9a33.4,33.4,0,0,1,14.1-8.3,36.2,36.2,0,0,1,5.3-1.1l2.6-.2h4.8l2.1,0.4,1.9,0.4,1.7,0.5,1.5,0.5,1.2,0.5,2.2,1.1a3.2,3.2,0,0,1-1.7,6h-0.4l-2-.2h-6.9l-1.7.2h-0.9l-0.9.2-1.9.3c-1.3.4-2.6,0.6-3.8,1.1a40.3,40.3,0,0,0-3.8,1.5,39.5,39.5,0,0,0-6.9,4.3l-1.4,1.3-0.7.6-0.6.7-1.2,1.3-1,1.3-1,1.2-0.8,1.1-0.7.9-0.6,1-1.2,1.9A3.2,3.2,0,0,1,117.1,106.7Z" fill="#3f1c0d"/>
            <path d="M323.4,109.2l-1.2-1.9-0.6-1-0.7-.9-0.8-1.1-1-1.2-1-1.3-1.2-1.3-0.6-.7-0.7-.6-1.4-1.3a31.6,31.6,0,0,0-10.7-5.8c-1.3-.5-2.6-0.7-3.8-1.1l-1.9-.3-0.9-.2h-0.9l-1.7-.2h-6.9l-2,.2h-0.4a3.2,3.2,0,0,1-1.7-6l2.2-1.1,1.2-.5,1.5-.5,1.7-.5,1.9-.4,2.1-.4h4.8l2.6,0.2a36.2,36.2,0,0,1,5.3,1.1,35.1,35.1,0,0,1,14.1,8.3l1.7,1.9,0.8,0.9,0.7,1,1.3,1.9,1.1,1.9a23.6,23.6,0,0,1,1.6,3.5l0.6,1.5,0.3,1.1,0.5,2.2A3.2,3.2,0,0,1,323.4,109.2Z" fill="#3f1c0d"/>
          </g>
          <g >
            <path class="snout" d="M308.5,230c0,43.6-40.2,52.6-87.3,52.6s-83.3-9-83.3-52.6,38.2-79,85.3-79S308.5,186.3,308.5,230Z" fill="#ee9e5c"/>
            <g class="nose">
              <path d="M197.6,187.5c0-11.1,11.5-11.7,25.6-11.7s25.6,0.7,25.6,11.7-11.5,20-25.6,20S197.6,198.6,197.6,187.5Z" fill="#3f1c0c"/>
              <path d="M227.5,201a13.9,13.9,0,0,1,.2,1.7v4.6a109.6,109.6,0,0,1-.4,14.3c-0.1,1.3-.3,2.6-0.5,3.9s-0.4,2.6-.7,3.8a34.2,34.2,0,0,1-.9,3.5,32.6,32.6,0,0,1-1.2,3,23.6,23.6,0,0,1-1.3,2.4l-1.2,1.8-1.2,1.4a2,2,0,0,1-3.5-1.6v-0.2s0.1-.6.3-1.7,0.2-1.1.3-1.8,0.3-1.5.4-2.4,0.1-.9.2-1.3,0.2-.9.2-1.4,0.3-2,.4-3.1,0.3-2.2.3-3.3,0.1-2.3.1-3.5a101.1,101.1,0,0,0-1-13.1q-0.4-2.7-.6-4.3a13.9,13.9,0,0,1-.2-1.7A5,5,0,0,1,227.5,201Z" fill="#3f1c0d"/>
              <path d="M233.7,244.2l-1.4.2-3.8.3H223l-3.1-.3-3.2-.4a46.8,46.8,0,0,1-6.2-1.4,53.2,53.2,0,0,1-5.3-1.9l-2-1-1.5-1-1.2-1a2.1,2.1,0,0,1,1.3-3.6h3.2l2,0.2,2.4,0.4,2.6,0.4L218,236l5.8,0.9,5.1,1,3.6,0.9,1.4,0.4A2.6,2.6,0,0,1,233.7,244.2Z" fill="#3f1c0d"/>
              <ellipse cx="223.4" cy="183.3" rx="11.7" ry="3.5" fill="#884d3a"/>
            </g>
          </g>
        </g>
      </g>
</svg>

</body>

SCSS

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

            
            body {
  padding:0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: #F9CB3A;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='60px' height='60px' viewBox='0 0 122.1 129.3'%3E %3Cg%3E %3Cpath id='bottom' d='M118.6,74.8c0,20.4-12.7,38.1-31.2,46.9a12.4,12.4,0,0,1-5.3,1.2H40a11.9,11.9,0,0,1-5.1-1.1c-18-8.5-30.6-25.4-31.4-45-0.6-15.2,7.1-28,16.5-39a33.5,33.5,0,0,0,6.2-12.1H95.9A33.4,33.4,0,0,0,102,37.7C111,48.2,118.6,60.3,118.6,74.8Z' fill='%23af571d'/%3E %3Cpath id='top' d='M118.6,74.8a48.8,48.8,0,0,1-5,21.6H8.6A48.3,48.3,0,0,1,3.5,76.7c-0.6-15.2,7.1-28,16.5-39a33.5,33.5,0,0,0,6.2-12.1H95.9A33.4,33.4,0,0,0,102,37.7C111,48.2,118.6,60.3,118.6,74.8Z' fill='%23e07320'/%3E %3Cpath id='shadow' d='M117.1,73.9c0,17.3-9.1,32.7-23.3,42.3a33.9,33.9,0,0,1-19.1,5.7H44.7a34.5,34.5,0,0,1-19.4-5.8,57.6,57.6,0,0,1-5.4-4.2c-0.9-.8.3-2.1,1.3-1.4h0.1c5.4,3.7,12,4,18.8,4H70.5c10.2-.4,16.8-2.4,21.6-6.1,14.3-10.9,20.7-23,20.7-40.3A42.2,42.2,0,0,0,111,56c-0.3-1.1,1.4-1.7,1.9-.6A44.2,44.2,0,0,1,117.1,73.9Z' fill='%23873f16'/%3E %3Cpath id='pot-stroke' d='M118.6,74.8c0,17.3-9.1,32.7-23.3,42.3a33.9,33.9,0,0,1-19.1,5.7H45.9a33.7,33.7,0,0,1-18.8-5.5C13.4,108,4.2,93.3,3.5,76.7s7.1-28,16.5-39a33.5,33.5,0,0,0,6.2-12.1H95.9A33.4,33.4,0,0,0,102,37.7C111,48.2,118.6,60.3,118.6,74.8Z' fill='none' stroke='%233f1c0d' stroke-miterlimit='10' stroke-width='7'/%3E %3Crect x='4.9' y='9.3' width='112.2' height='23.26' rx='6.7' ry='6.7' fill='%23af571d' stroke='%233f1c0d' stroke-miterlimit='10' stroke-width='7'/%3E %3C/g%3E %3Cg id='honey'%3E %3Cpath d='M105.5,28.3h-0.1a5.8,5.8,0,0,1,.1,1V77.6c0,4-3.6,7.3-8,7.3H94.4c-4.4,0-8-3.3-8-7.3V51.1c0-3.6-3.2-6.5-7.1-6.5h-1c-3.9,0-7.1,2.9-7.1,6.5V66.4c0,4-3.6,7.4-8,7.4H60.2c-4.2,0-7.7-3-8-6.8V53.7c0-3.6-3.2-6.5-7.1-6.5H45.1A6.8,6.8,0,0,0,38,53.5h0V84c0,4-3.6,7.3-8,7.3H26.9c-4.4,0-8-3.3-8-7.3V30.5c0-.2,0-0.5,0-0.7a6.2,6.2,0,0,1,.2-1H18.9V17.8C18.9,11.3,24.7,6,31.7,6h67a6.5,6.5,0,0,1,6.7,6.2V28.3Z' fill='%23873f16'/%3E %3Cpath d='M103.5,22.3s0,0.7,0,1.1V71.6c0,4-3.6,7.3-8,7.3H92.3c-4.4,0-8-3.3-8-7.3V45.1c0-3.6-3.2-6.5-7.1-6.5h-1c-3.9,0-7.1,2.9-7.1,6.5V60.4c0,4-3.6,7.4-8,7.4H58.1c-4.2,0-7.7-3-8-6.8V47.7c0-3.6-3.2-6.5-7.1-6.5H43A6.8,6.8,0,0,0,36,47.5h0V78c0,4-3.6,7.3-8,7.3H24.8c-4.4,0-8-3.3-8-7.3V11.8C16.8,5.3,22.6,0,29.7,0h67a6.5,6.5,0,0,1,6.7,6.2V22.3Z' fill='%23f8ca13'/%3E %3Cpath d='M49.1,42.7v1.6a7.2,7.2,0,0,0-6-3.1H43a6.8,6.8,0,0,0-7,6.3h0V78c0,4-3.6,7.3-8,7.3H24.8c-4.4,0-8-3.3-8-7.3V76.6a8.2,8.2,0,0,0,7,3.7h3.1c4.4,0,8-3.3,8-7.3V42.5h0a6.8,6.8,0,0,1,7-6.3h0.1C45.9,36.2,49.1,39.1,49.1,42.7Z' fill='%23ed991d'/%3E %3Cpath d='M83.3,40.1v1.6a7.2,7.2,0,0,0-6-3.1h-1c-3.9,0-7.1,2.9-7.1,6.5V60.4c0,4-3.6,7.4-8,7.4H58.1c-4.2,0-7.7-3-8-6.8V59a8.1,8.1,0,0,0,6.9,3.7h3.1c4.4,0,8-3.3,8-7.4V40.1c0-3.6,3.2-6.5,7.1-6.5h1C80.1,33.6,83.3,36.5,83.3,40.1Z' fill='%23ed991d'/%3E %3Cpath d='M103.5,23.4V71.6c0,4-3.6,7.3-8,7.3H92.3c-4.4,0-8-3.3-8-7.3V70.2a8.1,8.1,0,0,0,6.9,3.7h3.1c4.4,0,8-3.3,8-7.3V18.4a5.4,5.4,0,0,0-.1-1h0.1V2.9a5.8,5.8,0,0,1,1,3.3V23.4Z' fill='%23ed991d'/%3E %3Cpath d='M103.5,28.6v1a5.6,5.6,0,0,0-.1-0.9h0.1Z' fill='%23f8ca13'/%3E %3Crect x='23.9' y='4' width='38.8' height='7.21' rx='3.6' ry='3.6' fill='%23f9f4d6' opacity='0.71'/%3E %3C/g%3E %3C/svg%3E"), auto;
}
svg {
  width: 200px;
}

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

            
            
// select elements
const eyes = document.querySelector(".eyes");
const head = document.querySelector(".head");
const ears = document.querySelector(".ears");
const nose = document.querySelector(".nose");
const snout = document.querySelector(".snout");

// init cursor position
let cursorPos = { x: 0, y: 0 };

// get window size
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;

function setWindowSize() {
    windowWidth = window.innerWidth;
    windowHeight = window.innerHeight;
};

function mousemove(e) {
  cursorPos = { x: e.clientX, y: e.clientY } 
  initFolow();
}

function touchmove(e) {
  cursorPos = { x: e.targetTouches[0].offsetX, y: e.targetTouches[0].offsetY}
  initFolow();
}

const followCursor = (el, xRatio, yRatio) => {
  const elOffset = el.getBoundingClientRect();
  const centerX = elOffset.x + elOffset.width / 2;
  const centerY = elOffset.y + elOffset.height / 2;
  const distanceLeft = Math.round(((cursorPos.x - centerX) * 100) / window.innerWidth);
  const distanceTop = Math.round(((cursorPos.y - centerY) * 100) / window.innerHeight);  
  el.style.transform = `translate(${distanceLeft / xRatio}px, ${distanceTop / yRatio}px)`;
}

const initFolow = () => {
  if (ears) followCursor(ears, -2.8, -2.8)
  if (head) followCursor(head, 6, 6)
  if (eyes) followCursor(eyes, 1.8, 1.8)
  if (snout) followCursor(snout, 1.5, 1.7)
  if (nose) followCursor(nose, 1, 1)
}

window.addEventListener('resize', setWindowSize);
window.addEventListener("mousemove", mousemove);
window.addEventListener("touchmove", touchmove);

预览

控制台