仅使用 CSS 设置动画"call active"

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>

Answer 3

我稍微修改了您的原始版本，使其动画时间更短，交替进行，并且无需步骤即可制作动画。

.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;
-webkit-transform: rotate(-44deg);
transform: rotate(-44deg);
-webkit-animation: onCall 0.5s infinite alternate;
animation: onCall 0.5s infinite alternate;
}
.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;
-webkit-transform: rotate(-44deg);
transform: rotate(-44deg);
-webkit-animation: onCallTwo 0.5s infinite alternate;
animation: onCallTwo 0.5s infinite alternate;
}
@-webkit-keyframes onCall {
0% {
width: 10px;
left: 34px;
top: 28px;
height: 12px;
}
100% {
width: 18px;
left: 31px;
top: 24px;
height: 19px;
}
}
@keyframes onCall {
0% {
width: 10px;
left: 34px;
top: 28px;
height: 12px;
}
100% {
width: 18px;
left: 31px;
top: 24px;
height: 19px;
}
}
@-webkit-keyframes onCallTwo {
0% {
width: 16px;
left: 33px;
top: 23px;
height: 17px;
}
100% {
width: 18px;
left: 35px;
top: 18px;
height: 23px;
}
}
@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>