HTML5网页语音识别功能演示
CSS
语言：
CSSSCSS
确定
*,
*:before,
*:after,
ul,
li,
a,
button,
input,
h1,
h2,
h3,
h4,
h5,
h6,
p,
img,
image,
svg,
path,
g,
canvas {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: transparent;
border: none;
text-decoration: none;
font-family: 'Roboto';
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
list-style: none;
position: relative;
outline: none;
-webkit-transition: .2s ease-in-out;
transition: .2s ease-in-out;
}
*:active,
*:before:active,
*:after:active,
ul:active,
li:active,
a:active,
button:active,
input:active,
h1:active,
h2:active,
h3:active,
h4:active,
h5:active,
h6:active,
p:active,
img:active,
image:active,
svg:active,
path:active,
g:active,
canvas:active {
outline: none;
}
html,
body {
width: 100%;
height: auto;
min-height: 100vh;
margin: 0;
padding: 0;
background-color: #333ddd;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.microcopy {
max-width: 650px;
padding: 10px 30px;
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
color: white;
font-size: 14px;
line-height: 1.4;
}
.btn {
background: transparent;
border: 2px solid white;
border-radius: 50px;
color: white;
cursor: pointer;
font-family: 'Montserrat';
font-weight: 700;
overflow: hidden;
padding: 15px 80px;
will-change: padding;
}
.btn__text {
cursor: inherit;
-webkit-transition: 0.35s cubic-bezier(0.34, -0.61, 1, 0.64);
transition: 0.35s cubic-bezier(0.34, -0.61, 1, 0.64);
}
.btn__loader {
width: calc(0% - 4px);
height: calc(100% - 4px);
background-color: white;
border-radius: 50px;
position: absolute;
top: 2px;
left: 2px;
}
.btn.active {
padding: 0px 80px;
-webkit-transition: 0.4s cubic-bezier(0.35, -0.77, 0.67, 1.88);
transition: 0.4s cubic-bezier(0.35, -0.77, 0.67, 1.88);
}
.btn.active .btn__text {
-webkit-transform: translateY(-350%) scale(0);
transform: translateY(-350%) scale(0);
-webkit-transition: 0.35s cubic-bezier(0.34, -0.61, 1, 0.64);
transition: 0.35s cubic-bezier(0.34, -0.61, 1, 0.64);
}
.btn.active .btn__loader {
-webkit-animation: load 1s ease-in-out infinite;
animation: load 1s ease-in-out infinite;
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
@-webkit-keyframes load {
0% {
width: 0%;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
width: 100%;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@keyframes load {
0% {
width: 0%;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
width: 100%;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
.result,
.accuracy {
color: white;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: .9em;
font-weight: 400;
line-height: 1.4;
max-width: 600px;
padding: 50px 30px;
}
.result:first-letter,
.accuracy:first-letter {
text-transform: uppercase;
}
.result:empty,
.accuracy:empty {
padding: 0;
}
.result.active:after {
content: '...';
position: absolute;
overflow: hidden;
width: 0px;
-webkit-animation: something .7s infinite;
animation: something .7s infinite;
}
@-webkit-keyframes something {
100% {
width: 20px;
}
}
@keyframes something {
100% {
width: 20px;
}
}
.accuracy {
padding: 10px;
position: absolute;
right: 0;
bottom: 0;
}
HTML5网页语音识别功能演示相关推荐
- html5网页录音和语音识别
背景 在输入方式上,人们总是在追寻一种更高效,门槛更低的方式,来降低用户使用产品的学习成本.语音输入也是一种尝试较多的方式,有些直接使用语音(如微信语音聊天),有些需要将语音转化为文字(语音识别).接 ...
- 【HTML5】------- JavaScript 实现网页版HTML5发送语音功能
1.浏览器实现HTML5发送语音功能(转载处:https://www.xuanmo.xin/details/1784) 这是一次后台同事让做的一个功能,但是在手机端兼容不好,Safari清一色不支持, ...
- html如何制作滑块,网页制作html5实现滑块功能之type=quot;rangequot;属性-建站-建站教程-建站方法-米云建站 - 米云问答...
html5实现滑块功能之type="range"属性 1.html5中添加了关于滑块的标签,其实际是扩展了input标签,type属性值为range. 2.感觉挺有意思,就做了一个 ...
- html5网页小游戏 拖拽,HTML5拖拽功能实现的拼图游戏
本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 具体代码如下所示: drag拖拽 .box{ f ...
- html5的在线播放页面,整理5款html5网页播放器，总有一款适合你吧
整理了5款html5网页播放器,总有一款适合你吧. 酷播云HTML5倍速功能视频播放器 介绍: 重要提示:本播放器为酷播云在线产品,用户可以免费注册使用,下载包仅提供代码使用示例及演示,并非播放器的下 ...
- 免费的HTML5连载来了《HTML5网页开发实例具体解释》连载（四）HTML5中的FileSystem接口...
HTML 5除了提供用于获取文件信息的File对象外,还加入了FileSystem相关的应用接口. FileSystem对于不同的处理功能做了仔细的分类,如用于文件读取和处理的FileReader和F ...
- 网页设计html加音频,HTML5网页中如何嵌入音频，视频？
<HTML5的视频播放控制技术> 介绍了 本文主要介绍在HTML5 中如何嵌入音频,视频? 在HTML5 中如何嵌入音频? HTML5 支持 MP3.Wav 和 Ogg 格式的音频,代码示 ...
- 快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力
为了寻找一个优质的网页模板,网页设计师和开发者往往可能会花上大半天的时间.不过幸运的是,现在的网页设计师和开发人员已经开始共享HTML5,Bootstrap和CSS3中的免费网页模板资源.鉴于网站模板 ...
- 10个顶尖响应式HTML5网页
快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力 为了寻找一个优质的网页模板,网页设计师和开发者往往可能会花上大半天的时间.不过幸运的是,现在的网页设计师和开发人员已经开始共享HTML ...
最新文章
- 冯怡：我想给大家展示一种可能性（图灵访谈）
- 全面梳理百度世界大会：量产L4乘用车和两款音箱 还有挖掘机技术
- oracle控制文件都一样么,Oracle控制文件详解
- GoF的23个经典设计模式
- 改变listview中item选中时文字的颜色
- matlab bwlabel标记连通区域
- docker ssh
- 一站式解决服务器缺少编译环境的问题，别再为了缺少依赖而烦恼了！
- Linux虚拟文件系统：数据结构与文件系统注册、文件打开读写
- saltstack的探索-salt指定目标和分组
- jquery migrate 应用迁移辅助插件
- java 二叉树 叶节点_java二叉树和叶子节点的实现
- 新路由3 newifi d2 潘多拉PandoraBox固件，带鸡血驱动
- python编写英文字符频率统计小程序
- [原] 写作及开发环境设置
- linux设定u盘启动,cdlinux u盘启动,教您如何设置
- php 调用reboot,Linux命令：reboot命令
- 注册流程（分离HLR/HSS）
- PDM系统的实施说明书
- 基于JavaWeb电影系统分享【源码开源】