绚丽hover效果

周末在家,浏览网站,遇到这个

看到一个效果:

css-hover

然后就自己搞了一个,代码如下:

img{
    vertical-align: top;
}
.border-effect{
    display: inline-block;
    position: relative;
}
.figcaption{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.figcaption::before,
.figcaption::after{
    position: absolute;
    top:17px;
    right:17px;
    bottom: 17px;
    left:17px;
    content:'';
    opacity: 0;
    transition:all .5s ease, box-shadow .1s ease;
}
.figcaption::before{
    border-top: 1px solid #fff;
    border-bottom:1px solid #fff;
    transform: scale(0,1);
}
.figcaption::after{
    border-left:1px solid #fff;
    border-right:1px solid #fff;
    transform: scale(1,0);
}

.border-effect{
    cursor: pointer;
}

.border-effect:hover .figcaption::before,
.border-effect:hover .figcaption::after{
    opacity: 1;
    transform: scale(1); 
    box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
    transition :all .5s ease, box-shadow .25s linear .20s;
}

JS Bin on jsbin.com

分享到: