js+css实现文字菜单悬浮blob点跟随效果代码
代码语言:html
所属分类:菜单导航
代码描述:js+css实现文字菜单悬浮blob点跟随效果代码
代码标签: js css 文字 菜单 悬浮 blob 点 跟随
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Montserrat:900"); body { overflow: hidden; margin: 0; } * { box-sizing: border-box; } #cursorBlob { width: 50px; height: 50px; background: linear-gradient(120deg, #FF1744, #E040FB, #2979FF, #00E5FF, #76FF03); background-size: 1600% 1600%; position: absolute; mix-blend-mode: difference; pointer-events: none; z-index: 1; transition: 0.3s linear; animation: blobRadius 5s ease infinite, blobBackground 15s ease infinite; } @keyframes blobRadius { 0%, 100% { border-radius: 43% 77% 80% 40%/40% 40% 80% 80%; } 20% { border-radius: 47% 73% 61% 59%/47% 75% 45% 73%; } 40% { border-radius: 46% 74% 74% 46%/74% 58% 62% 46%; } 60% { border-radius: 47% 73% 61% 59%/40% 40% 80% 80%; } 80% { border-radius: 50% 70% 52% 68%/51% 61% 59% 69%; } } @keyframes blobBackground { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .wrap { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; background: #212121; } .nav { display: flex; flex-direction: column; margin: 0; padding: 0; } .nav__link { color: #fff; list-style: none; cursor: pointer; font-size: 5vw; font-family: "Montserrat", sans-seri.........完整代码请登录后点击上方下载按钮下载查看
网友评论0