js+css实现眼睛盯着跟随鼠标位置交互效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现眼睛盯着跟随鼠标位置交互效果代码
代码标签: js css 眼睛 盯着 跟随 鼠标 位置 交互
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; boz-sizing: border-box; } body { min-height: 100vh; display: grid; place-items: center; background: black; } @property --eyelid { syntax: "<percentage>"; inherits: false; initial-value: 0%; } @property --eyelid2 { syntax: "<percentage>"; inherits: false; initial-value: 0%; } .eyes { width: 250px; padding-block: 20px; display: flex; align-items: center; justify-content: center; gap: 20px; div { position: relative; width: 90px; aspect-ratio: 1; background: white; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; &:before, &:after { content: ''; position: absolute; width: 116%; height: 165%; left: 50%; animation: eyelid 5s ease-in-out infinite; z-index: 1; } &:before { top: 0; border-radius: 0% 0% 40% 40%; transform: translateY(var(--eyelid)) translateX(-50%); border-bottom: 40px solid black; } &:after { bottom: 0; border-radius: 40% 40% 0% 0%; transform: translateY(var(--eyelid2)) translateX(-50%); border-top: 40px solid black; } i { position: absolute; width: 60px; aspect-ratio: inherit; background: black; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0