js+css实现可爱可交互的圆柱体猫咪动画效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现可爱可交互的圆柱体猫咪动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; user-select: none; } body { padding: 0; margin: 0; font-family: sans-serif; background-color:#1bd2b6; color: white; overscroll-behavior: contain; --cat-color: #9febf8; --dark: #703110; } .wrapper { position: absolute; height: 100dvh; width: 100dvw; overflow: hidden; padding: 20px; display: flex; align-items: center; justify-content: center; } .cat { position: absolute; --h: 60px; height: var(--h); width: 50px; background-color: var(--cat-color); transition: transform 0.9s; display: flex; align-items: center; justify-content: center; cursor: grab; } .panel { position: absolute; width: 50px; height: 50px; transition: transform 0.9s; transform-style: preserve-3d; perspective: 1000px; } .back { top: -25px; border-radius: 50%; background-color: var(--cat-color); cursor: pointer; z-index: 1; } .ears-wrapper { bottom: -15px; z-index: 2; } .front { bottom: -25px; cursor: pointer; z-index: 3; } .face { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAKlJREFUSEvFltENwCAIRMsIXaWbdZJu1lU6Ak1NMIqKEoX6K8fLoSiwDSxExFYYAEAvhRggJeeJJVgVokk+AisgMwACclcZZAWgBoqQlQAO8oNYuEjdBCfmEEtAdMMh57GHvet+eo1c7Le0kEIoiNQakKT1h3wOzMulPoRBQVYuScNrrrkcPn3i0oxUIoumpCff74G0cJN+XP4/4wpHtYHiv2mFN+Xs3PUCiD9+/hPRnGEAAAAASUVORK5CYII=); --w: 25px; --h: 25px; } .ears { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAbCAYAAACJISRoAAAAAXNSR0IArs4c6QAAAHVJREFUSEvtk0sKwDAIROP9D23IwmJNEF5b6Gayykfn4WhspOXuvo5mZvme7E8al1g8ZkEC6/JbSAA72Em85v1XCbGp9itXFjpbJW8AAazNv0G+AGTQVgkZUxr7+D8QkCDErSG7ZBdyAAVrumQXcgAFa7qQXRMPMDgcoxhOHAAAAABJRU5ErkJggg==); --w: 25px; --h: 27px; } .pix { width: calc(var(--w) * 2); height: calc(var(--h) * 2); background-size: calc(var(--w) * 2) calc(var(--h) * 2); transition: transform 0.9s; image-rendering: pixelated; } .back .tail { display: none; --w: 25px; --h: 25px; } .cat.flip .face { display: none; } .cat.flip .front { border-radius: 50%; background-color: var(--cat-color); z-index: 1; } .cat.flip .ears { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAbCAYAAACJISRoAAAAAXNSR0IArs4c6QAAAHxJREFUSEtjZEAC81//+A/iJopyMCKLk8LGZgbcMJgksoGkWIZPP15LYBbiswyb4ej6Bs4npAQTenwh+wxmDoZPKLEAZiF65KNYQg0LkC3C8AkpyZRUtWTnB1IsGrWElNBiGA2u0eAiKQRIUjyaukaDi6QQIEnxaOoiKbgArwk4HK85LucAAAAASUVORK5CYII=); } .cat.flip .back { z-index: 3; } .cat.flip .back .tail { display: block; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAMJJREFUSEvN1tENgCAMBFA7gqu4mZO4mas4AqYmEKy05QSM/Kp9XCItNFWsEELQXiMi8kqYL1jFZWELKyJI8RrsgbQAEZSpbkgPoAQlpCcgoe+QESnyNFeS4chIIKX5DbIu87Tth9c91OfkJWkFWDaRHsBrBMXhJChwJbHOSakginCzhBHeFAIlBE1TC8UQboO0du0leiC90+SDq3oy8q555SdfS2JOxtgXrC4QMQlqozf9wlrT8VpO/h18W5Fo673rBGwgn/7FATxCAAAAAElFTkSuQmCC); } .indicator { position: absolute; top: 10px; right: 10px; color: white; } .cat { animation: squidge infinite 3s; --offset: 10px; } .cat.walk { animation: squidge infinite 1s; --offset: 20px; } @keyframes squidge { 0%, 100% { height: calc(var(--h) - var(--offset)); } 50% { height: var(--h); } } .sign { position: absolute; color: white; bottom: 10px; right: 10px; font-size: 10px; } a { color: white; text-decoration: none; } a:hover { text-decoration: underline; } </style> </head> <body translate="no"> <div class="wrapper"> <div class="cat"> <div class="front panel"> <div class="img face pix"></div> </div> <div class="ears-wrapper panel"> <div class="img ears pix"></div> </div> <div class="back panel"> <div class="img tail pix"></div> </div> </div> </div> <div class="sign"> by auther / <a href="" >auther</a> </div> <script > const wrapper = document.querySelector('.wrapper'); const cat = { el: document.querySelector('.cat'), front: document.querySelector('.front'), back: document.querySelector('.back'), images: { els: document.querySelectorAll('.img'), deg: 0 }, panels: document.querySelectorAll('.panel'), deg: 0, x: 0, y: 0, roll: { x: 0, y: 0 }, isWalking: false, idleCount: 4, spinDeg: 45 }; const px = n => `${n}px`; const setStyles = ({ el, x, y, deg }) => { el.style.transform = `translate(${x ? px(x) : 0}, ${y ? px(y) : 0}) rotate(${deg || 0}deg)`; }; const nearest360 = deg => { const nearestN = n => n - 1 + Math.abs((n - 1) % 360 - 360); if (deg < 0) { return -nearestN(deg * -1); } return deg === 0 ? 0 : nearestN(deg); }; const moduloN = (deg, n) => { if (deg < 0) { return deg % n + n; } return deg % n; }; const rotateX = ({ el, deg }) => { const zKey = { 0: -deg, 45: -deg, 90: -deg, 135: -deg + 90, 180: -deg + 180, 225: -deg - 90, 270: -deg, 3.........完整代码请登录后点击上方下载按钮下载查看
网友评论0