js+css实现母鸭带小鸭散步可交互动画效果代码-html代码-BFW代码库

js+css实现母鸭带小鸭散步可交互动画效果代码

代码语言：html

所属分类：动画

代码描述：js+css实现母鸭带小鸭散步可交互动画效果代码

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

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

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

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

body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  background-color: rgb(23, 184, 139);
}

p, h1, h2, h3, h4 {
  display: inline-block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0px;
}

.wrapper {
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.duck *,
.duckling * {  
  background-size: calc(var(--w) * var(--m)) calc(var(--h) * var(--m)) !important; 
  background-repeat: no-repeat !important;
  image-rendering: pixelated;
}

.duck,
.duckling {
  position: absolute;
  transition: 1s;
  --w: 20;
  --h: 14; 
  --m: 2px;
  --neck-w: 16;
  width: calc(var(--w) * var(--m));
  height: calc(var(--h) * var(--m));
  --color: #fff;
  --dark-yellow: #fcc85b;
}

.body {
  position: absolute;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAAAXNSR0IArs4c6QAAAFRJREFUOE9jZMAC/v///x+bOLoYIyMjI4YYsgCxBuEzGG4DuYbBDIe5FmwgpYYhG0p9A6nlOrgrR6CBgz+WYbFDaeSgJGxKDUXO0xiZm5QwxVY4AADV9Tf/s/CuJAAAAABJRU5ErkJggg==);
  width: calc(var(--w) * var(--m));
  height: calc(var(--h) * var(--m));
}

.tail {
  position: absolute;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAHCAYAAAArkDztAAAAAXNSR0IArs4c6QAAAC1JREFUGFdjZICC/////wcxGRkZGcE0iIAJwhSBJHFLoKuG68IpgdcOZEmYvQA6WRwAeFIlLwAAAABJRU5ErkJggg==);
  --w: 6;
  --h: 7;
  --x: calc(7 * var(--m));
  --y: calc(-2 * var(--m));
  width: calc(var(--w) * var(--m));
  height: calc(var(--h) * var(--m));
  transform: translate(var(--x), var(--y));
  transition: 1s;
  z-index: -10;
}

.up .tail {
  --y: calc(-2 * var(--m));
}

.right .tail {
  --x: calc(-2 * var(--m));
}

.down .tail {
  --y: calc(-4 * var(--m));
}

.left .tail {
  --x: calc(15 * var(--m));
}


.neck {
  position: absolute;
  background-color: --var(--color);
  width: calc(var(--neck-w) * 1px);
  height: calc(8 * var(--m));
  transition: 0.8s;
  bottom: 0;
}

.neck-base {
  position: absolute;
  width: calc(8 * var(--m));
  height: calc(8 * var(--m));
  --x: calc(6 * var(--m));
  --y: calc(2 * var(--m));
  transform: translate(var(--x.........完整代码请登录后点击上方下载按钮下载查看