div+css实现滚筒式洗衣机清洗宠物动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现滚筒式洗衣机清洗宠物动画效果代码
代码标签: div css 滚筒式 洗衣机 清洗 宠物 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --timing: 2500ms; } body { display: grid; place-items: center; height: 100vh; overflow: hidden; background-color: #69B6E1; font-size: clamp(0.6rem, calc(1vw + 0.1rem), 1.5rem); } body * { position: absolute; } body *::before, body *::after { position: absolute; } .playground { --bottom-elements: 2.4em; --main-width: 30em; width: var(--main-width); height: var(--main-width); } /* ----- Shadow ----- */ .shadow { width: calc(var(--main-width) + 5em); height: 1em; border-radius: 0.5em; bottom: 2em; left: 0.5em; background-color: rgba(0, 0, 0, 0.2); z-index: -1; } /* ----- Washing machine ----- */ .washing-machine { --delay-animation: 500ms; width: 17.5em; height: 25em; animation: shake-machine var(--time, 2500ms) var(--delay, 0ms) infinite ease; bottom: var(--bottom-elements); left: 4em; border-radius: 2.5em 2.5em 1em 1em; background: linear-gradient(#F2FBFF 82%, #E5EBEE 82%, #E5EBEE 83%, #F2FBFF 83%); box-shadow: 4.25em 0 #C5C7C8; z-index: 1; } @keyframes shake-machine { 10% { transform: translateY(-0.125em); } 11% { transform: translateY(0); } 12% { transform: translateY(-0.125em); } 13% { transform: translateY(0); } 14% { transform: translateY(-0.125em); } 15% { transform: translateY(0); } 16% { transform: translateY(-0.125em); } 17% { transform: translateY(0); } 18% { transform: translateY(-0.125em); } 19% { transform: translateY(0); } 20% { transform: translateY(-0.125em); } 21% { transform: translateY(0); } 22% { transform: translateY(-0.125em); } 23% { transform: translateY(0); } 24% { transform: translateY(-0.125em); } 25% { transform: translateY(0); } 26% { transform: translateY(-0.125em); } 27% { transform: translateY(0); } 28% { transform: translateY(-0.125em); } 29% { transform: translateY(0); } 30% { transform: translateY(-0.125em); } 31% { transform: translateY(0); } 32% { transform: translateY(-0.125em); } 33% { transform: translateY(0); } 34% { transform: translateY(-0.125em); } 35% { transform: translateY(0); } 36% { transform: translateY(-0.125em); } 37% { transform: translateY(0); } 38% { transform: translateY(-0.125em); } 39% { transform: translateY(0); } 40% { transform: translateY(-0.125em); } 41% { transform: translateY(0); } 42% { transform: translateY(-0.125em); } 43% { transform: translateY(0); } 44% { transform: translateY(-0.125em); } 45% { transform: translateY(0); } 46% { transform: translateY(-0.125em); } 47% { transform: translateY(0); } 48% { transform: translateY(-0.125em); } 49% { transform: translateY(0); } 50% { transform: translateY(-0.125em); } 51% { transform: translateY(0); } 52% { transform: translateY(-0.125em); } 53% { transform: translateY(0); } } .washing-machine .board { width: 90%; height: 2.5em; display: flex; align-items: center; gap: 0.5em; padding-inline: 1.5em; top: 2.25em; left: 5%; border-radius: 1em; background-color: #E8F1F4; } .washing-machine .board .button { width: 1.5em; height: 0.65em; position: static; border-radius: 0.15em; background-color: #D9DDDF; box-shadow: 0.15em 0 #C2C4C6; } .washing-machine .board .button:nth-of-type(2) { margin-right: auto; } .washing-machine .board .button.circle { width: 1.2em; height: 1.2em; border-radius: 50%; } .washing-machine .badge { width: 3.25em; height: 1.85em; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding-block: 0.35em; bottom: 0.65em; right: 2em; background-color: #E5EBEE; box-shadow: -0.15em 0 #C5C7C8; border-radius: 0.25em; } .washing-machine .badge::before { width: 1.25em; height: 0.2em; content: ""; top: -0.2em; background-color: #D4D8DA; border-radius: 0.05em 0.05em 0 0; z-index: -1; } .washing-machine .badge .line { width: 65%; height: 0.175em; flex: none; position: static; border-radius: 0.1em; background-color: #D4D8DA; } /* ----- Clothes ----- */ .clothes { right: -4em; bottom: var(--bottom-elements); } .clothes .shirt { --bg: #FCB900; --shadow: #D59800; --extra-bg: linear-gradient(transparent, transparent); --shadow-size: 85%; --height: 0.75em; width: 7em; height: var(--height); position: static; border-radius: calc(var(--height) / 2); background: var(--extra-bg), radial-gradient(circle calc(var(--height) / 2) at var(--shadow-size) 50%, var(--bg) 100%, transparent 0), linear-gradient(90deg, var(--bg) var(--shadow-size), var(--shadow) var(--shadow-size)); } .clothes .shirt.orange { --bg: #EE6E02; --shadow: #C55602; } .clothes .shirt.white { --extra-bg-color: #CCD0D2; --bg: #F7EAEA; --shadow: #CCD0D2; --extra-bg: linear-gradient(90deg, transparent 60%, var(--extra-bg-color) 60%, var(--extra-bg-color) 63%, transparent 63%), linear-gradient(90deg, transparent 65%, var(--extra-bg-color) 65%, var(--extra-bg-color) 68%, transparent 68%); } /* ----- Window ----- */ .window { --border-color: #E5EBEE; --bg-color: #6E6D71; width: 12.25em; height: 12.25em; left: 9em; top: 7em; transform: translateX(-50%); border-radius: 50%; box-shadow: 0.6em 0 #C5C7C8; background-color: var(--bg-color); overflow: hidden; z-index: 1; } .window::before { width: 100%; height: 100%; --opacity-color: rgba(255, 255, 255, 0.15); content: ""; box-shadow: 0 0 0 1.5em var(--border-color) inset; border-radius: 50%; z-index: 10; background: linear-gradient(-45deg, transparent 53%, var(--opacity-color) 53%, var(--opacity-color) 55%, transparent 55%, transparent 59%, var(--opacity-color) 59%, var(--opacity-color) 65%, transparent 65%); } .window::after { width: 4em; height: 4em; content: ""; right: -0.55em; top: 50%; transform: translateY(-50%); border-radius: 50%; background-color: var(--border-color); } .content { width: 100%; height: 100%; animation: content-rotate var(--time, 2500ms) var(--delay, 0ms) infinite ease-in-out; } @keyframes content-rotate { 0%, 55% { transform: rotate(-3turn); } 24%, 48% { filter: blur(0.075em); } 48% { filter: none; } 55% { transform: initial; } } .cat { --bg-cat: #2A2538; width: 4.5em; height: 6.5em; left: 3.95em; bottom: 1em; transform-origin: center top; } .cat .head { width: 100%; height: 2em; display: flex; justify-content: center; align-items: center; gap: 0.15em; top: 0.75em; border-radius: 1em; background-color: var(--bg-cat); } .cat .head .eye { width: 0.75em; height: 0.75em; position: static; margin-top: -0.325em; border-radius: 50%; clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); background: radial-gradient(circle 0.15em at 50% 50%, black 100%, transparent 0), white; } .cat .head .ear { --height: 0.75em; --width: 0.45em; --position: 1.1em; width: 0; border-style: solid; border-width: 0 var(--width) var(--height) var(--width); border-color: transparent transparent var(--bg-cat) transparent; top: calc(var(--height) * -1); left: var(--position); } .cat .head .ear.right { left: initial; right: var(--position); z-index: 5; transform-origin: bottom left; animation: ear-animation var(--time, 2500ms) var(--delay, 0ms) infinite ease; } @keyframes ear-animation { 0%, 68%, 78%, 86% { transform: skew(0); } 74%, 82% { transform: skew(-40deg); } } .cat .body { width: 70%; height: 3.35em; top: 2.65em; left:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0