css3多种边框按钮悬停动画特效代码下载


css3多种边框按钮悬停动画特效代码下载
css3多种边框按钮悬停动画特效代码下载以及多种边框按钮、悬停动画等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

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

3. HTML代码

    <div class="main">
        <div class="title">css3按钮多种移入动效</div>
        <div class="btn_list">
            <ul class="clearfix">
                <li>
                    <a href="#" class="btn btn1"> <span class="btn-inner">查看更多<i class="fa fa-right"></i></span> <div class="btnbg-x"></div></a>
                </li>
                <li>
                    <a href="#" class="btn btn2"> <span class="btn-inner">查看更多<i class="fa fa-right"></i></span> <div class="btnbg-x"></div></a>
                </li>
                <li>
                    <a href="#" class="btn btn3"> <span class="btn-inner">查看更多</span> <div class="btnbg-x"></div></a>
                </li>
                <li>
                    <a href="#" class="btn btn4"> <span class="btn-inner">查看更多</span> <div class="btnbg-x"></div></a>
                </li>
                <li>
                    <a href="#" class="btn btn5"><div class="line_tl"></div><div class="line_tr"></div> <span class="btn-inner">查看更多</span><div class="line_bl"></div><div class="line_br"></div><div class="line_all"></div></a>
                </li>
                <li>
                    <a href="#" class="btn btn6"><span class="btn-inner">查看更多</span><div class="bg_in"></div></a>
                </li>
                <li>
                    <a href="#" class="btn btn7"><span class="btn-inner">查看更多</span></a>
                </li>
                <li>
                    <a href="#" class="btn btn8"><div class="bg_brf"></div><span class="btn-inner">查看更多</span><div class="bg_aft"></div></a>
                </li>
                <li>
                    <a href="#" class="btn btn9"><span class="btn-inner">查看更多</span><div class="bgsqr1"></div><div class="bgsqr2"></div><div class="bgsqr3"></div><div class="bgsqr4"></div></a>
                </li>
                <li>
                    <a href="#" class="btn btn10"><span class="btn-inner">查看更多</span><div class="bgsqr1"></div><div class="bgsqr2"></div></a>
                </li>
                <li>
                    <a href="#" class="btn btn11"><span class="btn-inner">查看更多</span><div class="bgsqr1"></div><div class="bgsqr2"></div><div class="bgsqr3"></div><div class="bgsqr4"></div></a>
                </li>
                <li>
                    <a href="#" class="btn btn12"><span class="btn-inner">查看更多</span><div class="bgsqr1"></div><div class="bgsqr2"></div></a>
                </li>
                <li>
                    <a href="#" class="btn btn13"><span class="btn-inner">查看更多</span><div class="bgsqr1"></div><div class="bgsqr2"></div></a>
                </li>
                <li>
                    <a href="#" class="btn btn14"><span class="btn-inner">查看更多</span><div class="bgsqr1"></div><div class="bgsqr2"></div><div class="bgsqr3"></div><div class="bgsqr4"></div></a>
                </li>
                <li>
                    <a href="#" class="btn btn15"><span class="btn-inner">查看更多</span><div class="bgsqr1"></div></a>
                </li>
                <li>
                    <a href="#" class="btn btn16"><span class="btn-inner">查看更多</span><div class="bgsqr1"></div></a>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('.btn16').on('mouseenter', function (e) {
                var parentOffset = $(this).offset(), relX = e.pageX - parentOffset.left, relY = e.pageY - parentOffset.top;
                $(this).find('.bgsqr1').css({
                    top: relY,
                    left: relX
                });
            }).on('mouseout', function (e) {
                var parentOffset = $(this).offset(), relX = e.pageX - parentOffset.left, relY = e.pageY - parentOffset.top;
                $(this).find('.bgsqr1').css({
                    top: relY,
                    left: relX
                });
            });
        });
    </script>

相关推荐

发表评论

相关文章