css布局实现猫形时钟摆动效果
代码语言:html
所属分类:布局界面
代码描述:css布局实现猫形时钟摆动效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *:after, *:before { box-sizing: border-box; } :root { --hue: 320; --white: #f2f2f2; --black: #404040; --aspect-ratio: calc(300 / 800); --unit: calc((80 / 800) * 1vmin); --width: calc(300 * var(--unit)); --height: calc(800 * var(--unit)); } svg { width: 30vmin; height: 80vmin; position: fixed; top: 50%; } svg:nth-of-type(1) { left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0.15; } svg:nth-of-type(2) { right: 0; height: 800px; width: 300px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } body { min-height: 100vh; background: var(--black); display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; -webkit-transform-origin: top center; transform-origin: top center; } .clock { height: calc(var(--height)); width: calc(var(--width)); position: relative; } .clock__eye { --size: 134; height: calc(var(--size) * var(--unit)); width: calc(var(--size) * var(--unit)); background: var(--white); position: absolute; top: calc(17 * var(--unit)); border-radius: 50%; border: calc(6 * var(--unit)) solid var(--black); left: 50%; } .clock__eye:after { content: ''; height: 110%; width: 110%; border: calc(4 * var(--unit)) solid var(--white); border-radius: 50%; position: absolute; top: 50%; left: 50%; -webkit-clip-path: polygon(50% 50%, 94% 0, 6% 0); clip-path: polygon(50% 50%, 94% 0, 6% 0); } .clock__eye--left { -webkit-transform: translate(-100%, 0%); transform: translate(-100%, 0%); } .clock__eye--left:after { -webkit-transform: translate(-50%, -60%); transform: translate(-50%, -60%); } .clock__eye--right { -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%); } .clock__eye--right:after { -webkit-transform: translate(-50%, -60%); transform: translate(-50%, -60%); } .clock__body { --size: 200; background: var(--white); height: calc(var(--size) * var(--unit)); width: calc(var(--size) * var(--unit)); position: absolute; top: 46%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; } .clock__body:after { --size: calc(25 * var(--unit)); content: ''; position: absolute; top: 50%; left: 50%; border-radius: 50%; background: var(--black); height: var(--size); width: var(--size); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .clock__dot { --size: 10; --radius: 90; height: calc(var(--size) * var(--unit)); width: calc(var(--size) * var(--unit)); background: var(--black); border-radius: 50%; top: 50%; left: 50%; position: absolute; -webkit-transform: translate(-50%, -50%) rotate(calc(((360 / 12) * var(--index)) * 1deg)) translate(0, calc(var(--radius) * var(--unit))); transform: translate(-50%, -50%) rotate(calc(((360 / 12) * var(--index)) * 1deg)) translate(0, calc(var(--radius) * var(--unit))); } .clock__paw { --height: 70; --width: 80; position: absolute; height: calc(var(--height) * var(--unit)); width: calc(var(--width) * var(--unit)); } .clock__paw--top-left { top: calc(238 * var(--unit)); left: 0; } .clock__paw--bottom-left { top: calc(448 * var(--unit)); left: 0; } .clock__paw--top-right { top: calc(238 * var(--unit)); right: 0; } .clock__paw--bottom-right { top: calc(448 * var(--unit)); right: 0; } .clock__pad { --size: calc(20 * var(--unit)); height: var(--size); width: var(--size); background: var(--white); position: absolute; border-radius: 50%; } .clock__pad:nth-of-type(1) { left: 0%; top: 20%; } .clock__pad:nth-of-type(2) { left: 24%; top: 0%; } .clock__pad:nth-of-type(3) { left: 52%; top: 0%; } .clock__pad:nth-of-type(4) { right: 0%; top: 20%; } .clock__pad:nth-of-type(5) { --size: calc(50 * var(--unit)); bottom: 0%; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .clock__face { background: var(--white); position: absolute; top: calc(136 * var(--unit)); left: calc(20 * var(--unit)); height: calc(90 * var(--unit)); width: calc(260 * var(--unit)); border-radius: 0 0 50% 50%/0 0 100% 100%; } .clock__nose { background: var(--black); position: absolute; height: calc(45 * var(--unit)); width: calc(70 * var(--unit)); top: calc(115 * var(--unit)); border-radius: 50%; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .clock__mouth { position: absolute; height: calc(60 * var(--unit)); width: calc(110 * var(--unit)); background: var(--black); border-radius: 50%; bottom: calc(5 * var(--unit)); left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .clock__mouth:before, .clock__mouth:after { content: ''; position: absolute; top: 0; height: 50%; width: 55%; background: var(--white); } .clock__mouth:before { right: 49%; border-radius: 0 0 40% 35%; } .clock__mouth:after { left: 49%; border-radius: 0 0 35% 40%; } .clock__tongue { width: 100%; height: 100%; overflow: hidden; border-radius: 50%; position: relative; } .clock__tongue:before { content: ''; position: absolute; bottom: 0; height: 40%; width: 50%; background: #f42525; border-radius: 50%; left: 50%; -webkit-transform: translate(-45%, 50%); transform: translate(-45%, 50%); } .clock__whiskers { height: 100%; width: 100%; position: relative; } .clock__whisker { background: var(--black); height: calc(5 * var(--unit)); width: calc(70 * var(--unit)); position: absolute; left: 50%; top: 50%; } .clock__whisker:nth-of-type(1) { -webkit-transform-origin: right; transform-origin: right; -webkit-transform: translate(-160%, -550%) rotate(-5deg); transform: translate(-160%, -550%) rotate(-5deg); } .clock__whisker:nth-of-type(2) { -webkit-transform-origin: right; transform-origin: right; width: calc(56 * var(--unit)); -webkit-transform: translate(-160%, -350%) rotate(-15deg); transform: translate(-160%, -350%) rotate(-15deg); } .clock__whisker:nth-of-type(3) { -webkit-transform-origin: left; transform-origin: left; -webkit-transform: translate(60%, -550%) rotate(5deg); transform: translate(60%, -550%) rotate(5deg); } .clock__whisker:nth-of-type(4) { -webkit-transform-origin: left; transform-origin: left; width: calc(56 * var(--unit)); -webkit-transform: translate(60%, -350%) rotate(15deg); transform: translate(60%, -350%) rotate(15deg); } .clock__tail { --swing: 38; width: calc(140 * var(--unit)); height: calc(280 * var(--unit)); position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation: swing 1s infinite alternate ease-in-out; animation: swing 1s infinite alternate ease-in-out; } .clock__tail:after { content: ''; background: var(--white); position: absolute; height: calc(70 * var(--unit)); width: calc(50 * var(--unit)); bottom: 0; left: 50%; -webkit-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: translate(-18%, 0) rotate(-30deg); transform: translate(-18%, 0) rotate(-30deg); border-radius: 0 0 50% 50%/0 0 50% 50%; -webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%); } @-webkit-keyframes swing { from { -webkit-transform: translate(-50%, 0) rotate(calc(var(--swing) * -1deg)); transform: translate(-50%, 0) rotate(calc(var(--swing) * -1deg)); } to { -webkit-transform: translate(-50%, 0) rotate(calc(var(--swing) * 1deg)); transform: translate(-50%, 0) rotate(calc(var(--swing) * 1deg)); } } @keyframes swing { from { -webkit-transform: translate(-50%, 0) rotate(calc(var(--swing) * -1deg)); transform: translate(-50%, 0) rotate(calc(var(--swing) * -1deg)); } to { -webkit-transform: translate(-50%, 0) rotate(calc(var(--swing) * 1deg)); transform: translate(-50%, 0) rotate(calc(var(--swing) * 1deg)); } } .clock__pupil { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0