css實現(xiàn)抖音訂閱按鈕動畫效果

發(fā)布時間：2020-03-12 15:45:32 作者：zsponly

我要評論

這篇文章主要介紹了css實現(xiàn)抖音訂閱按鈕動畫效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

前段時間刷抖音，覺得關(guān)注時的按鈕動畫很好看，加上自己本身最近也在學(xué)習(xí)前端知識。所以就想怎么自己實現(xiàn)出來，最終效果還可以，但是感覺自己做的還不夠好。僅供參考。

🍻最終效果

最終效果

💡思路

使用jQuery的toggleClass()方法，添加刪除類active
分別為原本的和active的元素設(shè)置樣式，使用css的transition屬性，定義變化時間，速度等
使用css的animation為active元素設(shè)置變化動畫

👨‍💻實現(xiàn)

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也行，需要設(shè)置一下樣式才好看^_^-->
	<!-- 還沒有學(xué)習(xí)<svg>，使用<svg>效果也許會更好-->
    <div id="followBtn">
        <div id="line1"></div>
        <div id="line2"></div>
    </div>
    <script src="index.js"></script>
</body>
</html>

$(function () {	// jQuery入口函數(shù)
    $('#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變?yōu)閳A形
    background-color: #ccc;
    transition: all linear .5s;	// 定義樣式轉(zhuǎn)換時的過度動畫的屬性
}

#followBtn.active {
    background-color: crimson;
}

#line1 {
    position: absolute; /*絕對定位，定位基于最近的一個已經(jīng)定位(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);	/* 旋轉(zhuǎn)90度 */
    transition: all linear .5s;
}

#line1.active {
    background-color: #ccc;
    /*觸發(fā)動畫，forwards表示動畫結(jié)束后，元素樣式保留為動畫的最后一個關(guān)鍵幀的樣式*/
    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繪制對號✔🍻最終效果

在這里插入圖片描述

👨‍💻實現(xiàn)

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 設(shè)置折線兩端為圓角 -->
        <!-- stroke-linejoin 設(shè)置折線拐角為圓角 -->
        <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修復(fù)了這個問題。

$(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; /*絕對定位，定位基于最近的一個已經(jīng)定位(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設(shè)置線段缺口以形成曲線，
     * 當(dāng)缺口足夠大，看起來折線就隱藏了
     * 屬性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元素的旋轉(zhuǎn)方式不同:

普通HTML元素的transform-origin默認(rèn)為自身的中心SVG元素的transform-origin默認(rèn)為SVG畫布的左上角

HTMLvsSVG

去除按鈕點擊后的藍框，可以設(shè)置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?

到此這篇關(guān)于css實現(xiàn)抖音訂閱按鈕動畫效果的文章就介紹到這了,更多相關(guān)css抖音訂閱按鈕動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！