css 语音,用css完成语音助手小动画
用css完成语音助手小动画
2020年08月10日
| 萬仟网IT编程
| 我要评论
震惊！用css完成语音助手小动画不要太简单！语音助手动画定位布局添加动画语音助手动画hello大家好，我是Aaron。想必大家都见过这个页面，在各个平台的语音助手都可以看到类似的动画。那么这个小动画用css怎么实现呢，其实我们只需要考虑最重要的两点，一是用定位布局把我们所看到的页面做出来，第二是利用animation动画来实现。定位布局从图片中我们可以看，动画主要由一个黑色背景还有两个带有边框的圆组成。我们可以利用定位布局实现两个圆在背景框下的水平居中。相对定位：以原先位置进行定位(0px
震惊！用css完成语音助手小动画不要太简单！
语音助手动画
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
版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。
相关文章:
最近接手了一个项目,接触到一些对文件操作的业务.所以在这边整理一下日常用到的处理方式,当学习笔记吧,有不对的地方,欢迎指正哈
filere...
//开始日期不大于结束时间，结束时间不小于开始时间，开始日期和结束日期都不小于当前日期
datepicker($("#startdate&...
Angular项目中使用第三方组件嵌入代码编辑器最近遇到一个需求，不仅需要展示源代码(不同环境下不同的环境配置代...
这个游戏是本人前不久刚入门编写的游戏，感觉里面代码很LOW但是对于新手来说很一般般吧~ 没有上传音乐文件了 运行效果： 上代码(HTML+JS)： ...
一、初始化项目
$ vue init webpack vue-elementui
$ npm run dev
二、安装 ele...
一，效果图。 二，代码。
1、HTML列表 a、标签： (1)
- 无序列表 (3)
- 列表项 (4)
文章目录4.3 人脸融合应用程序的设计4.3 人脸融合应用程序的设计ManyMasks软件打开之后,将展现一个实...
nginx启动报错 bind() to 0.0.0.0:80 failed (10013: An attempt was made to a...
网友评论
验证码：
总结
以上是生活随笔为你收集整理的css 语音,用css完成语音助手小动画的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 大学计算机二级考试 vb,大学计算机二级
- 下一篇： 服务器部署的参数文档,服务器的基本配置参