仅使用CSS设置"调用活动"动画

Question

我想要一个我Call active animation的项目.我创建了一个,但对动画并不是100%满意.我在这里粘贴我的代码请帮我创建一个很好的调用活动动画.如果你们有任何其他动画建议,请开火.干杯.!

我想要的是表示用户正在与另一个人交谈的动画.

.rc_side_phone {
  display: inline-block;
  font-size: 34px;
  width: 38px;
  height: 40px;
  background: rgba(94, 178, 2, 0.56);
  color: #fff;
  line-height: 40px;
  border-radius: 7px;
  background: #4CAF50;
  margin-left: 11px;
  margin-top: 8px;
}

.rc_side_phone i {
  line-height: 45px;
  margin-left: 4px;
}

.rc_side_phone:after {
  position: absolute;
  content: '';
  border-right: 2px solid #ffffff;
  width: 10px;
  left: 34px;
  top: 28px;
  height: 12px;
  border-radius: 50%;
  z-index: 9;
  transform: rotate(-44deg);
  -webkit-transform: rotate(-44deg);
  animation: onCall 1s steps(5) infinite;
  -webkit-animation: onCall 1s steps(5) infinite;
  animation-delay: 0s;
}

.rc_side_phone:before {
  position: absolute;
  content: '';
  border-right: 2px solid #ffffff;
  width: 16px;
  left: 33px;
  top: 23px;
  height: 17px;
  border-radius: 50%;
  z-index: 9;
  transform: rotate(-44deg);
  -webkit-transform: rotate(-44deg);
  animation: onCallTwo 1s steps(10) infinite;
  -webkit-animation: onCallTwo 1s steps(10) infinite;
  /* animation-delay: 1.5s; */
}

@keyframes onCall {
  0% {
    width: 10px;
    left: 34px;
    top: 28px;
    height: 12px;
  }
  100% {
    width: 18px;
    left: 31px;
    top: 24px;
    height: 19px;
  }
  /*100%{width: 10px;left: 34px;top: 28px;height: 12px;}*/
}

@-webkit-keyframes onCall {
  0% {
    width: 10px;
    left: 34px;
    top: 28px;
    height: 12px;
  }
  100% {
    width: 18px;
    left: 31px;
    top: 24px;
    height: 19px;
  }
}

@keyframes onCallTwo {
  0% {
    width: 16px;
    left: 33px;
    top: 23px;
    height: 17px;
  }
  100% {
    width: 18px;
    left: 35px;
    top: 18px;
    height: 23px;
  }
}

@-webkit-@keyframes onCallTwo {
  0% {
    width: 16px;
    left: 33px;
    top: 23px;
    height: 17px;
  }
  100% {
    width: 18px;
    left: 35px;
    top: 18px;
    height: 23px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="rc_side_phone">
		<i class="fa fa-phone"></i>
</span>

Answer 1

如果您正在寻找来电动画,那么这个怎么样？:

更新:

我已将活动调用动画添加到代码段

UPDATE2:

添加了波动画和线性波动画

body {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-around;
}

.ringing_phone,
.active_phone,
.active_phone2 {
  display: inline-block;
  color: #fff;
  border-radius: 50%;
  background: #4CAF50;
  padding: 5px;
  width: 50px;
  height: 50px;
  text-align: center;
  position: relative;
  margin: 0 10px;
}

.ringing_phone i,
.active_phone i,
.active_phone2 i {
  line-height: 50px;
  font-size: 2.25em;
}

.ringing_phone i {
  animation: shake 2s infinite cubic-bezier(.36, .07, .19, .97) both;
}

.active_phone:after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
  padding: 0.5em;
  animation: activeCall 2s ease-in-out infinite both;
}

.active_phone2:after {
  content: '';
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(#e8a, 1), rgba(#def, 0) 80%, rgba(white, .5));
  z-index: 11;
  transform: translate3d(0, 0, 0);
}

.active_phone:before,
.active_phone2:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: activeCall2 4s linear infinite both;
}

.ringing_phone:after,
.ringing_phone:before {
  position: absolute;
  content: '';
  opacity: 0;
  border-right: 2px solid #ffffff;
  width: 15px;
  height: 15px;
  left: 40%;
  top: 28%;
  border-radius: 50%;
  transform: rotate(-40deg);
  animation: fadeInOne 2s infinite both;
}

.ringing_phone:before {
  width: 20px;
  height: 20px;
  left: 40%;
  top: 20%;
  animation: fadeInTwo 2s infinite both;
}

.active_phone2 i {
  z-index: 10;
  position: relative;
}

.active_phone2 .cover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  border-radius: 50%;
}

.wave,
.wave2 {
  opacity: .4;
  position: absolute;
  top: 25%;
  left: -15%;
  background: white;
  width: 130%;
  height: 130%;
  transform-origin: 50% 48%;
  border-radius: 45%;
  animation: drift 3000ms infinite linear;
  opacity: 0.2;
}

.wave2 {
  background: none;
  border-radius: 35%;
  top: 40%;
  border: 2px solid white;
}

.wave2.two {
  animation: drift 7000ms infinite linear;
  opacity: 0.1;
  top: 42%;
}

