Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
click me
css
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700&display=swap"); :root { --mouse-x: -50px; --mouse-y: -50px; --mouse-btn-x: -50px; --mouse-btn-y: -50px; } html { height: 100%; } body { font-family: sans-serif; font-size: 14px; height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: "Comfortaa", cursive; background-color: #e5eaf0; font-weight: 400; } .svg-background { position: absolute; left: -20vw; right: -20vw; bottom: 0; width: 140vw; } a { color: #7f71fe; text-decoration: none; font-weight: 700; } .btn { appearance: none; outline: 0; position: relative; overflow: hidden; display: inline-block; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; border: none; letter-spacing: 3px; line-height: 80px; height: 80px; width: 300px; padding: 0 30px; font-size: 32px; font-weight: 600; color: #fff; background-color: #7f71fe; border-radius: 5px; transition: all 0.3s ease-in; } .btn_text { pointer-events: none; position: relative; z-index: 2; } .btn:hover { background-color: #0074e8; } .mover { pointer-events: none; position: absolute; top: 0; left: 0; margin-top: -10px; margin-left: -10px; border-radius: 50%; left: var(--mouse-x); top: var(--mouse-y); height: 20px; width: 20px; background: rgba(255, 255, 255, 0.3); transform: scale(1.5); transition: all 0.1s ease-out; z-index: 1; } .mover.active { transform: scale(0.8); } .mouse { pointer-events: none; height: 30px; width: 30px; position: absolute; left: var(--mouse-btn-x); top: var(--mouse-btn-y); } .mouse .svg-2 { position: absolute; width: 70px; height: 70px; top: -40px; left: -40px; opacity: 0.7; } .mouse .svg-2 path { stroke: #1A1D2C; stroke: #A0C3F1; stroke: #bdd5ff; stroke-width: 3; stroke-linecap: round; stroke-dashoffset: 25%; stroke-dasharray: 100%; animation: svg2 1s linear forwards; } .mouse .svg-2 .svg_obj { stroke-width: 5; opacity: 0.5; } @keyframes svg2 { 0% { stroke-dashoffset: 100%; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100%; } }
JavaScript
//#cpc-click-button#codepenchallenge let root = document.documentElement; let mover = document.querySelector(".mover"); let link = document.querySelector(".btn"); root.addEventListener("mousemove", (e) => { root.style.setProperty("--mouse-x", e.clientX + "px"); root.style.setProperty("--mouse-y", e.clientY + "px"); }); link.addEventListener("click", function (event) { event.preventDefault(); let svg = `
`; let x = event.offsetX == undefined ? event.layerX : event.offsetX, y = event.offsetY == undefined ? event.layerY : event.offsetY; let span = document.createElement("span"); span.className = "mouse"; span.innerHTML = svg; s = span.style; s.top = y + "px"; s.left = x + "px"; var angle = Math.floor(Math.random() * 25) + "deg"; s.transform = "rotate(" + angle + ")"; this.appendChild(span); setTimeout(function () { span.remove(); }, 1400); mover.classList.add("active"); setTimeout(function () { mover.classList.remove("active"); }, 250); });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>按钮点击动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号