大前端成长进阶课程：进入学习
素材
机器人眼睛
【推荐学习：css视频教程、jquery视频教程、web前端视频】
页面布局
机器人样式参考了下图，通过css拼造型的方式进行实现。部分还原了设计图
- 头顶部分 头顶部分是一个圆 伪类after实现白点
.tianxian{
width: 35px;
height: 35px;
border-radius: 50%;
background: #0e58cc;
position: absolute;
left: 0;
right: 0;
top: 0;
margin: auto;
}
.tianxian::after{
content: '';
display: block;
width: 5px;
height: 10px;
border-radius: 12px;
background: #fff;
position: absolute;
top: 10px;
left: 5px;
transform: rotatez(20deg);
}整体布局采用绝对定位布局 利用整个头部，实现耳朵和眼睛的定位
- 立体效果 通过box-shadow 的inset特性，通过适当偏移x,y轴，实现内阴影的立体效果
box-shadow: -5px -5px 30px 1px #0075af inset;
- 文字转语音实现
基于浏览器提供的speechsynthesisutterance api进行实现
speechsynthesisutterance基本属性
speechsynthesisutterance.lang获取并设置话语的语言speechsynthesisutterance.pitch获取并设置话语的音调(值越大越尖锐,越低越低沉)speechsynthesisutterance.rate获取并设置说话的速度(值越大语速越快,越小语速越慢)speechsynthesisutterance.text获取并设置说话时的文本speechsynthesisutterance.voice获取并设置说话的声音speechsynthesisutterance.volume获取并设置说话的音量
speechsynthesisutterance.text基本方法
speak()将对应的实例添加到语音队列中cancel()删除队列中所有的语音.如果正在播放,则直接停止pause()暂停语音resume()恢复暂停的语音
为按钮添加点击事件，获取input输入框的值，并进行播放，添加眼睛动画，并在播放结束的回调移除眼睛动画
$('#btn').click(function () {
let text = $('#input').val()
if (text) {
$('.eye').addclass('shine')
}
let u = new window.speechsynthesisutterance()
u.text = text
u.lang = 'zh'
u.rate = 0.7
u.onend = function () {
$('.eye').removeclass('shine')
}
speechsynthesis.speak(u)
})动画类：
.shine {
animation: shine 1s linear infinite;
}
@keyframes shine {
0%{
height: 100px;
}
100%{
height: 0px;
}
}完整代码：
html css
点击朗读
js
$(function () {
$('#btn').click(function () {
let text = $('#input').val()
if (text) {
$('.eye').addclass('shine')
}
let u = new window.speechsynthesisutterance()
u.text = text
u.lang = 'zh'
u.rate = 0.7
u.onend = function () {
$('.eye').removeclass('shine')
}
speechsynthesis.speak(u)
})
})更多编程相关知识，请访问：编程教学！！
以上就是带你使用css jquery实现一个文字转语音机器人的详细内容，更多请关注其它相关文章！
