div布局实现一个万圣节主题卡通效果代码
代码语言:html
所属分类:动画
代码描述:div布局实现一个万圣节主题卡通效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --black: #3b3737; --white: #fff; --grey: #dedede; --primary-color: #e8deac; --primary-color-dark: #ddce84; --primary-color-tint: #f3eed4; --secondary-color: #85725f; --secondary-color-dark: #67594a; --secondary-color-tint: #9f8c78; --accent-color: #d65a2d; --tail-color: #7a6754; --tail-color-tint: #a38d77; --background-color: #4d4949; --disguise-break-transition: 0.6s cubic-bezier(1, -0.6, 0.81, 1.41); --shadow-claw-transition: 0.2s ease-out; } * { box-sizing: border-box; } body { display: grid; place-items: center; height: 100vh; background-color: var(--background-color); font-size: 16px; line-height: 1; } .mimikyu { position: relative; cursor: pointer; } .mimikyu-disguise-line::before, .mimikyu-disguise-line::after { content: ''; } .mimikyu-disguise-line, .mimikyu-disguise-line::before, .mimikyu-disguise-line::after { position: absolute; border: inherit; border-radius: inherit; } .mimikyu-disguise-eye { position: absolute; z-index: 3; bottom: 3.5rem; border-radius: 100%; border: 3px solid; color: var(--black); } .mimikyu-disguise-eye::before { height: 90%; width: 90%; left: 5%; } .mimikyu-disguise-eye::after { height: 70%; width: 70%; left: 5%; } .mimikyu-disguise-eye-left { left: 2rem; height: 2.5rem; width: 2rem; } .mimikyu-disguise-eye-left .mimikyu-disguise-line { top: 10%; left: 20%; height: 70%; width: 70%; } .mimikyu-disguise-eye-left .mimikyu-disguise-line::before { top: 10%; left: 10%; height: 80%; width: 80%; } .mimikyu-disguise-eye-left .mimikyu-disguise-line::after { top: 10%; left: 10%; height: 40%; width: 40%; } .mimikyu-disguise-eye-right { right: 2rem; height: 3rem; width: 2.25rem; } .mimikyu-disguise-eye-right .mimikyu-disguise-line-1 { top: 10%; left: 20%; height: 85%; width: 80%; } .mimikyu-disguise-eye-right .mimikyu-disguise-line-1::before { top: 10%; left: 10%; height: 80%; width: 80%; } .mimikyu-disguise-eye-right .mimikyu-disguise-line-1::after { top: 0; left: -10%; height: 90%; width: 90%; } .mimikyu-disguise-eye-right .mimikyu-disguise-line-2 { top: 30%; left: 40%; height: 40%; width: 50%; } .mimikyu-disguise-eye-right .mimikyu-disguise-line-2::before { top: 10%; left: 10%; height: 80%; width: 80%; } .mimikyu-disguise-eye-right .mimikyu-disguise-line-2::after { top: 20%; left: 5%; height: 60%; width: 60%; } .mimikyu-disguise-blush { position: absolute; z-index: 1; bottom: 3.5rem; border-radius: 6px; border-top: 6px solid var(--accent-color); } .mimikyu-disguise-blush-left { left: 1rem; width: 2rem; -webkit-transform: rotate(5deg); transform: rotate(5deg); } .mimikyu-disguise-blush-left::before { top: -0.125rem; left: -0.25rem; width: 2.75rem; -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } .mimikyu-disguise-blush-left::after { top: 0.125rem; left: -0.25rem; width: 3rem; } .mimikyu-disguise-blush-left .mimikyu-disguise-line { top: 0.325rem; left: 0; width: 2.75rem; -webkit-transform: rotate(-8deg); transform: rotate(-8deg); } .mimikyu-disguise-blush-left .mimikyu-disguise-line::before { width: 2rem; top: -0.1875rem; left: 0.125rem; -webkit-transform: rotate(12deg); transform: rotate(12deg); } .mimikyu-disguise-blush-left .mimikyu-disguise-line::after { width: 1.5rem; top: 0.0625rem; left: 0.5rem; -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } .mimikyu-disguise-blush-right { right: 1.5rem; width: 1.5rem; -webkit-transform: rotate(-7deg); transform: rotate(-7deg); } .mimikyu-disguise-blush-right::before { top: -0.1875rem; width: 2rem; -webkit-transform: rotate(10deg); transform: rotate(10deg); } .mimikyu-disguise-blush-right::after { top: 0.0625rem; left: -0.25rem; width: 2.25rem; -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } .mimikyu-disguise-blush-right .mimikyu-disguise-line { top: 0.325rem; left: -0.25rem; width: 2.75rem; -webkit-transform: rotate(5deg); transform: rotate(5deg); } .mimikyu-disguise-blush-right .mimikyu-disguise-line::before { top: -0.125rem; left: 0.25rem; width: 2.5rem; -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } .mimikyu-disguise-blush-right .mimikyu-disguise-line::after { top: 0.125rem; left: 0.25rem; width: 1.75rem; } .mimikyu-disguise-mouth { position: absolute; height: 6px; border-radius: 3px / 50%; background-color: var(--black); } .mimikyu-disguise-mouth-1, .mimikyu-disguise-mouth-3, .mimikyu-disguise-mouth-5 { -webkit-transform-origin: left center; transform-origin: left center; } .mimikyu-disguise-mouth-3, .mimikyu-disguise-mouth-5 { left: 3px; } .mimikyu-disguise-mouth-2, .mimikyu-disguise-mouth-4, .mimikyu-disguise-mouth-6 { right: 3px; -webkit-transform-origin: right center; transform-origin: right center; } .mimikyu-disguise-mouth-1 { bottom: 3rem; left: 4rem; width: 1.5rem; -webkit-transform: rotate(25deg); transform: rotate(25deg); } .mimikyu-disguise-mouth-1 * { bottom: -2px; } .mimikyu-disguise-mouth-2 { width: 1.25rem; -webkit-transform: rotate(115deg); transform: rotate(115deg); } .mimikyu-disguise-mouth-3 { width: 1rem; -webkit-transform: rotate(-100deg); transform: rotate(-100deg); } .mimikyu-disguise-mouth-4 { width: 1.125rem; -webkit-transform: rotate(95deg); transform: rotate(95deg); } .mimikyu-disguise-mouth-5 { width: 1.375rem; -webkit-transform: rotate(-105deg); transform: rotate(-105deg); } .mimikyu-disguise-mouth-6 { width: 1rem; -webkit-transform: rotate(115deg); transform: rotate(115deg); } .mimikyu-disguise-face { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-top-left-radius: 50% 60%; border-top-right-radius: 50% 60%; border-bottom-right-radius: 50% 35%; border-bottom-left-radius: 50% 35%; z-index: 5; background-color: var(--primary-color); } .mimikyu-disguise-torso { z-index: 3; -webkit-transform: translate3d(0px, 0px, 0px); } .mimikyu-disguise-torso, .mimikyu-disguise-torso::before { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .mimikyu-disguise-torso::before { border-top-left-radius: 30% 70%; border-top-right-radius: 30% 70%; border-bottom-right-radius: 50% 20%; border-bottom-left-radius: 50% 20%; content: ''; -webkit-transform: perspective(1rem) rotateX(3deg); transform: perspective(1rem) rotateX(3deg); background-color: var(--primary-color); } .mimikyu-disguise-torso::after { content: ''; position: absolute; top: -0.5rem; left: 15%; width: 70%; height: 3rem; -webkit-transform-origin: 100% center; transform-origin: 100% center; -webkit-transform: var(--torso-shadow-transform, scale(1, 1)) translate3d(0px, 0px, 10px); transform: var(--torso-shadow-transform, scale(1, 1)) translate3d(0px, 0px, 10px); border-radius: 100%; background-color: var(--primary-color-dark); -webkit-transition: -webkit-transform var(--disguise-break-transition); transition: -webkit-transform var(--disguise-break-transition); transition: transform var(--disguise-break-transition); transition: transform var(--disguise-break-transition), -webkit-transform var(--disguise-break-transition); } .mimikyu-disguise-tail { z-index: -1; bottom: 1rem; right: 0.25rem; height: 3rem; width: 1rem; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: rotate(var(--tail-rotate, 25deg)); transform: rotate(var(--tail-rotate, 25deg)); -webkit-transition: 0.3s 0.4s ease-in-out; transition: 0.3s 0.4s ease-in-out; } .mimikyu-disguise-tail, .mimikyu-disguise-tail::before, .mimikyu-disguise-tail-tip { position: absolute; border-radius: 0.25rem; background-color: var(--tail-color); } .mimikyu-disguise-tail::before, .mimikyu-disguise-tail-tip { border-bottom-left-radius: 0; } .mimikyu-disguise-tail::before { content: ''; bottom: calc(100% - 1rem); left: 1rem; height: 2.5rem; width: 1.5rem; border-top-right-radius: 0; } .mimikyu-disguise-tail-tip { bottom: calc(100% - 2.5rem + 2.5rem); left: 2.5rem; height: 3.5rem; width: 2rem; } .mimikyu-disguise-tail-tip::before { content: ''; position: absolute; top: -0.25rem; left: 0; width: 100%; height: 0.5rem; border-radius: 100%; background-color: var(--tail-color-tint); } .mimikyu-disguise-fray { position: absolute; z-index: 2; border-radius: 0.5rem; background-color: var(--primary-color); } .mimikyu-disguise-fray-1 { top: -2rem; left: 0; height: 3rem; width: 3rem; -webkit-transform: skew(-10deg, -10deg) rotate(10deg); transform: skew(-10deg, -10deg) rotate(10deg); } .mimikyu-disguise-fray-2 { top: -1.325rem; left: 1.5rem; height: 3rem; width: 3rem; -webkit-transform: skew(-20deg, -10deg) rotate(-15deg); transform: skew(-20deg, -10deg) rotate(-15deg); } .mimikyu-disguise-fray-3 { top: -0.75rem; left: 3.75rem; height: 2.5rem; width: 2.5rem; -webkit-transform: skew(-10deg, -10deg) rotate(-45deg); transform: skew(-10deg, -10deg) rotate(-45deg); } .mimikyu-disguise-fray-4 { top: -1.75rem; right: 0.5rem; height: 3rem; width: 3rem; -webkit-transform: skew(10deg, 20deg) rotate(-10deg); transform: skew(10deg, 20deg) rotate(-10deg); } .mimikyu-disguise-fray-5 { right: -0.25rem; top: -2rem; height: 2.5rem; width: 2.5rem; -webkit-transform: skew(5deg, 30deg) rotate(-30deg); transform: skew(5deg, 30deg) rotate(-30deg); } .mimikyu-disguise-frays { position: absolute; top: calc(100% - 0.75rem); left: -5%; width: 110%; } .mimikyu-shadow-fray { position: absolute; z-index: -1; height: 2rem; width: 2rem; border-radius: 0.5rem; background-color: var(--black); } .mimikyu-shadow-fray-1 { top: 0; left: 0; height: 2rem; width: 2rem; -webkit-transform: skew(-15deg, -15deg) rotate(5deg); transform: skew(-15deg, -15deg) rotate(5deg); } .mimikyu-shadow-fray-2 { top: 0.75rem; left: 2.5rem; -webkit-transform: skew(-5deg, -15deg) rotate(-20deg); transform: skew(-5deg, -15deg) rotate(-20deg); } .mimikyu-shadow-fray-3 { top: 0.25rem; left: 4.75rem; -webkit-transform: skew(5deg, 20deg); transform: skew(5deg, 20deg); } .mimikyu-shadow-fray-4 { top: -0.5rem; right: -0.5rem; -webkit-transform: skew(20deg, 20deg) rotate(-20deg); transform: skew(20deg, 20deg) rotate(-20deg); } .mimikyu-shadow-finger { border-top-left-radius: 50% 80%; border-top-right-radius: 50% 80%; border-bottom-right-radius: 50% 20%; border-bottom-left-radius: 50% 20%; position: absolute; top: 0; height: 100%; width: 32%; background-color: var(--black); } .mimikyu-shadow-finger-1 { left: 0; } .mimikyu-shadow-finger-2 { top: -0.25rem; left: 33%; } .mimikyu-shadow-finger-3 { right: 0; } .mimikyu-shadow-fingers { position: absolute; left: 1px; bottom: calc(100% - 2.25rem); width: 2rem; height: 2rem; } .mimikyu-shadow-claw { position: absolute; top: -50%; left: 2rem; height: 6rem; width: 6rem; border-radius: 100%; box-shadow: -1rem 1rem 0 1rem var(--black); } .mimikyu-shadow-claw-wrap { position: absolute; top: 1.25rem; left: 0; height: 6rem; width: 100%; overflow: hidden; } .mimikyu-shadow-rotate { height: inherit; width: inherit; -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(var(--shadow-claw-wrap-rotate, -180deg)); transform: rotate(var(--shadow-claw-wrap-rotate, -180deg)); -webkit-transition: -webkit-transform var(--shadow-claw-transition); transit.........完整代码请登录后点击上方下载按钮下载查看
网友评论0