css实现抖音订阅按钮动画效果

前段时间刷抖音，觉得关注时的按钮动画很好看，加上自己本身最近也在学习前端知识。所以就想怎么自己实现出来，最终效果还可以，但是感觉自己做的还不够好。仅供参考。

& # 127867;最终效果

💡思路

使用 jq uery的 toggleClass() 方法，添加删除类 active 分别为原本的和 active 的元素设置样式，使用css的 trans IT ion 属性，定义变化时间，速度等使用css的 animation 为 active 元素设置变化动画

👨‍💻实现

HT ML

<!DOCTY PE  html>
<html lang="en">
<head>
    < ;m eta charset="UTF-8">
    <meta n am e="viewport" content="width=device-width, initial -s cale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie= Edge ">
    <script src="https://apps.bd img  .COM /libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet"  hr ef="style.css">
    <title>Document</title>
</head>
<body>
	<!--  简单 起见，用了div。其实用button也行，需要设置一下样式才好看^_^-->
	<!-- 还没有学习<svg>，使用<svg>效果也许会更好-->
    <div id="follow BT n">
        <div id="line1"></div>
        <div id="line2"></div>
    </div>
    <script src="index.js"></script>
</body>
</html>

$(function () {	// jQuery入口函数
    $('#followBtn').click(function (e) {	// 绑定 点击事件 
        $('#followBtn').toggleClass('active');
        $('#line1').toggleClass('active');
        $('#line2').toggleClass('active');
    });
})

CSS

body {
    width: 1024px;
    m arg in: 0 auto;	/* 居中 */
}

#followBtn {
    position: relative;
    dis play : block;
    width: 100px;
    h ei ght: 100px;
    mar gin : 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(90 deg );	/* 旋转90度 */
    transition: all linear .5s;
}

#line1.active {
    background-color: #ccc;
    /*触发动画，forwa rds 表示动画结束后，元素样式保留为动画的最后一个关键帧的样式*/
    animation: line1 .5s ease -i n-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测试数据/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>

❗❗❗ 一定要使用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( 360 deg) scale(0.5, 0.5);
    }
}

👨‍🎓 感悟

普通HTML元素和SVG元素的旋转方式不同:

普通HTML元素的 transform-origin 默认为自身的中心SVG元素的 transform-origin 默认为SVG 画布的左上角

去除按钮点击后的蓝框，可以设置 outline: none;

jQuery3以下的版本，不能正确的给修改SVG元素的类。

//.@R_ 512 _962@方法对于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抖音订阅按钮动画内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是为你收集整理的 css实现抖音订阅按钮动画效果全部内容，希望文章能够帮你解决 css实现抖音订阅按钮动画效果所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于css实现抖音订阅按钮动画效果的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did201057

更新时间：2023-04-27 阅读：25次