使用jquery制作幽灵按钮

可乐西瓜冰

于 2021-08-20 11:15:23 发布

阅读量303

点赞数 2

分类专栏： jQuery 文章标签： html js css jquery

本文链接：https://blog.csdn.net/qq_49012497/article/details/119817901

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用JQuery制作带有旋转和缩放特效的按钮。作者探讨了学习JQuery的价值，尽管现代框架如Vue已流行，但JQuery的广泛使用仍有其意义。文中详细展示了从下载JQuery到编写实现幽灵按钮特效的HTML、CSS和JavaScript代码，并提供了效果展示。最后，作者鼓励读者尝试改进样式和应用自己的素材。

摘要由CSDN通过智能技术生成

JQuery学习，制作的特效按钮

之前学习JQuery的时候，也做了几个小功能（带有特效的）这里只展示一个按钮特效，其实在学习的过程中，也有想过学习jquery到底值不值，因为框架的产生（vue…等等）jquery就给人一种Out了的感觉，但是毕竟是火了十多年的东西了，学了不亏就是，哈哈

一、下载JQuery

进入JQuery官网https://jquery.com/直接下载就好了
在这里插入图片描述

二、幽灵按钮代码

1.引入JQuery

代码如下（用法示例）：

<script src="jquery-3.3.1.min.js"></script>

2.整个按钮代码

代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #333;
        }

        a {
            text-decoration: none;
        }

        .box {
            width: 1000px;
            height: 220px;
            margin: 50px auto;
        }

        .box .link {
            float: left;
            margin: 0 20px;
            width: 205px;
            height: 280px;
            position: relative;
        }

        .left .icon {
            background-image: url(images/3.png);
            background-position: center center;
            background-repeat: no-repeat;
        }

        .center .icon {
            background-image: url(images/3.png);
            background-position: center center;
            background-repeat: no-repeat;
        }

        .right .icon {
            background-image: url(images/3.png);
            background-position: center center;
            background-repeat: no-repeat;
        }

        .box .link .icon {
            display: inline-block;
            width: 100%;
            height: 190px;
            transition: 0.2s linear;
            -webkit-transition: 0.2s linear;
            -moz-transition: 0.2s linear;
            -o-transition: 0.2s linear;
        }

        .box .link .icon:hover {
            transform: rotate(360deg) scale(1.2);
            -webkit-transform: rotate(360deg) scale(1.2);
            -moz-transform: rotate(360deg) scale(1.2);
            -o-transform: rotate(360deg) scale(1.2);
        }

        .box .link .button {
            display: block;
            width: 180px;
            height: 50px;
            line-height: 50px;
            border: 2px solid rgba(255, 255, 255, 0.8);
            color: #2dcb70;
            font-size: 20px;
            font-weight: 700;
            padding-left: 20px;
            box-sizing: border-box;
            margin: auto;
            background: url(images/背景.png) no-repeat 130px center;
            transition: 0.4s ease;
            -webkit-transition: 0.4s ease;
            position: relative;
        }

        .box .link .button:hover {
            background-position: 140px center;
            border-color: rgba(255, 255, 255, 1);
        }

        .box .link .button .line {
            position: absolute;
            display: block;
            background: none;
            transition: 0.4s ease;
            -webkit-transition: 0.4s ease;
        }

        .box .link .button .top_1 {
            left: -100%;
            top: -2px;
            width: 0;
            height: 2px;
        }

        .box .link .button:hover .top_1 {
            width: 180px;
            background-color: #fff;
            position: absolute;
            left: -2px;
            top: -2px;
        }

        .box .link .button .left_1 {
            bottom: -100%;
            left: -2px;
            width: 2px;
            height: 0;
        }

        .box .link .button:hover .left_1 {
            height: 50px;
            background-color: #fff;
            left: -2px;
            bottom: -2px;
        }

        .box .link .button .right_1 {
            top: -100%;
            right: -2px;
            width: 2px;
            height: 0;
        }

        .box .link .button:hover .right_1 {
            height: 50px;
            background-color: #fff;
            right: -2px;
            top: -2px;
        }

        .box .link .button .button_1 {
            right: -100%;
            bottom: -2px;
            width: 0;
            height: 2px;
        }

        .box .link .button:hover .button_1 {
            width: 180px;
            background-color: #fff;
            right: -2px;
            bottom: -2px;
        }

        .box .tooltip {
            position: absolute;
            padding: 0 15px;
            height: 35px;
            background-color: #2dcb70;
            border-radius: 5px;
            line-height: 35px;
            margin: 0 auto;
            color: #fff;
            font-size: 18px;
            font-weight: 700;
            opacity: 0;
        }

        .box .tooltip span {
            position: absolute;
            top: 35px;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-top-color: #2dcb70;
            left: 50%;
        }
    </style>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            $(".button").hover(function () {
                $(".tooltip").show();
                var titleText = $(this).attr("data-text");
                $(".tooltip em").text(titleText);
                var leftLoc = $(this).offset().left;
                var addleft = ($(".tooltip").outerWidth() - $(this).outerWidth()) / 2;
                $(".tooltip").css({
                    left: leftLoc - addleft,
                    top: 140
                }).animate({
                    top: 195,
                    opacity: 1
                }, 300)

            }, function () {
                $(".tooltip").hide();
            })

        })
    </script>
</head>

<body>
    <div class="box">
        <div class="link left">
            <span class="icon"></span>
            <a href="" class="button" data-text="diyigeanniu">
                <span class="line top_1"></span>
                <span class="line left_1"></span>
                <span class="line right_1"></span>
                <span class="line button_1"></span>
                MISSIN
            </a>
        </div>
        <div class="link center">
            <span class="icon"></span>
            <a href="" class="button" data-text="diergeanniu">
                <span class="line top_1"></span>
                <span class="line left_1"></span>
                <span class="line right_1"></span>
                <span class="line button_1"></span>
                PLAY
            </a>
        </div>
        <div class="link right">
            <span class="icon"></span>
            <a href="" class="button" data-text="disangeanniu">
                <span class="line top_1"></span>
                <span class="line left_1"></span>
                <span class="line right_1"></span>
                <span class="line button_1"></span>
                JJAISSU
            </a>
        </div>
        <div class="tooltip">
            <em></em>
            <span></span>
        </div>
    </div>
</body>

</html>