Angular 2/Ionic 2中头像边框动画实现问题

我看了下你写的CSS代码，动画没生效主要有几个关键问题，咱们一步步来修复：

现有代码的核心问题 #

• 伪元素:after的left属性拼写错误：你写的是left: -15p，少了结尾的x，应该是left: -15px，语法错误会导致伪元素无法正常渲染
• 缺少动画关键帧定义（@keyframes）：浏览器不知道要执行什么样的动画逻辑
• 未给:after伪元素添加animation属性：没有触发动画的指令

修复后的完整代码 #

.Pic {
  width: 200px;
  height: 200px;
  background: rgba(215, 255, 255, 0.3);
  position: relative;
  border: 25px solid rgba(215, 255, 255, 0.3);
  margin: 4px;
  border-radius: 50%;
  padding: 1.1em;
}

/* 第一层波浪 */
.Pic:after {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px; /* 修复拼写错误 */
  right: -15px;
  bottom: -15px;
  border: 3px solid rgba(215, 255, 255, 0.8);
  border-radius: 50%;
  /* 绑定动画：名称 时长 循环 匀速 */
  animation: radioWave 2s infinite linear;
}

/* 第二层延迟波浪（可选，增强效果） */
.Pic:before {
  content: '';
  position: absolute;
  top: -25px;
  left: -25px;
  right: -25px;
  bottom: -25px;
  border: 3px solid rgba(215, 255, 255, 0.5);
  border-radius: 50%;
  animation: radioWave 2s infinite 1s linear; /* 延迟1秒启动，形成递进效果 */
}

/* 定义无线电波动画逻辑：放大+淡出 */
@keyframes radioWave {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

代码说明 #

• 修复了:after的left属性拼写错误，确保伪元素能正确覆盖在头像外层
• 新增@keyframes radioWave定义动画：从原始大小放大到1.5倍，同时透明度从1降到0，完美模拟波浪扩散消失的无线电信号效果
• 给:after和:before都绑定了动画，:before延迟1秒启动，形成多层波浪的递进感，视觉效果更真实
• 用infinite让动画循环播放，linear保证动画速度均匀，不会出现忽快忽慢的情况

这样修改后，你的头像边框就能呈现出持续的无线电波浪辐射效果啦～

内容的提问来源于stack exchange，提问作者astrakid932