Vurgulu efektlerle duyarlı görüntü noktaları

Question 1

Burada büyük bir meydan okumam var!

Tasarımcı, fare imlecinde web sitesindeki bir sayfaya bir menü bağlantısı göstermesi gereken bazı ışık noktalarına sahip olan bu ligth ağacını gönderdi. Sadece bu değil, vurgulu olduğunda, tüm sitenin renk tonunu değiştiren bir kaplama etkinleştirilmelidir (azaltılmış opaklığa sahip bir çeşit siyah kaplama)

Bunu başlatmak için bilmiyorum ben bakan değilim sorundur. Bir çeşit görüntü haritası uygulamayı düşündüm, ancak nasıl duyarlı hale getirileceğini bilmiyorum ve bu tasarım zorluğu için bir çözüm düşünmek benim için gerçekten zor.

Ekran görüntülerinde görebileceğiniz gibi, ışık ağacı başlık arka planı olarak olmalı ve noktalar ağacın belirli bölümlerinin üzerine yerleştirilmelidir.

Yardım gerçekten takdir edilecektir

Question 2

Bu senin için bir başlangıç noktası olabilir. Sizin durumunuzda 914x913 olan görüntü boyutunuzu bildiğiniz sürece...sadece kullanabilirsiniz position: absolute; ve istediğiniz yere bağlı olarak soldan, sağdan, yukarıdan, aşağıdan pikseller...ve bu sadece bir ölçüm meselesidir (biraz deneme yanılma da). Kod parçacığına bakın...Başlamanız için iki 'sıcak nokta' oluşturdum (kırmızı ile özetlendi). Ve devrilme sırasında görünen kutu oradadır, konumlandırma ile oynayabilir ve açıkça düz bir kutudan daha iyi stil verebilirsiniz. Bu arada <span></span> sadece 'sıcak noktanın' ayrı olmasına izin vermek için gereklidir, aksi takdirde parıltı arka plan resminizle garip şeyler yapar. Oh ve bu desteği daha küçük görünümlere sahip olmayı planlıyorsanız, her etkin noktanın konumunu ayarlamak için her biri için medya sorguları eklemeniz gerekir.

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

Bu senin için bir başlangıç noktası olabilir. Sizin durumunuzda 914x913 olan görüntü boyutunuzu bildiğiniz sürece...sadece kullanabilirsiniz position: absolute; ve istediğiniz yere bağlı olarak soldan, sağdan, yukarıdan, aşağıdan pikseller...ve bu sadece bir ölçüm meselesidir (biraz deneme yanılma da). Kod parçacığına bakın...Başlamanız için iki 'sıcak nokta' oluşturdum (kırmızı ile özetlendi). Ve devrilme sırasında görünen kutu oradadır, konumlandırma ile oynayabilir ve açıkça düz bir kutudan daha iyi stil verebilirsiniz. Bu arada <span></span> sadece 'sıcak noktanın' ayrı olmasına izin vermek için gereklidir, aksi takdirde parıltı arka plan resminizle garip şeyler yapar. Oh ve bu desteği daha küçük görünümlere sahip olmayı planlıyorsanız, her etkin noktanın konumunu ayarlamak için her biri için medya sorguları eklemeniz gerekir.

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

Vurgulu efektlerle duyarlı görüntü noktaları

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride