找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发幽灵按钮制作

2018-10-20 分类：教程 阅读(641) 评论(0)
前端开发的表格模板
前端开发 template模板
前端开发离职证明模板

总结：
关于盒子四边动态线条制作：
四个边用四个<span>来做，通过定位到相对应的位置。
观察线条是从小变大，那是因为初始设置线条宽度为0；动画后width:100%;所以视觉上是从小变大。
对于弹跳提示框，没有设置在.link是因为他的宽度要比父级大
所以放在大盒子里。
他的文字text().通过attr()获取
他的位置通过position().left来获取。
获取宽度要使用outerWidth()而不是width（）
箭头效果：通过按钮的背景图片来呈现，hover的时候background-position改变下就可以。不需要独立一个标签

html 代码

<!doctype html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Document</title>
    <script type=”text/javascript” src=”http://libs.baidu.com/jquery/1.11.1/jquery.min.js”></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        background: #333;
    }
    .box {
        width: 800px;
        height: 280px;
        margin: 50px auto;
        overflow: hidden;
        position: relative;
    }
    .box .link {
        display: inline-block;
        width: 205px;
        height: 220px;
        margin: 0 20px;
    }
    .link .icon {
        display: block;
        width: 100%;
        height: 180px;
        -moz-transition: ease-out 0.3s;
        -o-transition: ease-out 0.3s;
        -webkit-transition: ease-out 0.3s;
        transition: ease-out 0.3s;
    }
    .link .icon:hover {
        transform: rotate(360deg) scale(1.2);
        -moz-transform: rotate(360deg) scale(1.2);
        -o-transform: rotate(360deg) scale(1.2);
        -webkit-transform: rotate(360deg) scale(1.2);
    }
    .mission-link .icon {
        background: url(http://cdn.attach.qdfuns.com/notes/pics/201612/15/150445gh2nsqhp3qdzl1du.png.editor.png) no-repeat center 0;
    }
    .play-link .icon {
        background: url(http://cdn.attach.qdfuns.com/notes/pics/201612/15/150017gwc1g4vfvv2tpccu.png.editor.png) no-repeat center 0;
    }
    .touch-link .icon {
        background: url(http://cdn.attach.qdfuns.com/notes/pics/201612/15/150017vv9c2q7wzccqx6je.png.editor.png) no-repeat center 0;
    }
    .button {
        display: block;
        width: 180px;
        height: 50px;
        border: 2px solid rgba(255, 255, 255, 0.8);
        line-height: 50px;
        padding-left: 20px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -o-box-sizing: border-box;
        -moz-box-sizing: border-box;
        margin: 0 auto;
        font-weight: bold;
        font-size: 18px;
        text-decoration: none;
        text-transform: uppercase;
        font-family: Arial;
        color: #2DCB70;
        background: url(http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=5dc375e7752e6782af22f782a42369d2) no-repeat 130px center;
        background-size: 26px 20px;
        -moz-transition: ease 0.4s;
        -o-transition: ease 0.4s;
        -webkit-transition: ease 0.4s;
        transition: ease 0.4s;
        position: relative;
    }
    .button:hover {
        border: 2px solid #fff;
        background-position: 140px center;
    }
    .button .line {
        position: absolute;
        background: none;
        -moz-transition: ease 0.4s;
        -o-transition: ease 0.4s;
        -webkit-transition: ease 0.4s;
        transition: ease 0.4s;
    }
    .button:hover .line {
        background: #fff;
    }
    .button .line-top {
        width: 0px;
        height: 2px;
        left: -110%;
        top: -2px;
    }
    .button:hover .line-top {
        width: 100%;
        left: -2px;
    }
    .button .line-right {
        width: 2px;
        height: 0px;
        right: -2px;
        top: -110%;
    }
    .button:hover .line-right {
        height: 100%;
        top: -2px;
    }
    .button .line-bottom {
        width: 2px;
        height: 0px;
        left: -2px;
        bottom: -110%;
    }
    .button:hover .line-bottom {
        height: 100%;
        bottom: -2px;
    }
    .button .line-left {
        width: 0px;
        height: 2px;
        right: -110%;
        bottom: -2px;
    }
    .button:hover .line-left {
        width: 100%;
        right: -2px;
    }
    .box .tip {
        position: absolute;
        padding: 0px 14px;
        height: 35px;
        line-height: 35px;
        background: #2DCB70;
        color: #fff;
        top: 120px;
        font-size: 16px;
        font-weight: normal;
        text-transform: none;
        margin: 0 auto;
        opacity: 0;
        border-radius: 3px
    }
    .tip em {
        font-style: normal;
    }
    .tip span {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
        border: 7px solid transparent;
        border-top-color: #2DCB70;
        left: 50%;
        margin-left: -3px;
        bottom: -14px;
    }
</style>
<script>
    $(function () {
        $(‘.link .button’).hover(function () {
            var title = $(this).attr(‘data-title’);
            $(‘.tip em’).text(title);
            var pos = $(this).position().left + 13;
            var dis = ($(‘.tip’).outerWidth() – $(this).outerWidth()) / 2;
            var l = pos – dis;
            $(‘.tip’).css({ ‘left’: l + ‘px’ }).stop().animate({ ‘top’: 135, ‘opacity’: 1 }, 300);
        }, function () {
            $(‘.tip’).stop().animate({ ‘top’: 120, ‘opacity’: 0 }, 300);
        })
    })
</script>
<body>
    <div class=”box”>
        <div class=”link mission-link”>
            <span class=”icon animated”></span>
            <a class=”button” data-title=”My mission is clear”>
                <span class=”line line-top”></span>
                <span class=”line line-right”></span>
                <span class=”line line-bottom”></span>
                <span class=”line line-left”></span>
                Mission
            </a>
        </div>
        <div class=”link play-link”>
            <span class=”icon animated”></span>
            <a class=”button” data-title=”This is my playground”>
                <span class=”line line-top”></span>
                <span class=”line line-right”></span>
                <span class=”line line-bottom”></span>
                <span class=”line line-left”></span>
                Play
            </a>
        </div>
        <div class=”link touch-link”>
            <span class=”icon animated”></span>
            <a class=”button” data-title=”This is my playground demos”>
                <span class=”line line-top”></span>
                <span class=”line line-right”></span>
                <span class=”line line-bottom”></span>
                <span class=”line line-left”></span>
                Touch
            </a>
        </div>
        <p class=”tip”><em></em><span></span></p>
    </div>
</body>
</html>
快速开发前端模板工具
开发前端模板引擎
web 前端开发模板
赞(0)
前端开发者 » 前端开发幽灵按钮制作
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论