Adaptacyjne plamy obrazu z efektami przewodnictwa

Question 1

Mam tu dość trudne zadanie!

Projektant przysłał to лигатурное drzewo, w którym istnieje kilka jasnych plam, które po najechaniu myszy, należy wyświetlić menu łącze do strony internetowej. Mało tego, że po najechaniu kursorem zostanie aktywowane nakładki zmieniające odcień całego serwisu (rodzaj czarny nadruk z obniżoną przezroczystości).

Problem, z którym spotykam, polega na tym, że ja naprawdę nie wiem od czego nawet zacząć to! Myślałem zrealizować jakąś kartę zdjęć, ale potem nie wiem, jak jej adaptacji, i naprawdę trudno wymyślić rozwiązanie tego zadania projektowania.

Jak widać na screenach, jasne drzewo powinno być tło nagłówka, a plamy powinny znajdować się nad pewnymi określonymi częściami drzewa.

Pomoc będzie bardzo wdzięczna

Question 2

To może stać się dla ciebie punktem wyjścia. Podczas gdy znasz rozmiar obrazu, który w twoim przypadku był 914x913...można po prostu użyć position: absolute; i piksele, z lewej, z prawej, z góry, z dołu, w zależności od tego, gdzie chcesz...i to tylko kwestia pomiaru (też trochę prób i błędów). Cm. Fragment kodu stworzyłem dwie "gorące punkty" dla ciebie, abyś mógł zacząć (zaznaczone na czerwono). I skrzynia, która pojawia się przy przewróceniu, jest, można grać z pozycjonowaniem i, oczywiście, stylizować ją lepiej, niż zwykłe pudełko. Przy okazji, <span></span> jest to konieczne tylko do tego, aby "gorący punkt" była oddzielnym, inaczej blask będzie robić dziwne rzeczy z twojego tła. O, i jeśli planujesz korzystać z tego wsparcia mniejszych rzutni, trzeba dodać media-wnioski dla każdego, aby dostosować położenie każdego punktu dostępu.

<!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

To może stać się dla ciebie punktem wyjścia. Podczas gdy znasz rozmiar obrazu, który w twoim przypadku był 914x913...można po prostu użyć position: absolute; i piksele, z lewej, z prawej, z góry, z dołu, w zależności od tego, gdzie chcesz...i to tylko kwestia pomiaru (też trochę prób i błędów). Cm. Fragment kodu stworzyłem dwie "gorące punkty" dla ciebie, abyś mógł zacząć (zaznaczone na czerwono). I skrzynia, która pojawia się przy przewróceniu, jest, można grać z pozycjonowaniem i, oczywiście, stylizować ją lepiej, niż zwykłe pudełko. Przy okazji, <span></span> jest to konieczne tylko do tego, aby "gorący punkt" była oddzielnym, inaczej blask będzie robić dziwne rzeczy z twojego tła. O, i jeśli planujesz korzystać z tego wsparcia mniejszych rzutni, trzeba dodać media-wnioski dla każdego, aby dostosować położenie każdego punktu dostępu.

<!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>

Adaptacyjne plamy obrazu z efektami przewodnictwa

Pytanie

Najlepsza odpowiedź

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii