仅使用 CSS 设置“调用活动”动画
Posted
技术标签:
【中文标题】仅使用 CSS 设置“调用活动”动画【英文标题】：Set "call active" animation using only CSS 【发布时间】：2017-12-30 21:08:48 【问题描述】：我想要一个Call active animation 用于我的项目。我创建了一个，但对它的动画不是 100% 满意。我在这里粘贴我的代码，请帮助我创建一个不错的呼叫活动动画。如果你们有任何其他动画建议，请开火。ty 干杯。！
我想要的是 表示用户正在与另一个人交谈的动画。
.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>【问题讨论】：
这不是问题。我认为这是一个相对的情况。 是的，这不是编程方面的问题，但这是user-interface的问题
这个问题似乎更适合User Experience Stack Exchange。
【参考方案1】：
如果在关键帧上添加不透明度，我认为它会更可爱。 杰斯菲德：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>【讨论】：
TY 为您提供建议，但有任何方法可以改进其动画，使其显示speaking on the phone。我的动画我感觉更像ringing.!【参考方案2】：
如果你正在寻找来电动画，这个呢？：
更新：
我已将活动通话动画添加到 sn-p
更新2：
添加了波浪动画和线性波浪动画
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>【讨论】：
不是active call animation 不是incoming call animation。我想要表示用户正在与另一个人交谈的动画。
@JithinRajPR 我已经更新了我的答案，看看吧！
我喜欢你对动画所做的，你的是迄今为止我得到的最好的答案，但是你的脑海里还有什么我可以使用的想法吗？用户。？
除非您使用免提，否则正在进行的通话不是交互式的，我在成长中心 div 中重新创建了该动画
我只是想知道我们是否可以做一些类似于声波之类的东西。即使您的动画更麻烦且一致性更低，所以用户不会realize suddenly 动画正在循环自己。【参考方案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>【讨论】：
以上是关于仅使用 CSS 设置“调用活动”动画的主要内容，如果未能解决你的问题，请参考以下文章