Как обеденять css объекты

Question

  <style>
  .ball {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: orange;
  transform-origin: center top;
}
.test {
  height: 400px;
  width: 3px;
  background-color: black;
  display: inline-block;
  margin: 100px 400px;
  transform-origin: center top;
}

.anim2 {
  animation-duration: 3s;
  animation-name: oscil2;
  animation-iteration-count: infinite;
}

@keyframes oscil2 {
  from {
    transform: rotate(0deg);
    animation-timing-function: ease-out;
  }
  25% {
    transform: rotate(30deg);
    animation-timing-function: ease-in;
  }
  50% {
    transform: rotate(0deg);
    animation-timing-function: ease-out;
  }
  75% {
    transform: rotate(-30deg);
    animation-timing-function: ease-in;
  }
  to {
    transform: rotate(0deg);
  }
}

</style>

Есть у меня вот такой код маятника(довольно кривой, но рабочий), и он заставляет "test"(нить) колебаться. Но как приделать объект "ball", чтобы он был как бы грузиком на этой нити? А то если прописать ему те же действия, он лишь будет немного ездить влево-вправо.

Answer 1

Вот как бы это сделал я:

    <html>
        <head>
            <style>     
               .ball {                                                      
                    position: absolute;
                    bottom: -10px;
                    left:-8.5px;
                    width: 20px;                                      
                    height: 20px;                                 
                    border-radius: 50%;                                       
                    background-color: orange;                                     
                    transform-origin: center top;
                 }
                 .test {
                     position: relative;
                     height: 400px;
                     width: 3px;
                     background-color: black;
                     display: inline-block;
                     margin: 100px 400px; 
                     transform-origin: center top;
                 }                            
                 .anim2 {                                 
                     animation-duration: 3s;                                          
                     animation-name: oscil2;                                          
                     animation-iteration-count: infinite;
                  }
                  @keyframes oscil2 {
                      from {
                          transform: rotate(0deg);
                          animation-timing-function: ease-out;
                      }
                      25% {
                          transform: rotate(30deg);
                              animation-timing-function: ease-in;
                      }
                      50% {
                          transform: rotate(0deg);
                          animation-timing-function: ease-out;
                      }
                      75% {
                          transform: rotate(-30deg);
                      animation-timing-function: ease-in;
                      }
                      to {
                          transform: rotate(0deg);
                      }
                  }
             </style>
         </head>
         <body>
            <div class="test anim2">                                         
                <div class="ball"></div>                     
            </div>
         </body>
    </html>

В блоке '.test' я добавил свойство 'position: relative', а в блоке '.ball' я добавил 'position: absolute'.

Таким образом мячик получил абсолютную позицию в пределах блока '.test'.

Далее я приклеил мячик к низу этого блока так, чтоб его середина была на краю нити свойством 'button: -10px'.

Потом сдвинул его в лево, чтоб он был по середине нити, свойством 'left: -8.5px'.

(8.5 потому что изначально он был приклеен не к середине нити а к ее краю, то есть он имел отступ от середины 1.5 пикселей, значит сдвигать его надо не на половину ширины, а на "половина_ширины - отступ_от_центра).

БЛОГ НА HUSL

Как обеденять css объекты

Ответы (1 шт):