如何利用CSS+jQuery做一个文字转语音机器人

如何利用CSS+jQuery做一个文字转语音机器人，下面web建站小编给大家详细介绍一下实现代码！

html代码

<div class="robot">
  <div class="tianxian"></div>
  <div class="gun"></div>
  <div class="gai"></div>
  <div class="head">
    <div class="erduo"></div>
    <div class="erduo"></div>
    <div class="face">
      <div class="eye"></div>
      <div class="eye"></div>
    </div>
  </div>
</div>
<div class="trans">
  <input id="input" type="text">
  <div id="btn">点击朗读</div>
</div>

css代码

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}
.robot{
  width: 658px;
  height:800px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
}
.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);
}
.gun{
  width: 5px;
  height: 30px;
  background:#0075af ;
  position: absolute;
  left: 0;
  right: 0;
  top: 35px;
  margin: auto;
}
.gai{
  width: 60px;
  height: 60px;
  background: #fff;
  box-shadow: -5px -5px 30px 1px #0075af inset;
  position: absolute;
  left: 0;
  right: 0;
  top: 65px;
  margin: auto;
  border-radius: 50%;
}
.head{
  width: 370px;
  height: 350px;
  position: absolute;
  left: 0;
  right: 0;
  top: 95px;
  margin: auto;
  border-radius: 70px;
  background: #fff;
  box-shadow: -5px -5px 30px 1px #0075af inset;
}
.erduo{
  width: 60px;
  height: 180px;
  background: #0022b0;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  border-radius: 60px;
  border-top: 4px solid #0e9df9;
  border-bottom: 4px solid #0e9df9;
  box-shadow: -5px -5px 30px 1px #0075af inset;
}
.erduo:nth-child(1) {
  border-left: 4px solid #0e9df9;
  left: -40px;
}
.erduo:nth-child(2){
  border-right: 4px solid #0e9df9;
  right: -40px;
  box-shadow: -5px -5px 30px 1px #0075af inset;
}
.face{
  width: 288px;
  height: 244px;
  background: #03192f;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 60px;
  box-shadow: -5px -5px 30px 1px #0075af inset;
}
.eye{
  width: 30px;
  height: 100px;
  background-image: url('图片');
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.eye:nth-child(1){
  left: 60px;
}
.eye:nth-child(2){
  right: 60px;
}
.trans{
  width:370px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  left: 0;
  right: 0;
  margin: auto;
  top:  600px;
  font-size: 16px;
}
#input{
  margin-right: 10px;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  border-bottom: 1px dashed #fff;
  height: 40px;
}
#btn{
  cursor: pointer;
}
.shine {
  animation: shine 1s linear infinite;
}
@keyframes shine {
  0%{
    height: 100px;
  }
  100%{
    height: 0px;
  }
}

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)
  })
})