css完成抖音定阅按钮动漫实际效果

日期：2021-02-28 类型：科技新闻我要分享

关键词：如何制作微信小程序，微信小程序源码，小程序码生成，凡科网微信小程序，微信公众号小程序

前段時间刷抖音，感觉关心时的按钮动漫很漂亮，再加自身自身近期也在学习培训前端开发专业知识。因此就想如何自身完成出来，最后实际效果还能够，可是觉得自身做的还不足好。仅供参照。

🍻最后实际效果

💡思路

应用jQuery的toggleClass()方式，加上删掉类active
各自为本来的和active的元素设定款式，应用css的transition特性，界定转变時间，速率等
应用css的animation为active元素设定转变动漫

👨‍💻完成

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <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也行，必须设定1下款式才漂亮^_^-->
	<!-- 都还没学习培训<svg>，应用<svg>实际效果或许会更好-->
    <div id="followBtn">
        <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;
    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; /*肯定精准定位，精准定位根据近期的1个早已精准定位(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表明动漫完毕后，元素款式保存为动漫的最终1个重要帧的款式*/
    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(⑷5deg);
    }
}

切分线👇👇👇应用svg绘图对号✔🍻最后实际效果

👨‍💻完成

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <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>

❗❗❗1定要应用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; /*肯定精准定位，精准定位根据近期的1个早已精准定位(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?

到此这篇有关css完成抖音定阅按钮动漫实际效果的文章内容就详细介绍到这了,更多有关css抖音定阅按钮动漫內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！

上一篇：网站变黑与白灰色的4种编码详尽解读返回下一篇：没有了