色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

在頁面上執(zhí)行操作后顯示文本/鏈接

CSS
榮姿康2年前8瀏覽0評論

我怎樣才能在頁面上顯示隱藏的文本，直到一個特定的動作發(fā)生，比如拉動燈泡上的細繩來開燈？

我試著向上看& quot在html & quot但不幸的是，我找不到我想要做的事情。如果有人能對此有所幫助，那就太好了！

const {
  gsap: {
    registerPlugin,
    set,
    to,
    timeline
  },
  MorphSVGPlugin,
  Draggable
} =
window;
registerPlugin(MorphSVGPlugin);

// Used to calculate distance of "tug"
let startX;
let startY;

const AUDIO = {
  CLICK: new Audio('https://assets.codepen.io/605876/click.mp3')
};

const STATE = {
  ON: false
};

const CORD_DURATION = 0.1;

const CORDS = document.querySelectorAll('.toggle-scene__cord');
const HIT = document.querySelector('.toggle-scene__hit-spot');
const DUMMY = document.querySelector('.toggle-scene__dummy-cord');
const DUMMY_CORD = document.querySelector('.toggle-scene__dummy-cord line');
const PROXY = document.createElement('div');
// set init position
const ENDX = DUMMY_CORD.getAttribute('x2');
const ENDY = DUMMY_CORD.getAttribute('y2');
const RESET = () => {
  set(PROXY, {
    x: ENDX,
    y: ENDY
  });

};

RESET();

const CORD_TL = timeline({
  paused: true,
  onStart: () => {
    STATE.ON = !STATE.ON;
    set(document.documentElement, {
      '--on': STATE.ON ? 1 : 0
    });
    set([DUMMY, HIT], {
      display: 'none'
    });
    set(CORDS[0], {
      display: 'block'
    });
    AUDIO.CLICK.play();
  },
  onComplete: () => {
    set([DUMMY, HIT], {
      display: 'block'
    });
    set(CORDS[0], {
      display: 'none'
    });
    RESET();
  }
});


for (let i = 1; i < CORDS.length; i++) {
  CORD_TL.add(
    to(CORDS[0], {
      morphSVG: CORDS[i],
      duration: CORD_DURATION,
      repeat: 1,
      yoyo: true
    }));


}

Draggable.create(PROXY, {
  trigger: HIT,
  type: 'x,y',
  onPress: e => {
    startX = e.x;
    startY = e.y;
  },
  onDrag: function() {
    set(DUMMY_CORD, {
      attr: {
        x2: this.x,
        y2: this.y
      }
    });


  },
  onRelease: function(e) {
    const DISTX = Math.abs(e.x - startX);
    const DISTY = Math.abs(e.y - startY);
    const TRAVELLED = Math.sqrt(DISTX * DISTX + DISTY * DISTY);
    to(DUMMY_CORD, {
      attr: {
        x2: ENDX,
        y2: ENDY
      },
      duration: CORD_DURATION,
      onComplete: () => {
        if (TRAVELLED > 50) {
          CORD_TL.restart();
        } else {
          RESET();
        }
      }
    });

  }
});

* {
  box-sizing: border-box;
}

:root {
  --on: 0;
  --bg: hsl(calc(200 - (var(--on) * 160)), calc((20 + (var(--on) * 50)) * 1%), calc((20 + (var(--on) * 60)) * 1%));
  --cord: hsl(0, 0%, calc((60 - (var(--on) * 50)) * 1%));
  --stroke: hsl(0, 0%, calc((60 - (var(--on) * 50)) * 1%));
  --shine: hsla(0, 0%, 100%, calc(0.75 - (var(--on) * 0.5)));
  --cap: hsl(0, 0%, calc((40 + (var(--on) * 30)) * 1%));
  --filament: hsl(45, calc(var(--on) * 80%), calc((25 + (var(--on) * 75)) * 1%));
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.toggle-scene {
  overflow: visible !important;
  height: 50vmin;
  position: absolute;
}

.toggle-scene__cord {
  stroke: var(--cord);
  cursor: move;
}

.toggle-scene__cord:nth-of-type(1) {
  display: none;
}

.toggle-scene__cord:nth-of-type(2),
.toggle-scene__cord:nth-of-type(3),
.toggle-scene__cord:nth-of-type(4),
.toggle-scene__cord:nth-of-type(5) {
  display: none;
}

.toggle-scene__cord-end {
  stroke: var(--cord);
  fill: var(--cord);
}

.toggle-scene__dummy-cord {
  stroke-width: 6;
  stroke: var(--cord);
}

.bulb__filament {
  stroke: var(--filament);
}

.bulb__shine {
  stroke: var(--shine);
}

.bulb__flash {
  stroke: #f5e0a3;
  display: none;
}

.bulb__bulb {
  stroke: var(--stroke);
  fill: hsla(calc(180 - (95 * var(--on))), 80%, 80%, calc(0.1 + (0.4 * var(--on))));
}

.bulb__cap {
  fill: var(--cap);
}

.bulb__cap-shine {
  fill: var(--shine);
}

.bulb__cap-outline {
  stroke: var(--stroke);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Reveal Classified