css实现猫咪喂食动画效果
代码语言:html
所属分类:动画
代码描述:css实现猫咪喂食动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --black: #2a2a33; --white: #fff; --grey: #dedede; --primary-color: #4c4d5e; --primary-color-dark: #353642; --primary-color-tint: #63647a; --secondary-color: #68e8d7; --secondary-color-rgba: rgba(104, 232, 215, 0.7); --secondary-color-dark: #3ce1cb; --secondary-color-tint: #94efe3; --background-color: #777891; --blush-color: #ff6ec7; --mouth-inner-color: #633440; --face-detail-color: var(--black); --choco: #4d4443; --choco-dark: #423c3b; --shadow-color: #707187; } * { box-sizing: border-box; } body { display: grid; place-items: center; height: 100vh; background-color: var(--background-color); font-size: 16px; line-height: 1; } .suppi { --eye-top-radius: 0; --eye-bottom-radius: 50% 75%; --eye-inner-top-radius: 0; --mouth-width: 0.75rem; --blush-scale: 1; position: relative; z-index: 2; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; } .suppi::before { content: ''; position: absolute; z-index: 0; bottom: 1.25rem; height: 2rem; width: 9rem; border-radius: 50%; background-color: var(--shadow-color); } .suppi-eye { position: absolute; z-index: 3; top: var(--eye-top, 6rem); height: 2.5rem; width: 3.25rem; -webkit-transform-origin: center 20%; transform-origin: center 20%; background-color: var(--secondary-color); border-top-left-radius: var(--eye-top-radius); border-top-right-radius: var(--eye-top-radius); border-bottom-left-radius: var(--eye-bottom-radius); border-bottom-right-radius: var(--eye-bottom-radius); overflow: hidden; -webkit-transition: var(--eye-transition, border-radius 0.2s ease-in-out, top, 0.4s ease-in-out); transition: var(--eye-transition, border-radius 0.2s ease-in-out, top, 0.4s ease-in-out); } .suppi-eye::before { content: ''; position: absolute; top: 0; height: 70%; width: 0.75rem; -webkit-transform: var(--eye-inner-transform, translateY(0)); transform: var(--eye-inner-transform, translateY(0)); border-top-left-radius: var(--eye-inner-top-radius); border-top-right-radius: var(--eye-inner-top-radius); border-bottom-left-radius: 0.75rem 2rem; border-bottom-right-radius: 0.75rem 2rem; background-color: var(--primary-color); -webkit-transition: var(--eye-inner-transition, 0.3s ease-in-out); transition: var(--eye-inner-transition, 0.3s ease-in-out); } .suppi-eye-left { left: 1.125rem; } .suppi-eye-left::before { right: 0.875rem; } .suppi-eye-right { right: 1.125rem; } .suppi-eye-right::before { left: 0.875rem; } .suppi-nose { border-top-left-radius: 50% 20%; border-top-right-radius: 50% 20%; border-bottom-right-radius: 50% 80%; border-bottom-left-radius: 50% 80%; position: absolute; left: 50%; top: 7.5rem; height: 0.1875rem; width: 0.325rem; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: var(--face-detail-color); } .suppi-mouth { position: absolute; top: 8rem; left: 50%; height: 3.125rem; width: var(--mouth-width); -webkit-transform: translateX(-50%); transform: translateX(-50%); overflow: hidden; -webkit-transition: var(--mouth-transtion, width 0.3s 0.1s ease-in-out); transition: var(--mouth-transtion, width 0.3s 0.1s ease-in-out); } .suppi-mouth::before, .suppi-mouth::after { content: ''; position: absolute; height: 0.5rem; width: 1.125rem; border-radius: 100%; border-bottom: 2px solid var(--face-detail-color); background-color: var(--primary-color); } .suppi-mouth::before { left: 50%; } .suppi-mouth::after { right: 50%; } .suppi-mouth-inner { position: absolute; z-index: -1; top: 0.25rem; left: calc(50% - 0.75rem); width: 1.5rem; height: 2.5rem; -webkit-transform-origin: center top; transform-origin: center top; -webkit-transform: scaleY(0); transform: scaleY(0); background-color: var(--mouth-inner-color); border-bottom-left-radius: 50% 70%; border-bottom-right-radius: 50% 70%; overflow: hidden; -webkit-transition: -webkit-transform 0.1s ease-in-out; transition: -webkit-transform 0.1s ease-in-out; transition: transform 0.1s ease-in-out; transition: transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out; } .suppi-mouth-inner::after { content: ''; position: absolute; bottom: -0.5rem; left: 0.25rem; height: 2.25rem; width: 120%; border-radius: 100%; background-color: var(--blush-color); } .suppi-blush { position: absolute; z-index: 1; top: 7.75rem; height: 1.25rem; width: 2.25rem; border-radius: 50%; background-color: var(--blush-color); opacity: var(--blush-opacity, 0.2); -webkit-transition: var(--blush-transition, transform 0.4s ease-in-out, opacity 0.4s ease-in-out); transition: var(--blush-transition, transform 0.4s ease-in-out, opacity 0.4s ease-in-out); } .suppi-blush-left { left: 0.5rem; -webkit-transform: rotate(5deg) scale(var(--blush-scale)); transform: rotate(5deg) scale(var(--blush-scale)); } .suppi-blush-right { right: 0.5rem; -webkit-transform: rotate(-5deg) scale(var(--blush-scale)); transform: rotate(-5deg) scale(var(--blush-scale)); } .suppi-face { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-top-left-radius: 50% 55%; border-top-right-radius: 50% 55%; border-bottom-right-radius: 50% 45%; border-bottom-left-radius: 50% 45%; z-index: 5; background-color: var(--primary-color); } .suppi-ear { position: absolute; z-index: 1; top: 0rem; height: 6.5rem; width: 6rem; background-color: var(--primary-color); overflow: hidden; } .suppi-ear::before { content: ''; position: absolute; top: -1.5rem; height: 150%; width: 100%; border-radius: 100%; background-color: var(--secondary-color); } .suppi-ear-left { --ear-transform: 5deg; right: calc(100% - 3.25rem); -webkit-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(var(--ear-transform)); transform: rotate(var(--ear-transform)); border-top-right-radius: 100% 10%; border-bottom-left-radius: 70% 90%; } .suppi-ear-left::before { left: -3rem; -webkit-transform: rotate(-60deg); transform: rotate(-60deg); } .suppi-ear-right { --ear-transform: -5deg; left: calc(100% - 3.25rem); -webkit-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(var(--ear-transform)); transform: rotate(var(--ear-transform)); border-top-left-radius: 100% 10%; border-bottom-right-radius: 70% 90%; } .suppi-ear-right::before { right: -3rem; -webkit-transform: rotate(60deg); transform: rotate(60deg); } .suppi-head { position: relative; z-index: 10; height: 11.5rem; width: 12rem; } .suppi-head::before { content: ''; position: absolute; z-index: -1; bottom: -0.5rem; left: 40%; height: 1rem; width: 20%; border-radius: 100%; background-color: var(--primary-color-dark); } .suppi-arm { border-top-left-radius: 50% 10%; border-top-right-radius: 50% 10%; border-bottom-right-radius: 50% 30%; border-bottom-left-radius: 50% 30%; position: absolute; z-index: 4; top: 4.75rem; height: 5rem; width: 2rem; background-color: var(--primary-color); -webkit-transform-origin: 50% 1rem; transform-origin: 50% 1rem; -webkit-transition: -webkit-transform 0.15s ease-in-out; transition: -webkit-transform 0.15s ease-in-out; transition: transform 0.15s ease-in-out; transition: transform 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; } .suppi-arm-paw { border-top-left-radius: 50% 30%; border-top-right-radius: 50% 30%; border-bottom-right-radius: 50% 30%; border-bottom-left-radius: 50% 30%; position: absolute; top: 1rem; height: 4rem; width: 100%; -webkit-transform-origin: center 1rem; transform-origin: center 1rem; -webkit-transform: rotate(var(--paw-rotate, 0deg)); transform: rotate(var(--paw-rotate, 0deg)); background-color: inherit; -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; } .suppi-arm-left { z-index: 5; left: 0; -webkit-transform: rotate(-10deg) translateY(var(--arm-left-translate, 0)); transform: rotate(-10deg) translateY(var(--arm-left-translate, 0)); height: 3rem; } .suppi-arm-right { right: 0; -webkit-transform: rotate(10deg); transform: rotate(10deg); } .suppi-foot { position: absolute; z-index: 2; bottom: 0; width: 4.5rem; height: 1.5rem; background-color: var(--primary-color-dark); } .suppi-leg { position: absolute; z-index: 1; bottom: -1rem; height: 5rem; width: 3.5rem; } .suppi-leg-upper { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; border-radius: 50%; background-color: var(--primary-color-dark); overflow: hidden; } .suppi-leg-upper::after { content: ''; position: absolute; top: -2.5rem; height: 100%; width: 120%; border-radius: 50%; background-color: var(--primary-color); } .suppi-leg-left { right: calc(100% - 2rem); } .suppi-leg-left .suppi-foot { right: calc(100% - 2rem); -webkit-transform: rotate(40deg); transform: rotate(40deg); border-top-left-radius: 80% 70%; border-bottom-left-radius: 0.5rem 30%; border-top-right-radius: 20% 30%; border-bottom-right-radius: 1rem 70%; -webkit-transform-origin: 90% 50%; transform-origin: 90% 50%; } .suppi-leg-left .suppi-leg-upper::after { left: -2rem; } .suppi-leg-right { left: calc(100% - 2rem); } .suppi-leg-right .suppi-foot { left: calc(100% - 2rem); -webkit-transform: rotate(-40deg); transform: rotate(-40deg); border-top-right-radius: 80% 70%; border-bottom-right-radius: 0.5rem 30%; border-top-left-radius: 20% 30%; border-bottom-left-radius: 1rem 70%; -webkit-transform-origin: 10% 50%; transform-origin: 10% 50%; } .suppi-leg-right .suppi-leg-upper::after { right: -2rem; } .suppi-wing { --wing-transform: rotate(20deg); z-index: 1; top: 2rem; height: 2rem; width: 6.5rem; -webkit-transform-origin: 90% 50%; transform-origin: 90% 50%; -webkit-transform: var(--wing-transform); transform: var(--wing-transform); } .suppi-wing, .suppi-wing::before { position: absolute; border-top-right-radius: 80% 50%; border-bottom-right-radius: 80% 50%; border-top-left-radius: 20% 50%; border-bottom-left-radius: 20% 50%; background-color: var(--secondary-color-rgba); } .suppi-wing::before { content: ''; right: -0.5rem; top: 1.5rem; height: 1.5rem; width: 4rem; -webkit-transform: rotate(-40deg); transform: rotate(-40deg); } .suppi-wing-left { right: calc(100% - 1rem); } .suppi-wing-right { --wing-transform: rotate(-20deg) rotateY(180deg); left: -0.25rem; } .suppi-tail { --tail-width: 1rem; --spiral-width: 2.5rem; --tail-transform: rotate(10deg); position: absolute; z-index: 0; bottom: 0.5rem; left: 50%; height: 10rem; width: 10rem; -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: var(--tail-transform); transform: var(--tail-transform); } .suppi-tail-length { position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; } .suppi-tail-length::before { content: ''; position: absolute; right: 0; bottom: 0; height: 15rem; width: 15rem; bo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0