用CSS如何做一个动画的订阅按钮效果?

发布时间：2023-08-11 14:35:21 所属栏目：语言来源：

导读： 订阅按钮在很多应用上都能看到，不同应用的订阅按钮有一定的区别，这篇主要给大家分享类似抖音的动画的订阅按钮效果，具体的效果如下，还是比较美观好看的，那么这样的效果要怎样做呢？

思路

使用jQue

订阅按钮在很多应用上都能看到，不同应用的订阅按钮有一定的区别，这篇主要给大家分享类似抖音的动画的订阅按钮效果，具体的效果如下，还是比较美观好看的，那么这样的效果要怎样做呢？

    思路

使用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 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 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");

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!