用css完成语音助手小动画

语音助手动画

hello大家好，我是Aaron。
想必大家都见过这个页面，在各个平台的语音助手都可以看到类似的动画。
那么这个小动画用css怎么实现呢，其实我们只需要考虑最重要的两点，一是用定位布局把我们所看到的页面做出来，第二是利用animation动画来让画面动起来。

定位布局

从图片中我们可以看，动画主要由一个黑色背景还有两个带有边框的圆组成。我们可以利用相对定位布局实现两个圆在背景框下的水平居中。

1. 相对定位：以原先位置进行定位（0px 0px ）
   背景框我们设置460X460
   那么外圆我们可以设置200X200的宽高以及15px的border,外圆的初始位置实在视口区00点的位置，参照00点位置进行定位,应定位115px 115px使外圆位于背景框中心。
   外圆位置改变后，内圆的初始位置在130 130,但是内圆的参照位置是外圆的padding位置,所以设置内圆大小为100X100,border为20px,参照外圆定位30 30 就居中了。
   这样就实现外圆相对背景框居中，而内圆相对外圆居中。
   

来看看代码

		.one {
            width: 460px;
            height: 460px;
            background-color: #99CCCC;
        }

        .two {
            width: 200px;
            height: 200px;
            border-radius: 100%;
            border: 15px solid #009999;
            background-color: #66CCCC;
            position: relative;
            top: 115px;
            left: 115px;
        }

        .three {
            width: 100px;
            height: 100px;
            border-radius: 100%;
            border: 20px solid #FFFFFF;
            background-color: #66CCCC;
            position: relative;
            top: 30px;
            left: 30px;
        }

添加动画

给两个圆设置动画，外圈放大，内圈缩小

	@keyframes waiquan {
            from {
                transform: scale(1)
            }

            to {
                transform: scale(1.1)
            }
        }

        @keyframes neiquan {
            from {
                /* 缩放 */
                transform: scale(1)
            }

            to {
                transform: scale(0.8)
            }
        }

将动画运用到div中，设置动画时间，循环，

			/*外圈*/
			animation-name: waiquan;
            animation-duration: 1s;
            /*循环*/
            animation-iteration-count: infinite;
            /* 动画执行的方向 */
            animation-direction: reverse;
            /* 交替执行 */
            animation-direction: alternate;

			/*内圈*/
			animation-name: neiquan;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            /* 动画执行的方向 */
            animation-direction: reverse;
            /* 交替执行 */
            animation-direction: alternate;

画面就动起来啦！

赶紧试试吧~

本文地址：https://blog.csdn.net/weixin_41597939/article/details/107890057