使用CSS的脉动环动画 [英] Pulsating ring animation with CSS

问题描述

我想有一个从 div 的中心开始，而不是从 div 。

I want to have an expanding radius that starts from the center of the div instead of it starting on the top left of the div.

想象一下，按钮有一个向外的脉冲轮廓。那个脉冲大纲应该从 div 的中间开始，然后出去。

Imagine the button has a pulsing outline that goes outwards. That pulsing outline should start from the middle of the div and go out.

请参见示例： https://jsbin.com/dinehoqaro/edit?html,css,output

您可以看到扩展从左上角开始。

You can see that the expansion is starting from the top left.

.circle {
  background-color: white;
  border: 1px solid red;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: pulse 1s infinte;
  -webkit-animation: pulse 1.2s infinite;
}
button {
  background-color: green;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
@-webkit-keyframes pulse {
  from {
    width: 50px;
    height: 50px;
  }
  to {
    width: 100px height: 100px;
  }
}
@keyframes pulse {
  from {
    width: 50px;
    height: 50px;
  }
  to {
    width: 100px;
    height: 100px;
  }
}

<div class="circle"><button>click here</button></div>

推荐答案

这里是使用CSS的一般解决方案 flexbox ，转换和伪元素。

Here's a general solution using CSS flexbox, transform and pseudo-elements.

html {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightyellow;
  min-height: 95%;
}
#container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sphere {
  display: flex;
  background: lightblue;
  border-radius: 300px;
  height: 100px;
  width: 100px;
}
#container::after {
  display: flex;
  background: lightpink;
  border-radius: 300px;
  height: 250px;
  width: 250px;
  animation: pulsate 2.5s ease-out;
  animation-iteration-count: infinite;
  opacity: 0.0;
  content: "";
  z-index: -1;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
@keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0.0;
  }
}

<div id="container">
  <div class="sphere"></div>
</div>

@harry 还可以看到这个真棒解决方案：如何在CSS中创建脉冲发光环动画？

Also see this awesome solution by @harry: How to create a pulsing glow ring animation in CSS?

这篇关于使用CSS的脉动环动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！