(资料图片)
素材
机器人眼睛
【推荐学习：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: -5px -5px 30px 1px #0075af inset;
登录后复制基于浏览器提供的SpeechSynthesisUtteranceApi进行实现
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实现一个文字转语音机器人的详细内容，更多请关注php中文网其它相关文章！
