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), var(--y));
transition: 0.3s;
z-index: 2;
}
.up .neck-base{
--y: calc(2 * var(--m));
}
.right .neck-base{
--x: calc(10 * var(--m));
}
.down .neck-base{
--y: calc(3 * var(--m));
}
.left .neck-base{
--x: calc(2 * var(--m));
}
.head {
position: absolute;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAAAXNSR0IArs4c6QAAAF9JREFUOE/t1EsKACAIBUDf/Q9tRBhmf7FdLQPHUgsUvBDs0RRkZl4lAzCM7TZ3kE1i4Qa8xQTXaAW9mEU/6J9Kacy7GuazeTs9HBu57C26HGxdwR18/PT8bSmR4b9NAm06MBHW1BzVAAAAAElFTkSuQmCC);
--w: 20;
--h: 16;
width: calc(var(--w) * var(--m));
height: calc(var(--h) * var(--m));
margin-top: calc(var(--h) * -2px + 4px);
margin-left: calc(((var(--w) * 2) - var(--neck-w)) * -0.5px);
}
.down.left .head,
.down.right .head {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAAAXNSR0IArs4c6QAAAIRJREFUOE9jZKAyYKSyeQw4Dfz///9/fJYxMjJi1YshSMggdEvQDUYxkFTDYIYjGwo3kFzD0A0dYgZmmUowTDv9Amfk4pOHhSOKl6luICWJHMOFf05EYU3IzOZLCdqDkWxwGQYzCZ+hGAmbkGG4DMWb9QgZymKxjOhCBK4Ql6GkGAbyDQD+hEQRv/jlIAAAAABJRU5ErkJggg==);
}
.up.left .head,
.up.right .head {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAAAXNSR0IArs4c6QAAAIFJREFUOE9jZICCPyei/sPYyDSLxTJGbOK4xMCKcRkG00SKoYzYDGM2X0rQUYyMjFhdjuFCYgxDtg3dYLgtIJeSahjMYGRD4Qb+//8fa6QQ9DtUAczQUQOJDTFMdbQPQ5Cd5MY01mQD8wSphuJM2OihQshgvFmP/KjAEjnUNAxkFgC13zgRXycP6gAAAABJRU5ErkJggg==);
}
.down .head {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAA.........完整代码请登录后点击上方下载按钮下载查看
网友评论0