带你使用CSS+jQuery实现一个文字转语音机器人

百变鹏仔 4周前 (09-20) #CSS

文章标签带你

本篇文章手把手带大家使用css+jquery实现一个文字转语音机器人，希望对大家有所帮助！

素材

【推荐学习：css视频教程、jQuery视频教程、web前端视频】

立即学习“前端免费学习笔记（深入）”；

页面布局

机器人样式参考了下图，通过css拼造型的方式进行实现。部分还原了设计图

 <div class="tianxian"></div> .tianxian{    width: 35px;    height: 35px;    border-radius: 50%;    background: #0e58cc;    position: absolute;    left: 0;    right: 0;    top: 0;    margin: auto;  }  .tianxian::after{    content: &#39;&#39;;    display: block;    width: 5px;    height: 10px;    border-radius: 12px;    background: #fff;    position: absolute;    top: 10px;    left: 5px;    transform: rotateZ(20deg);  }

整体布局采用绝对定位布局利用整个头部，实现耳朵和眼睛的定位

<div class="head">      <div class="erduo"></div>      <div class="erduo"></div>      <div class="face">        <div class="eye"></div>        <div class="eye"></div>      </div>    </div>

 box-shadow: -5px -5px 30px 1px #0075af inset;

基于浏览器提供的SpeechSynthesisUtterance Api进行实现

SpeechSynthesisUtterance基本属性

SpeechSynthesisUtterance.text基本方法

为按钮添加点击事件，获取input输入框的值，并进行播放，添加眼睛动画，并在播放结束的回调移除眼睛动画

$(&#39;#btn&#39;).click(function () {      let text = $(&#39;#input&#39;).val()      if (text) {        $(&#39;.eye&#39;).addClass(&#39;shine&#39;)      }      let u = new window.SpeechSynthesisUtterance()      u.text = text      u.lang = &#39;zh&#39;      u.rate = 0.7      u.onend = function () {        $(&#39;.eye&#39;).removeClass(&#39;shine&#39;)      }      speechSynthesis.speak(u)    })

动画类：

 .shine {    animation: shine 1s linear infinite;  }  @keyframes shine {    0%{      height: 100px;    }    100%{      height: 0px;    }  }

完整代码：

HTML+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('https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/41c21816e3c740eaa43ade57de3eb5a5~tplv-k3u1fbpfcp-watermark.image');    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;    }  }       
    
    
    <div class="head">      <div class="erduo"></div>      <div class="erduo"></div>      <div class="face">        <div class="eye"></div>        <div class="eye"></div>      </div>    </div>  
          点击朗读

 $(function () {    $(&#39;#btn&#39;).click(function () {      let text = $(&#39;#input&#39;).val()      if (text) {        $(&#39;.eye&#39;).addClass(&#39;shine&#39;)      }      let u = new window.SpeechSynthesisUtterance()      u.text = text      u.lang = &#39;zh&#39;      u.rate = 0.7      u.onend = function () {        $(&#39;.eye&#39;).removeClass(&#39;shine&#39;)      }      speechSynthesis.speak(u)    })  })

更多编程相关知识，请访问：编程教学！！

文章推荐

带你使用CSS+jQuery实现一个文字转语音机器人

素材

页面布局

SpeechSynthesisUtterance基本属性

SpeechSynthesisUtterance.text基本方法

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写