js+css实现飞鸟虚拟键盘打字动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js+css实现飞鸟虚拟键盘打字动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light">
<title>飞鸟打字机 · Sky Typewriter</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🐦</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  overflow:hidden;overscroll-behavior:none;user-select:none;-webkit-user-select:none;
  font-family:'Baloo 2','ZCOOL KuaiLe',system-ui,sans-serif;
  background:linear-gradient(180deg,#5eb9f2 0%,#8fd0f9 34%,#c8e9fc 68%,#eef9ff 100%);
}

/* ---------- 太阳 ---------- */
#sun{position:fixed;top:-70px;right:-70px;width:260px;height:260px;z-index:3;pointer-events:none}
#sun .rays{position:absolute;inset:-95px;border-radius:50%;
  background:repeating-conic-gradient(rgba(255,220,120,.35) 0 5deg,transparent 5deg 14deg);
  -webkit-mask:radial-gradient(closest-side,#000 20%,transparent 72%);
          mask:radial-gradient(closest-side,#000 20%,transparent 72%);
  animation:spin 46s linear infinite}
#sun .core{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 38% 35%,#fff6d8,#ffd66b 58%,#ffc247);
  box-shadow:0 0 70px 26px rgba(255,214,107,.55)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 云 ---------- */
.cloudw{position:fixed;left:0;pointer-events:none;animation:drift linear infinite}
.cloud{position:relative;width:190px;height:56px;background:#fff;border-radius:60px;
  transform:scale(var(--s,1));opacity:var(--o,.9);
  filter:drop-shadow(0 8px 10px rgba(110,160,210,.28))}
.cloud::before,.cloud::after{content:'';position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:82px;height:82px;top:-40px;left:26px}
.cloud::after{width:58px;height:58px;top:-26px;right:30px}
@keyframes drift{from{transform:translateX(-340px)}to{transform:translateX(calc(100vw + 340px))}}

/* ---------- 光尘 ---------- */
.spark{position:fixed;bottom:-12px;display:block;border-radius:50%;background:#fff;
  pointer-events:none;z-index:12;box-shadow:0 0 6px 2px rgba(255,255,255,.7);
  animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}12%{opacity:.8}90%{opacity:.5}100%{transform:translateY(-108vh);opacity:0}}

/* ---------- 山丘 / 灌木 ---------- */
.hill{position:fixed;bottom:-16vh;border-radius:50% 50% 0 0;pointer-events:none}
.h1{left:-12vw;width:70vw;height:38vh;background:linear-gradient(#9fdc8a,#6fbf63);z-index:6}
.h2{right:-15vw;width:75vw;height:34vh;background:linear-gradient(#8ed47e,#5fb254);z-index:5}
.bush{position:fixed;border-radius:50%;pointer-events:none;z-index:7;box-shadow:inset -6px -6px 0 rgba(0,0,0,.07)}

/* ---------- 热气球 ---------- */
#balloon{position:fixed;top:15vh;left:7vw;z-index:6;pointer-events:none;animation:bfloat 9s ease-in-out infinite}
#balloon .env{width:62px;height:70px;border-radius:50% 50% 46% 46%;position:relative;
  background:repeating-linear-gradient(90deg,#ff6f61 0 10px,#ffd9d4 10px 20px);
  box-shadow:inset -8px -8px 0 rgba(0,0,0,.08)}
#balloon .basket{width:22px;height:15px;backgro.........完整代码请登录后点击上方下载按钮下载查看