纯CSS实现语音动画.docx
需积分: 50 69 浏览量
2021-05-11
10:32:40
上传
评论
收藏 20KB DOCX 举报
纯 CSS 实现语音动画
效果图
Html 代码
<divclass="voicewave">
<spanv-for='(item,i)in15':key='i'></span>
</div>
使用了 vue 语法，如果不用 vue 语法则直接加 15 个 span 即可
CSS 代码 (使用了 less 语法)
.voicewave{
border:1pxsolidsilver;
margin-top:20px;
width:175px;
height:100px;
span{
display:block;
background-color:#f1f1f1;
width:7px;
height:10px;
border-radius:14px;
margin-right:5px;
float:left;
}
:last-child{
margin-right:0px;
}
:nth-child(1){
animation:wave2.5s1.4sinfinitelinear;
}
:nth-child(2){
资源评论
weixin_39725436
- 粉丝: 0
- 资源: 2
最新资源
- Elasticsearch实战：构建高效搜索系统的秘诀.zip
- HTML+CSS+JS网页设计：从入门到精通.zip
- 数据库课程设计：从理论到实践的全面指南.zip
- Python闭包：深入理解与应用场景解析.zip
- Win64OpenSSL-3-3-0.exe
- 课高分程设计-基于C++实现的民航飞行与地图简易管理系统-南京航空航天大学
- 航天器遥测数据故障检测系统python源码+文档说明+数据库(课程设计)
- 北京航空航天大学操作系统课设+ppt+实验报告
- 基于Vue+Echarts实现风力发电机中传感器的数据展示监控可视化系统+源代码+文档说明(高分课程设计)
- 基于单片机的风力发电机转速控制源码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
