我要评论
语音助手动画
hello大家好，我是Aaron。
想必大家都见过这个页面，在各个平台的语音助手都可以看到类似的动画。
那么这个小动画用css怎么实现呢，其实我们只需要考虑最重要的两点，一是用定位布局把我们所看到的页面做出来，第二是利用animation动画来让画面动起来。
定位布局
从图片中我们可以看，动画主要由一个黑色背景还有两个带有边框的圆组成。我们可以利用相对定位布局实现两个圆在背景框下的水平居中。
- 相对定位：以原先位置进行定位（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
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论