SpeechRecognition实现语音指令控制开锁关锁动画效果代码
代码语言:html
所属分类:其他
代码描述:SpeechRecognition实现语音指令控制开锁关锁动画效果代码
代码标签: SpeechRecognition 语音 指令 控制 开锁 关锁 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* Padlock design inspired by Chris Cacioppe on Dribbble: https://dribbble.com/shots/4009114-Unlock-Animation */ *, *::before, *::after { box-sizing: border-box; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; font-family: "Roboto", Arial, sans-serif; font-weight: 700; text-align: center; color: #eee; background-color: #181818; padding: 15px; } h1 { font-size: 50px; line-height: 1.2; margin-bottom: 8px; } h1 span { font-size: 52px; color: #77e7ad; } h2 { font-size: 17px; margin-bottom: 35px; } .heard { font-size: 35px; margin-top: 25px; } .heard-output { color: gray; } .padlock { position: relative; width: 260px; height: 200px; background-image: linear-gradient( to bottom right, #f2bc23 49.9%, #eab02a 50% ); border-radius: 20px 20px 100px 100px; margin-top: 125px; cursor: pointer; } .padlock.unlock::before { transform: translate(-50%, -60%); } .padlock.unlock::after { transform: translate(-50%, calc(-50% - 15px)) rotate(90deg); } .padlock::before { content: ""; position: absolute; left: 50%; z-index: -1; width: 200px; height: 250px; border-radius: 125px; border: 40px solid #dbe1e4; transform: translate(-50%, -50%); transition: transform 300ms cubic-bezier(0.17, 0.67, 0.65, 1.52); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 50% 65%, 50% 57%, 22% 57%, 22% 51%, 15% 51%, 14% 52%, 14% 53%, 15% 54%, 22% 54%, 18% 57%, 2% 57%, 0% 55%); clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 50% 65%, 50% 57%, 22% 57%, 22% 51%, 15% 51%, 14% 52%, 14% 53%, 15% 54%, 22% 54%, 18% 57%, 2% 57%, 0% 55%); } .padlock::after { content: ""; position: absolute; top: 50%; left: 50%; z-index: 1; width: 20px; height: 100px; background-image: linear-gradient(to right, #ccc 49.9%, #aaa 50%); border-radius: 10px; transform: translate(-50%, calc(-50% - 15px)); transition: transform 180ms; } .keyhole { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; background-color: #2d3237; border-radius: 50%; transform: translate(-50%, calc(-50% - 15px)); } .keyhole::before { content: &qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0