今天小编跟大家讲解下有关css实现抖音订阅按钮动画效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css实现抖音订阅按钮动画效果 的相关资料，希望小伙伴们看了有所帮助。
前段时间刷抖音 觉得关注时的按钮动画很好看 加上自己本身最近也在学习前端知识。所以就想怎么自己实现出来 最终效果还可以 但是感觉自己做的还不够好。仅供参考。
🍻最终效果
💡思路
使用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=http://xyrl.com/skin/7ke/image/nopic.gif>cript></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; 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); transition: all linear .5s;}#line1.active { background-color: #ccc; animation: line1 .5s ease-in-out forwards;}#line2.active { background-color: #ccc; animation: line2 .5s ease-in-out forwards;[email protected] line1 { 50% { width: 8px; height: 8px; left: 20px; top: 52px; border-radius: 8px; } 100% { width: 30px; left: 20px; top: 52px; transform: rotate(45deg); [email protected] 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=http://xyrl.com/skin/7ke/image/nopic.gif>cript></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; 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: 80px; stroke-dashoffset: 80px;}polyline.active { animation: show .5s forwards; animation-delay: .5s;[email protected] show { to { stroke-dashoffset: 0; [email protected] 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?
到此这篇关于css实现抖音订阅按钮动画效果的文章就介绍到这了,更多相关css抖音订阅按钮动画内容请搜索爱蒂网以前的文章或继续浏览下面的相关文章 希望大家以后多多支持爱蒂网！
来源：爱蒂网
