gsap实现鼠标悬浮圆圈动画效果代码
代码语言:html
所属分类:悬停
代码描述:gsap实现鼠标悬浮圆圈动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.0.css"> <style> /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --white: #fff; --black: #111; --pink: #e701dd; scroll-behavior: smooth; } .wrapper { background-color: var(--black); width: 100vw; height: 100vh; padding: 0 20px; margin: 0 auto; display: grid; place-items: center; } .link { font-family: "Inter"; font-size: 2rem; font-weight: bold; color: white; text-decoration: none; position: relative; } .link span, .link i { position: relative; } .link i { margin-left: 0.5em; } .link .pink { width: 2em; height: 2em; border-radius: 2em; background-color: var(--pink); position: absolute; top: 50%; transform: translatey(-50%); left: -0.65em; } </style> </head> <body .........完整代码请登录后点击上方下载按钮下载查看
网友评论0