.wave2.three {
  animation: drift 5000ms infinite linear;
  opacity: 0.05;
  top: 44%;
}

.wave.two {
  animation: drift 7000ms infinite linear;
  top: 30%;
  opacity: 0.1;
}

.wave.three {
  animation: drift 5000ms infinite linear;
  opacity: 0.05;
  top: 35%;
}

@keyframes drift {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes activeCall {
  20% {
    padding: 1em;
  }
  25% {
    padding: 0.5em;
  }
  35% {
    padding: 1.5em;
  }
  50% {
    padding: 1em;
  }
  60% {
    padding: 1.55em;
  }
  80% {
    padding: 0.7em;
  }
  100% {
    padding: 0.5em;
  }
}

@keyframes activeCall2 {
  0% {
    padding: 0em;
    background-color: rgba(76, 175, 80, 0);
  }
  25% {
    padding: 1em;
    background-color: rgba(76, 175, 80, 0.5);
    transform: translateX(-1em) translateY(-1em);
  }
  26%,
  100% {
    padding: 0;
    opacity: 0;
  }
}

@keyframes shake {
  5%,
  45% {
    transform: rotate3d(0, 0, 1, -7deg);
  }
  10%,
  40% {
    transform: rotate3d(0, 0, 1, 7deg);
  }
  15%,
  25%,
  35% {
    transform: rotate3d(0, 0, 1, -7deg);
  }
  20%,
  30% {
    transform: rotate3d(0, 0, 1, 7deg);
  }
  51% {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}

@keyframes fadeInOne {
  45% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@keyframes fadeInTwo {
  55% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
  <h5>Active call v3</h5>
  <span class="active_phone2">
    <i class="fa fa-phone"></i>
    <span class="cover">
      <span class='wave2 one'></span>
      <span class='wave2 two'></span>
      <span class='wave2 three'></span>
    </span>
  </span>
</div>
<div>
  <h5>Active call v2</h5>
  <span class="active_phone2">
    <i class="fa fa-phone"></i>
    <span class="cover">
      <span class='wave one'></span>
      <span class='wave two'></span>
      <span class='wave three'></span>
    </span>
  </span>
</div>
<div>
  <h5>Active call</h5>
  <span class="active_phone">
    <i class="fa fa-phone"></i>
  </span>
</div>
<div>
  <h5>Incoming call</h5>
  <span class="ringing_phone">
    <i class="fa fa-phone"></i>
  </span>
</div>

Answer 2

如果在关键帧上添加不透明度，我认为它会更可爱。jsfidde：https：//jsfiddle.net/e6Lvsrk1/

.rc_side_phone {
      display: inline-block;
      font-size: 34px;
      width: 38px;
      height: 40px;
      background: rgba(94, 178, 2, 0.56);
      color: #fff;
      line-height: 40px;
      border-radius: 7px;
      background: #4CAF50;
      margin-left: 11px;
      margin-top: 8px;
    }
    
    .rc_side_phone i {
      line-height: 45px;
      margin-left: 4px;
    }
    
    .rc_side_phone:after {
      position: absolute;
      content: '';
      border-right: 2px solid #ffffff;
      width: 10px;
      left: 34px;
      top: 28px;
      height: 12px;
      border-radius: 50%;
      z-index: 9;
      transform: rotate(-44deg);
      -webkit-transform: rotate(-44deg);
      animation: onCall 1s steps(5) infinite;
      -webkit-animation: onCall 1s steps(5) infinite;
      animation-delay: 0s;
    }
    
    .rc_side_phone:before {
      position: absolute;
      content: '';
      border-right: 2px solid #ffffff;
      width: 16px;
      left: 33px;
      top: 23px;
      height: 17px;
      border-radius: 50%;
      z-index: 9;
      transform: rotate(-44deg);
      -webkit-transform: rotate(-44deg);
      animation: onCallTwo 1s steps(10) infinite;
      -webkit-animation: onCallTwo 1s steps(10) infinite;
      /* animation-delay: 1.5s; */
    }
    
    @keyframes onCall {
      0% {
        width: 10px;
        left: 34px;
        top: 28px;
        height: 12px;
        opacity:0;
      }
      100% {
        width: 18px;
        left: 31px;
        top: 24px;
        height: 19px;
        opacity:1
      }
      /*100%{width: 10px;left: 34px;top: 28px;height: 12px;}*/
    }
    
    @-webkit-keyframes onCall {
      0% {
        width: 10px;
        left: 34px;
        top: 28px;
        height: 12px;
      }
      100% {
        width: 18px;
        left: 31px;
        top: 24px;
        height: 19px;
      }
    }
    
    @keyframes onCallTwo {
      0% {
        width: 16px;
        left: 33px;
        top: 23px;
        height: 17px;
        opacity:1
      }
      100% {
        width: 18px;
        left: 35px;
        top: 18px;
        height: 23px;
        opacity:0;
      }
    }
    
    @-webkit-@keyframes onCallTwo {
      0% {
        width: 16px;
        left: 33px;
        top: 23px;
        height: 17px;
      }
      100% {
        width: 18px;
        left: 35px;
        top: 18px;
        height: 23px;
      }
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <span class="rc_side_phone">
    		<i class="fa fa-phone"></i>
    </span>