Блог

Я хочу воспроизвести первый слайд слайдера на https://ltts.com. Если вы видите это, круги, расположенные вдоль тонкой арки svg в фоновом режиме, остаются «застрявшими» на арке, даже когда вы изменяете размер страницы в адаптивном режиме.

Там, где я достиг, на экране шириной 1366 пикселей он выглядит идеально, но в тот момент, когда я уменьшаю ширину экрана в элементе просмотра браузера, круги оставляют выравнивание с аркой svg позади. Как я могу сделать так, чтобы круги последовательно касались svg арки сзади, даже при уменьшении размера окна, скажем, до 800 пикселей? Изображение прилагается для справки. Спасибо.

На сайте, о котором я упоминал, https://ltts.com/, при осмотре элемента каждая из этих «маркированных точек» имеет margin-left отрицательные пиксели. Как фиксированное число может соответствовать им, меня поражает.

HTML — index.html :

 <div class="slider" id="slides">
    <div class="slider-content">
        <div class="left-content"></div>

        <div class="right-content">
            <img src="BG Line.svg" id="circle">
            <div id="slidermenus">

                <a href="#" class="menu1">
                    <div id="c1">
                        <div class="sc"></div>
                    </div>
                    <div id="menu1txt">Becoming Virtual</div>
                </a>
                <a href="#" class="menu2">
                    <div id="c2">
                        <div class="sc"></div>
                    </div>
                    <div id="menu2txt">Digital Manufacturing</div>
                </a>
                <a href="#" class="menu3">
                    <div id="c3">
                        <div class="sc"></div>
                    </div>
                    <div id="menu3txt">Cybersecurity</div>
                </a>
                <a href="#" class="menu4">
                    <div id="c4">
                        <div class="sc"></div>
                    </div>
                    <div id="menu4txt">Industry AI</div>
                </a>
                <a href="#" class="menu5">
                    <div id="c5">
                        <div class="sc"></div>
                    </div>
                    <div id="menu5txt">Engineering As A Service</div>
                </a>
                <a href="#" class="menu6">
                    <div id="c6">
                        <div class="sc"></div>
                    </div>
                    <div id="menu6txt">Workplace Safety</div>
                </a>
            </div>
        </div>
 

CSS — style.css :

 .slider {
    width: 100%;
    height: 100vh;
    background: url('https://aronlabz.tech/wp-content/uploads/2021/10/slider2-scaled.jpg') no-repeat center/cover;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  
  .slider-content {
    display: flex;
    align-items: center;
    height: 100vh;
    padding: 0px 90px;
    overflow: hidden;
  }
  
  .left-content {
    flex: 1 0 70%;
  }
  
  
  .right-content {
    position: relative;
    flex: 1 0 30%;
    height: 100%;
  }
  
  .right-content #circle {
    width: 100%;
    height: 200%;
    position: absolute;
    left: -80%;
    top: -50%;
  }
  
  .right-content #slidermenus {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto 0;
  }
  
  .menu1, .menu2, .menu3, .menu4, .menu5, .menu5, .menu6 {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    cursor: pointer;
    text-decoration: none;
  }
  
  .sc {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    margin: auto;
  }
  
  #c1, #c2, #c3, #c4, #c5, #c6 {
    padding: 15px;
    border: 1px solid white;
    border-radius: 50%;
  }
  
  .menu1 {
    transform: translateX(-3.4vw);
  }
  .menu2 {
    transform: translateX(-2vw);
  }
  .menu3 {
    transform: translateX(-1.2vw);
  }
  .menu4 {
    transform: translateX(-1.1vw);
  }
  .menu5 {
    transform: translateX(-1.5vw);
  }
  .menu6 {
    transform: translateX(-2.7vw);
  }
  
  #menu1txt, #menu2txt, #menu3txt, #menu4txt, #menu5txt, #menu6txt {
    margin-left: 20px;
    font-size: 20px;
    font-family: sans-serif;
    color: white;
    font-family: 100;
  }
 

Фоновая арка — BG Line.svg :

 <svg xmlns="http://www.w3.org/2000/svg" width="205.98" height="900.263" viewBox="0 0 205.98 900.263">
<g id="prefix__Ellipse_4" data-name="Ellipse 4" transform="translate(-966.77 -143.534)">
<path id="prefix__Path_25" d="M966.934 143.723C1092.969 253.532 1172.5 414.966 1172.5 594.976c0 178.687-78.366 339.07-202.577 448.634" data-name="Path 25" style="fill:none;stroke:#23d400;stroke-width:2px"/>
</g>
</svg>