欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

用css完成语音助手小动画

程序员文章站 2022-06-17 08:53:44
震惊!用css完成语音助手小动画不要太简单!语音助手动画定位布局添加动画语音助手动画hello大家好,我是Aaron。想必大家都见过这个页面,在各个平台的语音助手都可以看到类似的动画。那么这个小动画用css怎么实现呢,其实我们只需要考虑最重要的两点,一是用定位布局把我们所看到的页面做出来,第二是利用animation动画来实现。定位布局从图片中我们可以看,动画主要由一个黑色背景还有两个带有边框的圆组成。我们可以利用定位布局实现两个圆在背景框下的水平居中。相对定位:以原先位置进行定位(0px...

震惊!用css完成语音助手小动画不要太简单!

语音助手动画

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

定位布局

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

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

来看看代码

		.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;

画面就动起来啦!
用css完成语音助手小动画
赶紧试试吧~

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

相关标签: html+css css html