Блог

Главная - Вопросы по программированию - Расширяет фон в форме круга

Расширяет фон в форме круга

#html #css

#HTML #css

Вопрос:

Я пытаюсь создать круг, который расширяется — измените цвет от центра, и я хочу, чтобы он расширил его с помощью border-radius: 50%, вы поймете, о чем я говорю, если посмотрите пример, который я сделал

Проверьте образец, который я сделал для лучшего понимания

Спасибо за любую помощь

Комментарии:

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

2. Добро пожаловать в Stack Overflow! Вопросы, обращающиеся за помощью в отладке, должны содержать кратчайший код, необходимый для его воспроизведения в самом вопросе. ПРИМЕЧАНИЕ — Пожалуйста, не злоупотребляйте блоками кавычек, чтобы обойти это требование .

Ответ №1:

Вы могли бы запустить transition поверх вставки box-shadow , вот так

 div {
  width: 300px;
  height: 300px;
  display: flex;
  color: #FFF;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #03BF60;
  cursor: pointer;
  transition: box-shadow .75s 0s, color .5s 0s;
  box-shadow: inset 0 0 0 0 #DCEDC8;
}

div p { 
  color: inherit;
  text-align: center;
}

div:hover {
  color: #444;
  box-shadow: inset 0 0 0 150px #DCEDC8;
}  
 <div>
  <p>
     Responsive design. I get this certificate by 
     learning HTML, CSS, web design, media query plus 
     animations using keyframes, declaring variables 
     on css and a lot of CSS components.
  </p>
</div>

Ответ №2:

Вы могли бы использовать ключевые кадры…

 <div class="shape">
  <div class="to-animate animate"></div>
</div>

.shape {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.to-animate {
  width: 0;
  height: 0;
  background: blue;
}

.animate {
  animation: my-animation 1s forwards;
}

@keyframes my-animation {
  to {
    width:200px;
    height: 200px;
  }
}

https://jsfiddle.net/hernangiraldo89/ba3ne675/

Ключевые кадры — это мощный инструмент, вот его документация:

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes