css实现一个卡通小宝宝眨眼效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现一个卡通小宝宝眨眼效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @-webkit-keyframes blinky { 0%, 9%, 11%, 19%, 21%, 69%, 71%, 100% { transform: scaleY(1); } 10%, 20%, 70% { transform: scaleY(0); } } @keyframes blinky { 0%, 9%, 11%, 19%, 21%, 69%, 71%, 100% { transform: scaleY(1); } 10%, 20%, 70% { transform: scaleY(0); } } :root { --black: #9a4c32; --white: #fff; --primary-color: #f26d40; --primary-color-dark: #ee4811; --primary-color-tint: #f79655; --accent-color: #fbe89d; --background: #f8b6a0; --mouth-inner-color: #f5879b; --nose-color: #f5879b; --blush-color: #f5879b; --shadow-color: hsl(266, 21%, 95%); } * { box-sizing: border-box; } body { display: grid; place-items: center; height: 100vh; background-color: var(--background); font-size: 16px; line-height: 1; } .scor { --ear-size: 9rem; position: relative; padding-top: calc(var(--ear-size) + 2rem); padding-bottom: 3rem; } .scor::after { content: ""; position: absolute; z-index: -1; bottom: 1.75rem; left: 50%; height: 2rem; width: 50%; transform: translateX(-50%); border-radius: 100%; background-color: var(--primary-color); opacity: 0.2; } .scor-eye { border-top-left-radius: 50% 55%; border-top-right-radius: 50% 55%; border-bottom-right-radius: 50% 45%; border-bottom-left-radius: 50% 45%; --eye-position-x: 2rem; position: absolute; z-index: 2; top: 4.75rem; height: 1.875rem; width: 1.75rem; background-color: var(--black); transform-origin: center 70%; overflow: hidden; -webkit-animation: blinky 7s infinite; animation: blinky 7s infinite; } .scor-eye::before, .scor-eye::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border-radius: 100%; } .scor-eye::before { top: 0.125rem; height: 40%; width: 40%; background-color: var(--white); } .scor-eye::after { bottom: -0.125rem; height: 40%; width: 70%; background-color: var(--primary-color); } .scor-eye-left { left: var(--eye-position-x); } .scor-eye-right { right: var(--eye-position-x); } .scor-nose { position: relative; z-index: 5; top: 0; height: 1rem; width: 1rem; } .scor-nose::before, .scor-nose::after { content: ""; } .scor-nose::before { position: absolute; top: 0; left: 0; height: 100%; width: 100%; transform: rotate(45deg); border-top-left-radius: 80%; border-top-right-radius: 0.1875rem; border-bottom-left-radius: 0.1875rem; border-bottom-right-radius: 0.25rem; background-color: var(--nose-color); } .scor-nose::after { position: absolute; left: 50%; bottom: calc(100% - 0.5rem); transform: translateX(-50%); height: 2.25rem; width: 3.5rem; border-radius: 0.5rem; background-color: var(--accent-color); } .scor-mouth { position: absolute; bottom: -1.125rem; left: 50%; height: 0.325rem; width: 2.5rem; transform: translateX(-50%) translateY(var(--mouth-translate, 0)); transition: var(--mouth-transition, 0.2s) ease-in-out; } .scor-mouth-line { position: absolute; z-index: 4; left: calc(50% - 0.0625rem); top: 100%; height: 1rem; width: 0.125rem; background-color: var(--black); } .scor-mouth-outer { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 3; overflow: hidden; } .scor-mouth-outer::before { content: ""; position: absolute; bottom: 0; height: 200%; width: calc(100% - 0.25rem); border-radius: 100%; border: 0.125rem solid var(--black); background-color: var(--white); } .scor-mouth-inner { position: absolute; z-index: 1; left: 2%; height: 1.25rem; width: 96%; transform-origin: center top; transform: scaleY(var(--mouth-scale, 0)); border-top-left-radius: 1px 10%; border-top-right-radius: 1px 10%; border-bottom-left-radius: 50% 90%; border-bottom-right-radius: 50% 90%; background-color: var(--black); overflow: hidden; transition: var(--mouth-transition, 0.2s) ease-in-out; } .scor-mouth-inner::before, .scor-mouth-inner::after { content: ""; position: absolute; } .scor-mouth-inner::before { top: 0; left: 50%; height: 0.6875rem; width: 35%; transform: translateX(-50%); border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; background-color: var(--white); } .scor-mouth-inner::after { bottom: -0.125rem; right: 0.125rem; height: 0.625rem; width: 1.5rem; transform: rotate(-10deg); border-radius: 100%; background-color: var(--mouth-inner-color); } .scor-blush { --blush-position-x: 1rem; position: absolute; z-index: 1; top: 6.25rem; height: 1rem; width: 1.75rem; border-radius: 100%; background-color: var(--blush-color); transform: rotate(var(--blush-rotate)); opacity: 0.3; } .scor-blush-left { --blush-rotate: 5deg; left: var(--blush-position-x); } .scor-blush-right { --blush-rotate: -5deg; right: var(--blush-position-x); } .scor-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% 40%; border-bottom-left-radius: 50% 40%; z-index: 2; background-color: var(--white); } .scor-face-lower { position: absolute; z-index: 2; top: 6rem; left: 50%; transform: translateX(-50%); } .scor-face-fluff { --fluff-position-x: 2.5rem; position: absolute; top: 7rem; height: 4.25rem; width: 4.25rem; } .scor-face-fluff::before, .scor-face-fluff::after { content: ""; transform-origin: right top; border-top-left-radius: 90%; border-bottom-right-radius: 90%; border-bottom-left-radius: 0.125rem; border-top-right-radius: 0.125rem; background-color: var(--white); } .scor-face-fluff::before { position: absolute; top: 0; left: 0; height: 100%; width: 100%; transform: rotate(60deg); } .scor-face-fluff::after { position: absolute; left: 0.5rem; top: -1.5rem; height: 3.5rem; width: 3.5rem; transform: rotate(80deg); } .scor-face-fluff-left { right: calc(100% - var(--fluff-position-x)); } .scor-face-fluff-right { transform: rotateY(180deg); left: calc(100% - var(--fluff-position-x)); } .scor-ear { background-color: var(--white); background: linear-gradient(var(--ear-gradient-rotate), var(--primary-color) 30%, var(--primary-color-tint) 30%, var(--primary-color-tint) 40%, var(--white) 40%); overflow: hidden; } .scor-ear, .scor-ear-right-wrap { position: absolute; z-index: 1; top: 3.5rem; height: var(--ear-size); width: var(--ear-size); transform-origin: var(--ear-transform-origin); transform: rotate(var(--ear-rotate)); -webkit-animation: rotateThing 2s ease-in-out infinite alternate; animation: rotateThing 2s ease-in-out infinite alternate; } .scor-ear-right-wrap { --ear-gradient-rotate: -40deg; --ear-rotate: -120deg; --keyframe-rotate-to: -115deg; --ear-transform-origin: left top; --ear-position-shadow-right: 6rem; right: -4rem; } .scor-ear-right-wrap > .scor-ear { top: 0; left: 0; height: 100%; width: 100%; transform: none; } .scor-ear::before, .scor-ear::after { content: ""; position: absolute; } .scor-ear::before { top: 2.5rem; left: 50%; height: 4rem; width: 4rem; transform: translateX(-50%); border-radius: inherit; background-color: var(--accent-color); } .scor-ear::after { top: 1.625rem; left: var(--ear-position-shadow-left, auto); right: var(--ear-position-shadow-right, auto); height: 2rem; width: 4rem; transform: rotate(var(--ear-gradient-rotate)); border-radius: 100%; background-color: var(--shadow-color); mix-blend-mode: multiply; } .scor-ear-left { --ear-gradient-rotate: 40deg; --ear-rotate: 120deg; --keyframe-rotate-to: 115deg; --ear-transform-origin: right top; --ear-position-shadow-left: 6rem; left: -4rem; border-top-left-radius: 90%; border-bottom-right-radius: 90%; border-bottom-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } .scor-ear-right { -webkit-animation: none; animation: none; } .scor-ear-righ.........完整代码请登录后点击上方下载按钮下载查看
网友评论0