div+css实现可爱大眼睛女孩鼠标交互动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现可爱大眼睛女孩鼠标交互动画效果代码
代码标签: div ss 可爱 大眼睛 女孩 鼠标 交互 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@500&display=swap"); @keyframes blinky { 0%, 9%, 11%, 19%, 21%, 69%, 71%, 100% { transform: scaleY(1); } 10%, 20%, 70% { transform: scaleY(0); } } :root { --black: #413564; --white: #fff; --primary-color: #554684; --primary-color-dark: #413564; --primary-color-tint: #8979b9; --secondary-color: #fff5f0; --accent-color: #ff4dde; --sparkle-color: #ffe085; --shirt-color: #fff; --shirt-color-dark: #eaeaea; --shirt-color-dark-2: #ddd; --bow-color-1: #961E60; --bow-color-2: #411854; --bow-gradient: repeating-linear-gradient(-45deg, var(--bow-color-1) 0 0.25rem, var(--bow-color-2) 0.25rem 0.375rem); --background: #c4bcdc; --line-width-1: 0.125rem; --line-width-2: 0.375rem; } * { box-sizing: border-box; } body { display: grid; place-items: center; height: 100vh; background-color: var(--background); font-size: 16px; line-height: 1; font-family: "Kiwi Maru", serif; overflow-x: hidden; } .komi { position: relative; } .komi *, .komi *::before, .komi *::after { position: absolute; } .komi-head, .komi-body, .komi-hair-extension { animation: var(--hover-animation, none); } .komi-eye { top: 4.5rem; right: var(--eye-right); bottom: auto; left: var(--eye-left); --flip: 1; --eye-offset: 1.25rem; --pupil-offset: 0.5rem; --eye-line-top-offset: -13%; --eye-line-bottom-offset: 16%; z-index: 2; height: 3.75rem; width: 4rem; transform-origin: center 70%; border-radius: 100%; background-color: var(--white); animation: blinky 7s infinite; } .komi-eye::before, .komi-eye::after { content: ""; } .komi-eye::before { top: -0.0625rem; right: var(--eye-line-top-right); bottom: auto; left: var(--eye-line-top-left); height: 120%; width: 120%; transform: rotate(calc(-12deg * var(--flip))); border-radius: 100%; border: var(--line-width-2) solid transparent; border-top: var(--line-width-2) solid var(--black); } .komi-eye::after { top: auto; right: var(--eye-line-bottom-right); bottom: 0; left: var(--eye-line-bottom-left); height: 15%; width: 50%; transform: rotate(calc(8deg * var(--flip))); border-radius: 100%; border: var(--line-width-1) solid transparent; border-bottom: var(--line-width-1) solid var(--black); } .komi-eye-sparkle { inset: 15% 20%; transform: scale(var(--eye-sparkle-scale, 0)); transition: 0.4s ease-in-out; } .komi-eye-sparkle::before, .komi-eye-sparkle::after { content: ""; border-radius: 100%; background-color: var(--sparkle-color); } .komi-eye-sparkle::before { left: 50%; height: 100%; width: 0.5rem; transform: translateX(-50%); animation: twinkleY 0.3s infinite; } .komi-eye-sparkle::after { top: 50%; width: 100%; height: 0.5rem; transform: translateY(-50%); animation: twinkleX 0.3s 0.3s infinite; } .komi-eye-pupil { top: 0.75rem; right: var(--pupil-right); bottom: auto; left: var(--pupil-left); height: 2.5rem; width: 2.5rem; transform: scale(var(--eye-pupil-scale, 1)); border-radius: 100%; background-color: var(--black); transition: 0.4s ease-in-out; overflow: hidden; } .komi-eye-pupil::before { content: ""; top: 60%; left: 50%; height: 100%; width: 130%; transform: translateX(-50%); border-radius: 100%; background-color: var(--primary-color-tint); } .komi-eye-left { --eye-left: var(--eye-offset); --pupil-right: var(--pupil-offset); --eye-line-top-left: var(--eye-line-top-offset); --eye-line-bottom-left: var(--eye-line-bottom-offset); } .komi-eye-right { --flip: -1; --eye-right: var(--eye-offset); --pupil-left: var(--pupil-offset); --eye-line-top-right: var(--eye-line-top-offset); --eye-line-bottom-right: var(--eye-line-bottom-offset); } .komi-blush { top: 7.5rem; right: var(--blush-right); bottom: auto; left: var(--blush-left); --blush-offset: 0.75rem; height: 2rem; width: 2.5rem; border-radius: 100%; background-color: var(--accent-color); opacity: var(--blush-opacity, 0.1); transition: 0.8s; } .komi-blush-left { --blush-left: var(--blush-offset); } .komi-blush-right { --blush-right: var(--blush-offset); } .komi-ear { top: 5.75rem; right: var(--ear-right); bottom: auto; left: var(--ear-left); --flip: 1; --ear-offset: -1.25rem; height: 3rem; width: 2rem; transform: rotate(calc(40deg * var(--flip))); border-radius: 100%; background-color: var(--secondary-color); } .komi-ear-left { --flip: -1; --ear-left: var(--ear-offset); z-index: -1; } .komi-ear-right { --ear-right: var(--ear-offset); } .komi-cat-ear { top: var(--cat-ear-translate, 4rem); right: var(--cat-ear-right); bottom: auto; left: var(--cat-ear-left); --flip: 1; --cat-ear-offset: -3rem; --cat-ear-fur-offset: 20%; --cat-ear-fur-1-offset: 1.75rem; --cat-ear-fur-2-offset: 1.5rem; z-index: -1; height: 6rem; width: 5rem; transition: 0.5s ease-in-out; } .komi-cat-ear::before { content: ""; inset: 0; transform-origin: var(--cat-ear-transform-origin); transform: rotate(calc(30deg * var(--flip))); border-radius: inherit; background-color: var(--primary-color); } .komi-cat-ear-fur { top: 10%; right: var(--cat-ear-fur-right); bottom: auto; left: var(--cat-ear-fur-left); height: 70%; width: 70%; transform-origin: var(--cat-ear-transform-origin); transform: rotate(calc(30deg * var(--flip))); border-radius: inherit; background-color: var(--primary-color-tint); } .komi-cat-ear-fur::before, .komi-cat-ear-fur::after { content: ""; border-radius: var(--cat-ear-fur-border-radius); background-color: var(--primary-color); } .komi-cat-ear-fur::before { top: -0.625rem; right: var(--cat-ear-fur-1-right); bottom: auto; left: var(--cat-ear-fur-1-left); height: 2rem; width: 2rem; transform: rotate(calc(-70deg * var(--flip))); } .komi-cat-ear-fur::after { top: -0.25rem; right: var(--cat-ear-fur-2-right); bottom: auto; left: var(--cat-ear-fur-2-left); height: 1rem; width: 1rem; transform: rotate(calc(-50deg * var(--flip))); } .komi-cat-ear-left { --cat-ear-left: var(--cat-ear-offset); --cat-ear-transform-origin: right bottom; --cat-ear-fur-left: var(--cat-ear-fur-offset); --cat-ear-fur-1-left: var(--cat-ear-fur-1-offset); --cat-ear-fur-2-left: var(--cat-ear-fur-2-offset); --cat-ear-fur-border-radius: 0 100% 0 100%; border-radius: 0.5rem 0 0 100%; } .komi-cat-ear-right { --flip: -1; --cat-ear-right: var(--cat-ear-offset); --cat-ear-transform-origin: left bottom; --cat-ear-fur-right: var(--cat-ear-fur-offset); --cat-ear-fur-1-right: var(--cat-ear-fur-1-offset); --cat-ear-fur-2-right: var(--cat-ear-fur-2-offset); --cat-ear-fur-border-radius: 100% 0 100% 0; border-radius: 0 0.5rem 100% 0; animation: var(--cat-ear-animation); } .komi-face { border-top-left-radius: 50% 50%; border-top-right-radius: 50% 50%; border-bottom-right-radius: 50% 40%; border-bottom-left-radius: 50% 40%; inset: 0; background-color: var(--secondary-color); } .komi-face-inner { inset: 0; } .komi-hair-back { top: -2.75rem; left: -2rem; width: 120%; } .komi-hair-back-1 { width: 100%; height: 9.5rem; transform: rotate(-10deg); border-radius: 100%; background-color: var(--primary-color); } .komi-hair-back-1::before, .komi-hair-back-1::after { content: ""; } .komi-hair-back-1::before { top: 5.5rem; right: -1rem; width: 50%; height: 60%; background-color: inherit; border-radius: 100%; } .komi-hair-back-1::after { inset: 0; border-radius: inherit; border-left: 1rem solid var(--primary-color-tint); } .komi-hair-bangs { top: -0.5rem; left: 25%; width: 65%; } .komi-hair-bangs::before, .komi-hair-bangs::after { content: ""; z-index: 2; background-color: var(--primary-color-tint); } .komi-hair-bangs::before { top: 2.5rem; left: -3.75rem; height: 1rem; width: 1rem; transform: rotate(-2deg) skewY(20deg); border-radius: 0.25rem; } .komi-hair-bangs::after { top: 2.25rem; left: 0.5rem; height: 1rem; width: 90%; transform: rotate(-2deg) skewY(10deg); border-radius: 0.25rem; } .komi-hair-bangs-1, .komi-hair-bangs-2 { transform-origin: center top; background-color: var(--primary-color); } .komi-hair-bangs-1 { top: 0; left: 0; width: 55%; height: 6rem; transform: rotate(-8deg); border-bottom-left-radius: 100% 50%; } .komi-hair-bangs-1::before { content: ""; left: -1.5rem; height: 80%; width: 3rem; border-bottom-left-radius: 100%; transform: rotate(50deg); border-left: 1.5rem solid var(--primary-color); } .komi-hair-bangs-2 { top: 0; left: 50%; width: 45%; height: 6.5rem; transform: rotate(-12deg); border-bottom-left-radius: 100% 70%; } .komi-hair-bangs-3 { top: 1.5rem; left: -1.75rem; height: 6rem; width: 4.5rem; border-bottom-left-radius: 100%; transform-origin: center top; transform: rotate(45deg); border-left: 1.75rem solid var(--primary-color); } .komi-hair-strand { z-index: -1; top: 4rem; left: -0.75rem; height: 13rem; width: 1.5rem; background-color: var(--primary-color); } .komi-head { position: relative; z-index: 3; height: 12rem; width: 13rem; margin-bottom: 5rem; } .komi-hair-extension { top: 3rem; left: calc(50% - 7rem); width: 14rem; height: 14rem; background-color: var(--primary-color); } .komi-hair-extension::after { content: ""; left: 1rem; height: 100%; width: 5rem; background-color: var(--primary-color-dark); } .komi-neck { z-index: 2; bottom: calc(100% - 0.25rem); left: 50%; height: 5rem; width: 2rem; transform: translateX(-50%); background-color: var(--secondary-color); } .komi-neck::after { content: ""; z-index: -1; top: calc(100% - 0.125rem); left: 50%; border: 1.125rem solid transparent; border-top-color: var(--secondary-color); transform: translateX(-50%); } .komi-neck-shadow { inset: 0; overflow: hidden; } .komi-neck-shadow::before { content: ""; top: 0.25rem; left: 50%; width: 250%; height: 3rem; border-radius: 100%; background-color: var(--black); transform: translateX(-50%); opacity: 0.1; } .komi-collar { --flip: 1; --collar-offset: -4.4375rem; bottom: -0.5rem; left: 50%; height: 3rem; width: 100%; transform: translateX(-50%) skewY(calc(-15deg * var(--flip))) scaleY(0.6); } .komi-collar::before { top: 0.5rem; right: var(--collar-right); bottom: auto; left: var(--collar-left); content: ""; height: 0; width: 0; border: 2.5rem solid transparent; border-top-color: var(--shirt-color); transform: rotate(calc(78deg * var(--flip))); } .komi-collar-left { --collar-left: var(--collar-offset); } .komi-collar-right { --flip: -1; --collar-right: var(--collar-offset); } .komi-bow { bottom: -1.875rem; left: 50%; height: 0.75rem; width: 1.25rem; transform: translateX(-50%); } .komi-bow::after { content: ".........完整代码请登录后点击上方下载按钮下载查看
网友评论0