js+css变量实现鼠标悬浮文字字母变粗动画效果代码
代码语言:html
所属分类:悬停
代码描述:js+css变量实现鼠标悬浮文字字母变粗动画效果代码
代码标签: css 变量 鼠标 悬浮 文字 字母 变粗 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css2?family=Sora:wght@100;800&display=swap" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> :root { --text-axis: 100; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; min-height: 400px; padding-top: 30px; color: #ccc; background-color: #2a2a2a; font-family: "Sora", sans-serif; text-transform: uppercase; overflow: hidden; cursor: none; } body .text-container { position: relative; margin: 40px; font-size: 4rem; } body .text-container::before { content: "HOVER IT"; position: absolute; top: -60px; font-size: 1rem; font-variation-settings: "wght" 300; letter-spacing: 0.25rem; opacity: 0.25; } body .text-container::after { content: "- Linus Torvalds"; font-size: 0.875rem; font-variation-settings: "wght" 300; text-transform: none; } body .text-container h1 span { transition: 250ms; } body .custom-pointer { position: fixed; top: -5px; left: -5px; width: 10px; height: 10px; border-radius: 50%; background-color: #777; box-shadow: 0 0 0 5px #2a2a2a, 0 0 0 6px #777; transition: 100ms; } @media only screen and (max-width: 425px) { body { cursor: auto; } body .text-container { margin: 20px; } .custom-pointer { display: none; } } </style> </head> <body> <div class="text-container"> <h1 class="text-1"></h1> <h1 class="text-2"></h1> </div> <div class="custom-pointer"></div> <script> const root = document.querySelector(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0