Как сделать так, чтобы абсолютная анимация CSS реагировала? - PullRequest
Новая
       28

Как сделать так, чтобы абсолютная анимация CSS реагировала?

0 голосов
/ 21 ноября 2018

Итак, я получил эту анимацию css с 5 из этих кругов, вращающихся между текстом;

(каждый из них имеет разный размер) 

#circle .circle1{
    position: absolute;
    top: 1330px;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto;
    height: 500px;
    width: 500px;
    border-radius: 50%;
    display: inline-block;
    border-top: 20px solid #5E0DAC;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #5E0DAC;
    border-left: 20px solid transparent;
    animation-name: circle1;
    animation-duration: 18s;
    animation-iteration-count: infinite;
    animation-delay: -1s;
    animation-timing-function: linear;
}

#circle .circle2{
    position: absolute;
    top: 1380px;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto;
    height: 400px;
    width: 400px;
    border-radius: 50%;
    display: inline-block;
    border-top: 20px solid #B90091;
    border-right: 20px solid #B90091;
    border-bottom: 20px solid transparent;
    border-left: 20px solid transparent;
    animation-name: circle2;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-delay: -1s;
    animation-timing-function: linear;
}

#circle .circle3{
    position: absolute;
    top: 1480px;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    display: inline-block;
    border-top: 20px solid #5E0DAC;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #5E0DAC;
    border-left: 20px solid transparent;
    animation-name: circle1;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-delay: -1s;
    animation-timing-function: linear;
}



#circle .circle4{
    position: absolute;
    top: 1430px;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto;
    height: 300px;
    width: 300px;
    border-radius: 50%;
    display: inline-block;
    border-top: 20px solid #5E0DAC;
    border-right: 20px solid #5E0DAC;
    border-bottom: 20px solid transparent;
    border-left: 20px solid transparent;
    animation-name: circle1;
    animation-duration: 13s;
    animation-iteration-count: infinite;
    animation-delay: -1s;
    animation-timing-function: linear;
}

#circle .circle5{
    position: absolute;
    top: 1530px;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    display: inline-block;
    background-color: #B90091;
}


@keyframes circle2{
    0% {transform: rotate(-360deg)}
}


@keyframes circle1{
    0% {transform: rotate(360deg)}
}
<html>
    <div id="circle">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
            <div class="circle5"></div>
          </div> 

</html>

Какой самый простой способ сделать анимацию отзывчивой?Я должен был бы отредактировать каждый пиксель для высоты и ширины в медиа-запросах для этого.

Спрашивать, есть ли более простой способ.

Приветствия

Ответы [ 2 ]

0 голосов
/ 22 ноября 2018

Спасибо за помощь, это действительно помогло мне!

Так что я понял, мне просто нужно было дать родительскому элементу #circle позицию: относительный;атрибут, и поэтому я просто должен выровнять этот один элемент. 

#circle{
position: relative;
bottom: 750px;
0 голосов
/ 21 ноября 2018

Это может быть не полный ответ на вашу проблему, так как он не на 100% отзывчив, но является отправной точкой для облегчения работы с медиа-запросами.

Код более классифицирован на основе, например, для каждогоКольцо имеет фиолетовый или розовый класс, чтобы получить его цвет, и все общие элементы между кругами теперь находятся в одном классе.

Различия, такие как время анимации и положение, теперь сопоставляются с отдельными идентификаторами длякаждое кольцо и, что более важно, кольца основаны на процентах относительно друг друга.Внешнее кольцо, которое я принял за 100% при 500px, использовалось в качестве основы, и позиционные элементы были взяты относительно этого.

Я добавил новый контейнер div для удержания и позиционирования анимации окружности, как вы считаете нужным,Он будет пытаться вытолкнуть себя в соответствии с размерами этого пространства, чтобы вы могли настроить его высоту и ширину в медиа-запросах, как вам нужно.Вы также можете настроить такие параметры, как ширина границы в медиа-запросах, чтобы она выглядела более по отношению к общему размеру.

Если честно, если бы я занимался анимацией с нуля, я бы посмотрел на SVGрешение на основе. 

.circleHolder {
  height: 540px; /* main ring is 500px + the 40px (for the border @20px) */
  width: 540px; /*     border-width:20px; /* media queries should target this value and the height */
  top: 200px; 
  left: 200px;
  position:absolute;
}

#circle {
  height: 100%;
  width: 100%;
  position:relative;

}

.circle {
    border-radius: 50%;
    display: inline-block;
    margin: 0 auto;
    text-align:center;
    animation-iteration-count: infinite;
    animation-delay: -1s;
    animation-timing-function: linear;
    position:absolute;
    border-style: solid;
    border-width:20px; /* media queries should target this value */ 

}


.purpleCircle {

        border-top-color: #5E0DAC;
        border-right-color: transparent;
        border-bottom-color: #5E0DAC;
        border-left-color: transparent;  

}

.pinkCircle {
    border-top-color: #B90091;
    border-right-color: #B90091;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.circle1{ 
    height: 100%;
    width: 100%;  
    animation-name: circle1;
    animation-duration: 18s;
}

.circle2{
    
    top:  10%;
    left: 10%;
    height: 80%;
    width: 80%;  
    animation-name: circle2;
    animation-duration: 8s;
}

.circle3{
    top: 30%;
    left: 30%;
    height: 40%;
    width: 40%;  
    animation-name: circle1;
    animation-duration: 6s;
}

.circle4{
    top: 20%;
    left: 20%;
    height: 60%;
    width: 60%;
    animation-name: circle1;
    animation-duration: 13s;
}

.circle5{
    top: 40%;
    left: 40%;
    height: 20%;
    width: 20%;    
    background-color: #B90091;
}


@keyframes circle2{
    0% {transform: rotate(-360deg)}
}


@keyframes circle1{
    0% {transform: rotate(360deg)}
}
    <html>
      <div class="circleHolder">
        <div id="circle">
                <div class="circle circle1 purpleCircle"></div>
                <div class="circle circle2 pinkCircle"></div>
                <div class="circle circle3 purpleCircle"></div>
                <div class="circle circle4 purpleCircle"></div>
                <div class="circle circle5 pinkCircle"></div>
              </div> 
      </div>
    </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...