js+css实现网页滚动小鸟跟随栖息动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：js+css实现网页滚动小鸟跟随栖息动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --brown: #5f380c;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: #9bcfe0;
  color: #fff;
  color: var(--brown);
}

.bird-wrapper {
  position: absolute;
  transition: 1.5s;
  z-index: 999;
  top: 0;
  left: 0;
}

.bird {
  position: absolute;
  --m: 2;
  --w: 21px;
  --h: 18px;
  width: calc(var(--m) * var(--w));
  height: calc(var(--m) * var(--h));
  margin-top: calc(var(--m) * var(--h) * -0.5);
  margin-left: calc(var(--m) * var(--w) * -0.5);
  --flip: scale(1);
}

.head {
  position: absolute;
  /* 95 * 90 */
  --w: 19px;
  --h: 15px;
  width: calc(var(--m) * var(--w));
  height: calc(var(--m) * var(--h));
  background-size: calc(var(--m) * var(--w) * 5) calc(var(--m) * var(--h) * 6);
  background-repeat: no-repeat;
  image-rendering: pixelated;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAABaCAYAAADegYpGAAAAAXNSR0IArs4c6QAABYlJREFUeF7tXVF2FDEM6/7DfeA0cDQ4DdwH/peX95piTBJJjjOz3Uk/O7NaW1YSR5NOby/75zQGbqd98xN/8ZdPH+7ff/6G3A5vuN/vd8/R7XaDoI/OK0tONA8Wv0lki/SsInjsaDFnhVEIKjlVhc7iFSwV4z/yGeJrIRTiEC6LhXBKbAxWIf/bj1+UuBFeNKZ/yGdAIiOAxc1IkhUGGxMq5gzOcvKV4DITHWHZmL5+/vjCjICWMNTcfExv5EeAGJWpuD31qziXJz9CmCWtLorld16dRyvWFzOam8VpKh8l5q9nqtUnWQuwyX+dZ2bJR8XNml97U09UtTauKEZT+b0+tfx+RNaoQykBtj4bwYski2Kj+szXm7IEYXHgJqsQVX/s0EdtYfnMaM62iTNYI3FE2l8Wj4mNEUYLh7IK2O2yoqR978sLRf4mag0Dm/w1vFKom3yKpthNaLq+pKVsqUQExWj/22yMfH3Y7fS+nOkC/GdVy3WUeBbWyN1cneNlLWW21ext1BhhoXZ6uauZmSTTT9eEkWorFtptI/JnYlpOvhJcZqIsFkN+D0vNzeNc3lJWFlQ/mh6a/EhwXh2XczUZNdjhuspSvqSfX8hHc+Es+aqzmTGKqqgysKIYdmR3F1xPTo8sxrZVbOXMUcTExozy5QuuDaJV1WotV1sZtXJWZf6zrYQVPETY0VjMKAhbyjXZyFY88hlE7rNc38baiZXc5G/yT2TgxK++vKWczb2yxh1qKbdMNrYzaZEUtZU9Qb1uRY1NjecpLWVkqpXr+5SykzNSGtNPW8isTdYqnHdjKavEj9SvePm1mEsPTUWSGwUW9VFskuyhq9GiOSIN+VdoFEU5qzHtg7JCu7PsrKatIjLVZg/KIteUGeKsahkslv9DyLfB9M5qoiFp28qWsbYtZXdcMDKHoU6AcTSZQrb2CEixKDb0eRTXLF/LN1lMgKjFtCRk4mVhRXG2sabIP/neTX4yoQrcJl9hK/neTX4yodOu5mh3qiyOyXmlwikkKV+s4C7vdnzgvjOIFlO1b30c+8UXhhG2CNG2zpLfOwXXUziKLRrTcldT2RxlJFkJPAqLIb4X03LyleBKkKt3pV4MR3tENr/Ln1J+WvJV1fvhecmDskgNGZbyqH3zU0/reSuKcTT3z4pCWcdaeUoPU5C/rx5uRcT5p1nlL/oyCBvtX5hefpmf36tmJSpySjnyhw1qIZURpLqj9v6shzLNBbcXWI981MpZlSlKH5HJql+JDSmewWLiauFQ3o6yZW7tJJkXfCISnvE6Rf4zJv4IOW3yT6zC5cmfmVJHdWNwL3tKuZLDkKQODu+Ydg271oXo6o2CnLWBUavIdCYWA7mbKl6vXe/hPOUpZZY0RmTI7GM3brDVZINBmw8/AlhcRBqLwxCmHJbNclo9ziUtZTs9oA1gFdLSHa6iKq/sLGWMFBuJL9OqaMU2G9NSPz8SnE3ykpYy6lrK9dl3L4y+49KWsie3RdQs+ewp5dqHz44i1KYygjvMUm55+DVA9rW+o45Ctagj5K9ei2Zjos/tsE+vWm0mc0wctZlsP820mdlYTBFgn4+GXmQrvnIbj+J99OuXN9bOLNAm/0T2N/nJ5CtT82Ut5WTO3+CmyY+u3kxCWaeUrT+jGn37xReuUpmtJtNu7hdfiAVgRiQzChTiUSGVmN6VpWynByXJWgDkarJ2cq8AszEtdTV787JqqpX7mf9f2MId+fBnkG8L+fAvvijB7oOy5n/Hsj5PGZY9dc26mqxqs55A+aknMuX46RBOO+ig7GhBsq6mnzpY8hUTTJ12mNa4t4Cnkj+an1WiPGGsSjM7iyOwIgWQTin31MH25Uxbx2KxCziLx5DHYEVxtrejzj2J92/yE8lUof4AX4lUtcFJ+m8AAAAASUVORK5CYII=);
  top: calc(var(--m) * -2px);
  left: calc(var(--m) * 1px);
  z-index: 2;
  --tweet-offset: 0;
  --bw: 0;
  --bh: calc(0 - var(--tweet-offset));
  background-position: calc(var(--m) * var(--w) * var(--bw))
    calc(var(--m) * var(--h) * var(--bh));
}

.pos-1 .head {
  --bh: calc(0 - var(--tweet-offset));
}

.pos-2 .head {
  --bh: calc(-1 - var(--tweet-offset));
}

.pos-3 .head {
  --bh: calc(-2 - var(--tweet-offset));
}

.body {
  position: absolute;
  --w: 21px;
  --h: 14px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAOCAYAAADABlfOAAAAAXNSR0IArs4c6QAAAFlJREFUOE9jZKABYMRl5v////8Tso+RkRGrfgxBYgxDtwzdcBRDyTEQZgGywXBDKTEQ3WDaGUoNVyK7FuzSEW4otYIAlqxom06RcwkpEYctq+LM+4TyPT55AEJ+MA89Jl+CAAAAAElFTkSuQmCC);
  width: calc(var(--m) * var(--w));
  height: calc(var(--m) * var(--h));
  background-size: cover;
  top: calc(var(--m) * 5px);
  z-index: 1;
}

.fly .bird {
  --bop-start: -100px;
  --bop-middle: -10px;
  --bop-end: 0px;
  animation: fly-arc forwards 2s ease-in-out;
}

.fly.up .wing,
.fly.down .wing {
  top: calc(var(--m) * 9px);
  animation: infinite wing-flap 0.2s;
}

.fly.up .wing::after,
.fly.down .wing::after {
  background.........完整代码请登录后点击上方下载按钮下载查看