БЛОГ НА HUSL


Круглый блок с перемещением html css

Автор вопроса: Андрей Мордвинов

помогите решить пожалуйста ,не могу понять как сделать чтобы блок перемещался

Создайте страницу с зеленым кружком, который циклически перемещается по горизонтали от одной границы к другой.

Добавьте эффект наведения на круг - его цвет должен измениться на красный в течение 2 секунд.

Заранее спасибо


Источник

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

Автор решения: Sevastopol'

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

/*Контейнер*/
.container {
  display: block; position: relative;
  width: 300px; height: 100px;
  border: 2px solid pink;
}

/*Круг*/
.circle, .circle:after {
  display: block; position: absolute; top: 20px; left: 0; right: 0; bottom: 0;
  width: 60px; height: 60px;
  -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px;
  -webkit-animation: 10s infinite linear circle;
  -moz-animation: 10s infinite linear circle;
  animation: 10s infinite linear circle;
}

/*Круг закрашиваем с помощью псевдоэлемента для того,
чтобы при наведении на него не прерывалась анимация движения*/
.circle:after {
  content: ""; display: block; top: 0; background: darkseagreen;
}

/*Анимация движения круга*/
@-moz-keyframes circle {
  0% {
    left: 0;
  }
  50% {
    left: calc(100% - 60px);
  }
  100% {
    left: 0;
  }
}
@keyframes circle {
  0% {
    left: 0;
  }
  50% {
    left: calc(100% - 60px);
  }
  100% {
    left: 0;
  }
}

/*Событие при наведении на круг*/
.circle:hover:after {
  -webkit-animation: 2s circle__hover;
  -moz-animation: 2s circle__hover;
  animation: 2s circle__hover;
}

/*Анимация смены цвета круга*/
@-moz-keyframes circle__hover {
  0% {
    background: indianred;
  }
  100% {
    background: indianred;
  }
}
@keyframes circle__hover {
  0% {
    background: indianred;
  }
  100% {
    background: indianred;
  }
}

/*Конец кода*/
<div class="container"><!--Контейнер-->
  <div class="circle"></div><!--Круг-->
</div>

upd/

/*Контейнер*/
.container {
  display: block; position: relative;
  width: 300px; height: 100px;
  border: 2px solid pink;
}

/*Круг*/
.circle {
  display: block;
  position: relative;
  overflow: hidden;
  width: 60px; height: 60px;
  margin-top: 20px;
  -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px;
  -webkit-animation: 10s infinite linear circle;
  -moz-animation: 10s infinite linear circle;
  animation: 10s infinite linear circle;
}

/*Круг закрашиваем с помощью псевдоэлемента для того,
чтобы при наведении на него не прерывалась анимация движения*/
.circle>span {
  display: block;
  width: 60px; height: 60px;
  background: darkseagreen;
}

/*Анимация движения круга*/
@-moz-keyframes circle {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: 240px;
  }
  100% {
    margin-left: 0;
  }
}
@keyframes circle {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: 240px;
  }
  100% {
    margin-left: 0;
  }
}

/*Событие при наведении на круг*/
.circle>span:hover {
  -webkit-animation: 2s circle__hover;
  -moz-animation: 2s circle__hover;
  animation: 2s circle__hover;
}

/*Анимация смены цвета круга*/
@-moz-keyframes circle__hover {
  0% {
    background: indianred;
  }
  100% {
    background: indianred;
  }
}
@keyframes circle__hover {
  0% {
    background: indianred;
  }
  100% {
    background: indianred;
  }
}

/*Конец кода*/
<div class="container"><!--Контейнер-->
  <div class="circle"><span></span></div><!--Круг-->
</div>

→ Ссылка
Автор решения: Alexandr_TT

Если пока css анимации вызывают у вас затруднения, попробуйте начать изучение SVG анимаций.
На мой взгляд они проще для освоения, код короче по сравнению c CSS и SVG анимация гибче в настройке и может то, что пока анимациям CSS не подвластно.

#1. Горизонтальное перемещение вперед - назад

  <!-- Команда анимации перемещения -->
   <animateTransform id="an"  attributeName="transform" type="translate" begin="0s"
     dur="4s" values="0,0;340,0;0,0" repeatCount="indefinite" /> 

В атрибутtе values="
              X1,Y1;
              X2,Y1;
              X1,Y1"

Записываются пары координат начального, промежуточного и финального положения объекта

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
      
     width="400" height="200" viewBox="0 0 400 200" >  
  <rect width="400" height="200" fill="none" stroke="purple" stroke-width="4" /> 
  <circle cx="32" cy="100" r="30" fill="green" >
     <!-- Команда анимации перемещения -->
   <animateTransform id="an"  attributeName="transform" type="translate"  

   begin="0s;" dur="4s" values="0,0;340,0;0,0" repeatCount="indefinite" /> 
  </circle>
</svg>

#2. Добавление анимации смены цвета

 <!-- Анимация смены цвета  -->
    <animate attributeName="fill" begin="0s" dur="4s" 
       values="green;red;green" repeatCount="indefinite" />


<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
      
     width="400" height="200" viewBox="0 0 400 200" >  
  <rect width="400" height="200" fill="none" stroke="purple" stroke-width="4" /> 
  <circle cx="32" cy="100" r="30" fill="green" >
         <!-- Анимация перемещения объекта  -->
 <animateTransform id="an"  attributeName="transform" type="translate" begin="0s;" dur="4s" values="0,0;340,0;0,0" repeatCount="indefinite" /> 
      <!-- Анимация смены цвета  -->
    <animate attributeName="fill" begin="0s" dur="4s" values="green;red;green" repeatCount="indefinite" />
  </circle>
</svg>

#3. Комбинация горизонтального, вертикального перемещения

В атрибутtе values="
              X1,Y1;
              X2,Y2;
              X3,Y3;
              X4,Y4"

Может быть сколько угодно пар значений X Y

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
      
     width="400" height="200" viewBox="0 0 400 200" >  
  <rect width="400" height="200" fill="none" stroke="purple" stroke-width="4" /> 
  <circle cx="32" cy="100" r="30" fill="#00C256" >
   <animateTransform id="an"  attributeName="transform" type="translate" begin="0s;" dur="4s" values="0,0;100,70;200,-70;250,70;340,0;0,0;0,0" repeatCount="indefinite"  /> 
  </circle>
</svg>

Пауза достигается повторением координат в начальном и конечном положении объекта.

#4. Дискретная смена цвета

Должна смотреться лучше. Достигается добавлением атрибута в команду анимации смены цвета calcMode="discrete"

<!-- Анимация смены цвета  -->
    <animate attributeName="fill" begin="0s" dur="5s" 
       values="green;orange;red; purple;dodgerblue;green" repeatCount="indefinite" 
        calcMode="discrete" />  


<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
      
     width="400" height="200" viewBox="0 0 400 200" >  
  <rect width="400" height="200" fill="none" stroke="purple" stroke-width="4" /> 
  <circle cx="32" cy="100" r="30" fill="#00C256" >
   <animateTransform id="an"  attributeName="transform" type="translate" begin="0s;" dur="5s" values="0,0;100,70;200,-70;250,70;340,0;0,0;0,0" repeatCount="indefinite"  />
    <!-- Анимация смены цвета  -->
    <animate attributeName="fill" begin="0s" dur="5s" values="green;orange;red; purple;dodgerblue;green" repeatCount="indefinite" calcMode="discrete" />   
  </circle>
</svg>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.