如何使用 CSS 创建来电动画效果？

在本文中，我们将学习如何使用 CSS 创建来电动画效果。

方法：要创建这种效果，我们基本上需要为元素框架周围的阴影效果设置动画，可以使用 CSS box-shadow轻松操作 财产。它由相对于元素的 X 和 Y 偏移量、模糊和扩展半径以及颜色来描述。为了创建动画效果，我们使用 CSS 动画属性，它允许我们配置动画序列如何进行的时间、持续时间和其他细节。为了控制动画序列的中间步骤，我们使用 @keyframes 在动画序列的整个持续时间内指定/更改 CSS 样式属性。

句法：

box-shadow: offset-x | offset-y | blur-radius | color 

HTML 代码：在“index.html”中，我们定义了我们的元素，动画效果将在哪个元素上起作用。链接包含动画代码的样式表。

index.html

CSS 代码：在“main.css ”文件中，我们使用类名call-animation定位元素，它具有 CSS动画属性，它指定动画名称、动画持续时间、动画定时功能和动画迭代计数。使用@keyframes，我们改变CSS box-shadow 属性，在动画序列的间隔。这些间隔以百分比指定，其中 0% 表示动画的开始，100% 表示动画的完成。

main.css

html,body{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #71AFFF;
}
.call-animation{
    background: rgb(130, 221, 233);
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border: solid 5px rgb(252, 241, 241);
    animation: call 1.5s ease infinite;
    color: aliceblue;
    font-size: 35px;
    font-weight: bold;
    position: relative;
}
  
.caller-img{
    position: absolute;
    height: 50px;
    width: 50px;
    top: 35px;
    left: 35px;
}
  
@keyframes call {
    15% {
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
    }
    25% {
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.5),
                    0 0 0 16px rgba(255, 255, 255, 0.3);
    }
    30% {
        box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.5),
                    0 0 0 24px rgba(255, 255, 255, 0.3);
    }
}

输出：