CSS 水波纹对号，错号

* {
  padding:0;
  margin:0;
}
html {
  height:100%;
}
body {
  height:100%;
  background:#121212;
  display:flex;
  justify-content:space-around;
  align-items:center;
}
.ripple-right {
  position:relative;
  display:block;
  width:100px;
  height:100px;
  margin:160px auto;
  animation:ripple 0.6s linear infinite;
  border-radius:50px;
  background-color:#FFF;
}
.ripple-right::before,.ripple-right::after {
  content:"";
  position:absolute;
  width:0;
  height:6px;
  background:green;
  border-radius:3px;
  transform-origin:center left;
}
.ripple-right:before {
  transform:rotate(43deg);
  left:25px;
  bottom:49px;
  animation:right-before 500ms forwards alternate;
}
.ripple-right:after {
  left:44px;
  bottom:29px;
  transform:rotate(-50deg);
  animation:right-after 1s 500ms forwards alternate;
}
@keyframes right-before {
  0% {
  width:0;
}
100% {
  width:30px;
}
}@keyframes right-after {
  0% {
  width:0;
}
100% {
  width:50px;
}
}@keyframes ripple {
  0% {
  box-shadow:0 0 0 0 rgba(0,128,0,0.1),0 0 0 20px rgba(0,128,0,0.1),0 0 0 40px rgba(0,128,0,0.1),0 0 0 60px rgba(0,128,0,0.1);
}
100% {
  box-shadow:0 0 0 20px rgba(0,128,0,0.1),0 0 0 40px rgba(0,128,0,0.1),0 0 0 60px rgba(0,128,0,0.1),0 0 0 80px rgba(0,128,0,0);
}
}/*error*/
    .ripple-error {
  position:relative;
  display:block;
  width:100px;
  height:100px;
  margin:160px auto;
  animation:ripple-red 0.6s linear infinite;
  border-radius:50px;
  background-color:#FFF;
}
.ripple-error::before,.ripple-error::after {
  content:"";
  position:absolute;
  width:0;
  height:6px;
  background:#ff1c1c;
  border-radius:3px;
}
.ripple-error:before {
  transform:rotate(45deg);
  left:29px;
  top:27px;
  transform-origin:center left;
  animation:error 500ms ease-in forwards alternate;
}
.ripple-error:after {
  right:29px;
  top:27px;
  transform:rotate(-45deg);
  transform-origin:center right;
  animation:error 500ms ease-in 500ms forwards alternate;
}
@keyframes error {
  0% {
  width:0;
}
100% {
  width:60px;
}
}@keyframes ripple-red {
  0% {
  box-shadow:0 0 0 0 rgba(255,28,28,0.1),0 0 0 20px rgba(255,28,28,0.1),0 0 0 40px rgba(255,28,28,0.1),0 0 0 60px rgba(255,28,28,0.1);
}
100% {
  box-shadow:0 0 0 20px rgba(255,28,28,0.1),0 0 0 40px rgba(255,28,28,0.1),0 0 0 60px rgba(255,28,28,0.1),0 0 0 80px rgba(255,28,28,0);
}
}