Reagovať obrázok škvrny s myšou účinky

Question 1

Som docela problém tu!

Autor poslal ligth strom, ktorý majú nejaké svetlo škvrny, ktoré sa na myši pri ukázaní by mali zobrazovať menu odkaz na stránku, webové stránky. Nie len, že na vznášať sa, prekrytie shuld byť aktivované zmena odtieň celej stránky (nejaký čierny obal so zníženou nepriehľadnosť)

Problém som stojí, je, že ja naozaj neviem, kde dokonca začať to! Myslel som, že vykonávacie nejaký obrázok, mapu, ale potom neviem, ako to nastaviť vnímavý a je to naozaj ťažké, aby sa mi myslieť na riešenie tohto návrhu výzvou.

Ako môžete vidieť v screenshoty, svetlo strom má byť ako hlavičky pozadí a škvrny by mali byť umiestnené na niektoré špecifické časti stromu.

Pomoc bude naozaj ocenil,

Question 2

Toto by mohla byť východiskovým bodom pre vás. Ako dlho, ako viete, vaša veľkosť snímky, ktorá vo vašom prípade bol 914x913...len mohol použiť position: absolute; a pixlov od ľavého, pravého, horného, spodného v závislosti od toho, kde chcete...a je to len otázka merania (trochu pokusov a omylov príliš). Nájdete útržok kódu...vytvoril som dve "hotspoty" pre vás začíname (uvedené červenou farbou). A v okne, ktoré sa zobrazí, keď vám rollover je tam, môžete hrať s umiestnením a samozrejme štýl je lepší ako obyčajný box. Mimochodom, <span></span> je potrebné iba ak chcete povoliť 'hotspot" byť samostatné inak svietiť bude robiť čudné veci s obrázok na pozadí. No a ak máte v pláne, aby sa táto podpora menších výrezy budete musieť pridať médiá dotazy pre každú nastaviť polohu každý hotspot.

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
  <title>Test</title>

  <style>
    body {
      font-family: sans-serif;
      color: white;
    }

    .container {
      background-image: url('https://i.stack.imgur.com/lzxlC.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      display: flex;
      width: 914px;
      height: 913px;
      margin: 0 auto;
      position: relative;

    }


    /* SPOT 1  */
    .spot-1 {
      position: absolute;
      left: 323px;
      top: 148px;
    }

    .spot-1 span {
      border: 3px solid #FF6F6F;
      border-radius: 50px;
      height: 30px;
      width: 30px;
      display: flex;
      align-self: center;
    }

    .spot-1:hover span {
      box-shadow: 0 0 60px 30px #fff, 0 0 140px 90px #009EAB;
      animation: fadeIn 1s linear;
    }

    .box-1 {
      display: none;
    }

    .spot-1:hover .box-1 {
      display: flex;
      width: 80px;
      height: 25px;
      background: black;
      color: white;
      position: relative;
      left: 50px;
      padding: 12px;
      font-size: 10px;
    }




    /* SPOT 2  */
    .spot-2 {
      position: absolute;
      left: 515px;
      top: 163px;
    }

    .spot-2 span {
      border: 3px solid #FF3F3F;
      border-radius: 50px;
      height: 30px;
      width: 30px;
      display: flex;
      align-self: center;
    }

    .spot-2:hover span {
      box-shadow: 0 0 60px 30px #fff, 0 0 140px 90px #009EAB;
      animation: fadeIn 1s linear;
    }

    .box-2 {
      display: none;
    }

    .spot-2:hover .box-2 {
      display: flex;
      width: 80px;
      height: 25px;
      background: black;
      color: white;
      position: relative;
      left: 50px;
      padding: 12px;
      font-size: 10px;
    }


    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="spot-1"><span></span>
      <div class="box-1">HOWDY!</div>
    </div>

    <div class="spot-2"><span></span>
      <div class="box-2">HI</div>
    </div>

  </div>

</body>

</html>

Authentic Science · Answer 1 · 2021-11-24T00:41:23

Toto by mohla byť východiskovým bodom pre vás. Ako dlho, ako viete, vaša veľkosť snímky, ktorá vo vašom prípade bol 914x913...len mohol použiť position: absolute; a pixlov od ľavého, pravého, horného, spodného v závislosti od toho, kde chcete...a je to len otázka merania (trochu pokusov a omylov príliš). Nájdete útržok kódu...vytvoril som dve "hotspoty" pre vás začíname (uvedené červenou farbou). A v okne, ktoré sa zobrazí, keď vám rollover je tam, môžete hrať s umiestnením a samozrejme štýl je lepší ako obyčajný box. Mimochodom, <span></span> je potrebné iba ak chcete povoliť 'hotspot" byť samostatné inak svietiť bude robiť čudné veci s obrázok na pozadí. No a ak máte v pláne, aby sa táto podpora menších výrezy budete musieť pridať médiá dotazy pre každú nastaviť polohu každý hotspot.

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
  <title>Test</title>

  <style>
    body {
      font-family: sans-serif;
      color: white;
    }

    .container {
      background-image: url('https://i.stack.imgur.com/lzxlC.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      display: flex;
      width: 914px;
      height: 913px;
      margin: 0 auto;
      position: relative;

    }


    /* SPOT 1  */
    .spot-1 {
      position: absolute;
      left: 323px;
      top: 148px;
    }

    .spot-1 span {
      border: 3px solid #FF6F6F;
      border-radius: 50px;
      height: 30px;
      width: 30px;
      display: flex;
      align-self: center;
    }

    .spot-1:hover span {
      box-shadow: 0 0 60px 30px #fff, 0 0 140px 90px #009EAB;
      animation: fadeIn 1s linear;
    }

    .box-1 {
      display: none;
    }

    .spot-1:hover .box-1 {
      display: flex;
      width: 80px;
      height: 25px;
      background: black;
      color: white;
      position: relative;
      left: 50px;
      padding: 12px;
      font-size: 10px;
    }




    /* SPOT 2  */
    .spot-2 {
      position: absolute;
      left: 515px;
      top: 163px;
    }

    .spot-2 span {
      border: 3px solid #FF3F3F;
      border-radius: 50px;
      height: 30px;
      width: 30px;
      display: flex;
      align-self: center;
    }

    .spot-2:hover span {
      box-shadow: 0 0 60px 30px #fff, 0 0 140px 90px #009EAB;
      animation: fadeIn 1s linear;
    }

    .box-2 {
      display: none;
    }

    .spot-2:hover .box-2 {
      display: flex;
      width: 80px;
      height: 25px;
      background: black;
      color: white;
      position: relative;
      left: 50px;
      padding: 12px;
      font-size: 10px;
    }


    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="spot-1"><span></span>
      <div class="box-1">HOWDY!</div>
    </div>

    <div class="spot-2"><span></span>
      <div class="box-2">HI</div>
    </div>

  </div>

</body>

</html>

Reagovať obrázok škvrny s myšou účinky

Otázka

Najlepšiu odpoveď

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii