Imagine receptiv pete cu efecte hover

Question 1

Am destul de o provocare aici!

Designerul a trimis acest ligth copac care avea niște pete de lumină pe hover mouse-ul ar trebui să afișeze un meniu link către o pagină în site-ul web. Nu numai că, pe deasupra, o suprapunere shuld fi activat schimbarea tentă de tot site-ul (un fel de negru suprapunere cu opacitate redusă)

Problema ma confrunt este că eu chiar nu știu de unde să încep chiar asta! M-am gândit de punere în aplicare un fel de imagine hartă, dar apoi nu știu cum să-l setați receptiv și e foarte greu pentru mine să cred că o soluție pentru această provocare de design.

După cum puteți vedea în screenshot, lumina copac trebuie să fie la fel de fundal antet și petele ar trebui să fie poziționat pe anumite părți ale arborelui.

Ajutor va fi apreciat foarte mult

Question 2

Acest lucru ar putea fi un punct de plecare pentru tine. Atâta timp cât știi dimensiunea imaginii, care, în cazul tău a fost 914x913...ai putea folosi doar position: absolute; și pixeli la stânga, dreapta, sus, jos, în funcție de locul unde doriți...și e doar o chestiune de măsurare (un pic de studiu și de eroare prea). A se vedea fragmentul de cod...am creat două "hotspot-uri" pentru tine pentru a obține a început (subliniat cu rosu). Și caseta care apare atunci când rollover este acolo, poți să te joci cu poziționarea și, evident, de stil mai mult decât o simplă cutie. Apropo, <span></span> este nevoie de doar pentru a permite "hotspot" pentru a fi separate, în caz contrar, lumina va face lucruri ciudate cu imaginea de fundal. Oh, și dacă aveți de gând de a avea acest sprijin ferestre mai mici, va trebui să adăugați interogări mass-media pentru fiecare pentru a regla poziția de fiecare 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

Acest lucru ar putea fi un punct de plecare pentru tine. Atâta timp cât știi dimensiunea imaginii, care, în cazul tău a fost 914x913...ai putea folosi doar position: absolute; și pixeli la stânga, dreapta, sus, jos, în funcție de locul unde doriți...și e doar o chestiune de măsurare (un pic de studiu și de eroare prea). A se vedea fragmentul de cod...am creat două "hotspot-uri" pentru tine pentru a obține a început (subliniat cu rosu). Și caseta care apare atunci când rollover este acolo, poți să te joci cu poziționarea și, evident, de stil mai mult decât o simplă cutie. Apropo, <span></span> este nevoie de doar pentru a permite "hotspot" pentru a fi separate, în caz contrar, lumina va face lucruri ciudate cu imaginea de fundal. Oh, și dacă aveți de gând de a avea acest sprijin ferestre mai mici, va trebui să adăugați interogări mass-media pentru fiecare pentru a regla poziția de fiecare 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>

Imagine receptiv pete cu efecte hover

Problema

Cel mai bun răspuns

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie