按钮悬浮文字环绕旋转效果
代码语言:html
所属分类:悬停
代码描述:按钮悬浮文字环绕旋转效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap'> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: #fff; overflow: hidden; } main { height: 200px; width: 300px; display: grid; grid-template-rows: repeat(2, 1fr); } main .links { display: flex; justify-content: center; align-items: center; } main .links .link { --color: rgb(136, 147, 182); position: relative; font-size: 0.95rem; font-family: "Sainte Colombe"; text-decoration: none; color: var(--color); margin: 2rem; transition: color 300ms ease; } main .links .link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #3552b1; transform-origin: right; transform: scaleX(0); transition: transform 300ms ease; } main .links .link:hover { --color: rgb(53, 82, 177); } main .links .link:hover::after { transform-origin: left; transform: scaleX(1); } main .socials { display: flex; justify-content: center; align-items: center; } main .socials .social { --icon-size: 40px; width: var(--icon-size); height: var(--icon-size); display: flex; justify-content: center; align-items: center; border-radius: 0.5rem; margin: 1.5rem; color: #fff; background: var(--bg); box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.014), 0 6.7px 5.3px rgba(0, 0, 0, 0.02), 0 12.5px 10px rgba(0, 0, 0, 0.025), 0 22.3px 17.9px rgba(0, 0, 0, 0.03), 0 41.8px 33.4px rgba(0, 0, 0, 0.036), 0 100px 80px rgba(0, 0, 0, 0.05); } main .socials .social.codepen { --bg: #000; } main .socials .social.youtube { --bg: #c4302b; } main .socials .social.dribbble { --bg: #ea4c89; } main .socials .social.twitter { --bg: #00acee; } .cursor .cursor--small, .cursor .cursor--large, .cursor .cursor--text { position: fixed; left: 0; top: 0; transform: translate(-50%, -50%); border-radius: 50%; width: var(--cursor-size); height: var(--cursor-size); pointer-events: none; user-select: none; } .cursor .cursor--small, .cursor .cursor--large { -webkit-mix-blend-mode: hue; mix-blend-mode: difference; } .cursor .cursor--text { --cursor-size: fit-content; font-size: 0.75rem; color: #000; opacity: 0; } .cursor .cursor--text .text { font-family: sans-serif; font-weight: bold; } .cursor .cursor--small { --cursor-size: 20px; -webkit-background: #000; background: #fff; } .cursor .cursor--large { --cursor-size: 60px; -webkit-border: 2px solid #000; border: 2px solid #fff; } .support { position: absolute; right: 10px; bottom: 10px; padding: 10px; display: flex; } .support a { margin: 0 10px; color: #333333; font-size: 1.8rem; backface-visibility: hidden; transition: all 150ms ease; } .support a:hover { transform: scale(1.1); } </style> </head> <body translate="no"> <main> <div class="links"> <a class="link cursor-hover-item" href="#" data-cursor-text="GO HERE!" data-cursor-text-repeat="4">Link.</a> <a class="link cursor-hover-item" href="#" data-cursor-text="LEARN MORE!" data-cursor-text-repeat="3">Read More.</a> </div> <div class="socials"> <div class="social cursor-hover-item codepen" data-cursor-text="CODEPEN" data-cursor-text-repeat="4"> <ion-icon name="logo-codepen"></ion-icon> </div> <div class="social cursor-hover-item youtube" data-cursor-text="YOUTUBE" data-cursor.........完整代码请登录后点击上方下载按钮下载查看
网友评论0