蝙蝠岛资源网 Design By www.hbtsch.com
前段时间刷抖音,觉得关注时的按钮动画很好看,加上自己本身最近也在学习前端知识。所以就想怎么自己实现出来,最终效果还可以,但是感觉自己做的还不够好。仅供参考。
🍻最终效果
💡思路
- 使用jQuery的
toggleClass()
方法,添加删除类active
- 分别为原本的和
active
的元素设置样式,使用css的transition
属性,定义变化时间,速度等 - 使用css的
animation
为active
元素设置变化动画
👨💻实现
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <!-- 简单起见,用了div。其实用button也行,需要设置一下样式才好看^_^--> <!-- 还没有学习<svg>,使用<svg>效果也许会更好--> <div id="followBtn"> <div id="line1"></div> <div id="line2"></div> </div> <script src="index.js"></script> </body> </html>
JS
$(function () { // jQuery入口函数 $('#followBtn').click(function (e) { // 绑定点击事件 $('#followBtn').toggleClass('active'); $('#line1').toggleClass('active'); $('#line2').toggleClass('active'); }); })
CSS
body { width: 1024px; margin: 0 auto; /* 居中 */ } #followBtn { position: relative; display: block; width: 100px; height: 100px; margin: 100px auto; border-radius: 100px; // 使div变为圆形 background-color: #ccc; transition: all linear .5s; // 定义样式转换时的过度动画的属性 } #followBtn.active { background-color: crimson; } #line1 { position: absolute; /*绝对定位,定位基于最近的一个已经定位(relative, absolute, fixed)的祖先元素*/ left: 25px; top: 46px; display: block; width: 50px; height: 8px; border-radius: 5px; background-color: crimson; transition: all linear .5s; } #line2 { position: absolute; left: 25px; top: 46px; display: block; width: 50px; height: 8px; border-radius: 8px; background-color: crimson; transform: rotate(90deg); /* 旋转90度 */ transition: all linear .5s; } #line1.active { background-color: #ccc; /*触发动画,forwards表示动画结束后,元素样式保留为动画的最后一个关键帧的样式*/ animation: line1 .5s ease-in-out forwards; } #line2.active { background-color: #ccc; animation: line2 .5s ease-in-out forwards; } /* @keyframes定义动画 */ @keyframes line1 { 50% { width: 8px; height: 8px; left: 20px; top: 52px; border-radius: 8px; } 100% { width: 30px; left: 20px; top: 52px; transform: rotate(45deg); } } @keyframes line2 { 50% { width: 8px; height: 8px; border-radius: 8px; left: 35px; } 100% { width: 50px; left: 35px; transform: rotate(-45deg); } }
分割线👇👇👇使用svg绘制对号✔🍻最终效果
👨💻实现
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <button id="followBtn"> <div class="line"></div> <div class="line"></div> <!-- 使用svg绘制 --> <!-- stroke-linecap 设置折线两端为圆角 --> <!-- stroke-linejoin 设置折线拐角为圆角 --> <svg width="70px" height="70px" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" fill="none"> <polyline points="10,37 30,57 60,17" style="stroke: crimson;"></polyline> </svg> </button> <script src="index.js"></script> </body> </html>
JS
❗❗❗一定要使用jQuery3,3以下的版本操作svg元素(添加类)时有bug,3修复了这个问题。
$(function () { $('#followBtn').click(function (e) { $('#followBtn').toggleClass('active'); $('.line').toggleClass('active'); $('polyline').toggleClass('active'); }); })
CSS
body { width: 1024px; margin: 0 auto; } #followBtn { position: relative; display: block; width: 100px; height: 100px; margin: 100px auto; border: none; border-radius: 100px; background-color: crimson; transition: all linear .5s; } #followBtn:focus { outline: none; /* 浏览器点击不会有蓝框 */ } #followBtn.active { background-color: #ccc; } .line { position: absolute; /*绝对定位,定位基于最近的一个已经定位(relative, absolute, fixed)的祖先元素*/ left: 25px; top: 46px; width: 50px; height: 8px; border-radius: 8px; background-color: #ccc; transition: ease-in 0; } .line:nth-child(1) { transform: rotate(90deg); } .line.active { animation: fade .5s forwards; } polyline { /* 属性stroke-dasharray设置线段缺口以形成曲线, * 当缺口足够大,看起来折线就隐藏了 * 属性stroke-dashoffset指定了dash模式到路径开始的距离,0时折线完全显示 */ stroke-dasharray: 80px; stroke-dashoffset: 80px; } polyline.active { animation: show .5s forwards; animation-delay: .5s; } @keyframes show { to { stroke-dashoffset: 0; } } @keyframes fade { to { opacity: 0; transform: rotate(360deg) scale(0.5, 0.5); } }
👨🎓感悟
普通HTML元素和SVG元素的旋转方式不同:
普通HTML元素的transform-origin
默认为自身的中心SVG元素的transform-origin
默认为SVG画布的左上角
去除按钮点击后的蓝框,可以设置outline: none;
jQuery3以下的版本,不能正确的给修改SVG元素的类。
//.attr()方法对于SVG是有效的,所以如果你必须使用jQuery的话 // 使用 $("#item").attr("class", "oldclass newclass"); // 而不是 .addClass("newclass") // 使用 $("#item").attr("class", "oldclass"); // 而不是 .removeClass("newclass") // 原生JS解决办法 var element = document.getElementById("item"); // 使用 element.setAttribute("class", "oldclass newclass"); // 使用 element.setAttribute("class", "oldclass");
🔗参考
Transforms on SVG Elements
jQuery SVG, why can’t I addClass?
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无css实现抖音订阅按钮动画效果的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]