css教程 内容:10

js实现网站鼠标停留边框划线变色动画

  • 查看作者
  • web页面中大家会经常用到一些边框放内容,一般都会加个边框颜色,然后就没什么其他的装饰了。今天老翰给大家带来一个新的边框美教程,下面简单实现网站鼠标放到边框上变色划线动画效果。

    js实现网站鼠标停留边框划线变色动画 第1张图片

    js

    $(".box").hover(function() {
        $(this).find('.borderLeft').stop(true).animate({
            height: '100%'
        }, 300)
        $(this).find('.borderBottom').stop(true).delay(300).animate({
            width: '100%'
        }, 300)
        $(this).find('.borderRight').stop(true).animate({
            height: '100%'
        }, 300)
        $(this).find('.borderTop').stop(true).delay(300).animate({
            width: '100%'
        }, 300)
    }, function() {
        $(this).find('.borderLeft').stop(true).delay(300).animate({
            height: 0
        }, 300)
        $(this).find('.borderBottom').stop(true).animate({
            width: 0
        }, 300)
        $(this).find('.borderRight').stop(true).delay(300).animate({
            height: 0
        }, 300)
        $(this).find('.borderTop').stop(true).animate({
            width: 0
        }, 300)
    })

    html

    <div class="box">
        <div class="borderLine borderLeft"></div>
        <div class="borderLine borderTop"></div>
        <div class="borderLine borderRight"></div>
        <div class="borderLine borderBottom"></div>
    <span class="rank">冠军</span>
    </div>
    <div class="box">
        <div class="borderLinea borderLeft"></div>
        <div class="borderLinea borderTop"></div>
        <div class="borderLinea borderRight"></div>
        <div class="borderLinea borderBottom"></div>
    <span class="ranka">亚军</span>
    </div>
    <div class="box">
        <div class="borderLineb borderLeft"></div>
        <div class="borderLineb borderTop"></div>
        <div class="borderLineb borderRight"></div>
        <div class="borderLineb borderBottom"></div>
    <span class="rankb">季军</span>
    </div>

    css

    .box {
    width:400px;
    height:300px;
    position:relative;
    background-color:#B1DFBB;
    float:left;
    margin-left:100px;
    margin-top:20px;
    border-radius: 8px 8px 8px 8px;
    }
    .borderLine {
    position:absolute;
    background-color:#3498db;
    }
    .borderLinea {
    position:absolute;
    background-color:#2ecc71;
    }
    .borderLineb {
    position:absolute;
    background-color:#ff00b1;
    }
    .borderLeft {
    height:0;
    width:3px;
    top:0;
    left:0;
    }
    .borderRight {
    bottom:0;
    right:0;
    width:3px;
    height:0;
    }
    .borderTop {
    height:3px;
    width:0;
    top:0;
    right:0;
    }
    .borderBottom {
    bottom:0;
    left:0;
    width:0;
    height:3px;
    }
    .rank {
    display:block;
    color:#fff;
    padding:4px;
    position:absolute;
    box-sizing:border-box;
    width: 100%;
    z-index:1;
    border-radius:8px 8px 8px 8px;
    text-align: center;
    background-color:rgba(231, 76, 60, 0.4);
    }
    .ranka{
    display:block;
    color:#fff;
    padding:4px;
    position:absolute;
    box-sizing:border-box;
    width: 100%;
    z-index:1;
    border-radius:8px 8px 8px 8px;
    text-align:center;
    background-color:rgba(52, 152, 219, 0.4);;
    }
    .rankb {
    display:block;
    color:#fff;
    padding:4px;
    position:absolute;
    box-sizing:border-box;
    width:100%;
    z-index:1;
    border-radius:8px 8px 8px 8px;
    text-align:center;
    background-color:rgba(46, 204, 113, 0.4);
    }


    请登录之后再进行评论

    登录
    最新评论