CSS实现动态边框效果

html代码

<a href="https://www.shadoweb.cn/news/?type=detail&amp;id=24" target="_blank"><img src="https://www.shadoweb.cn/news/common/upload/2018/08/14/04831T5.jpg" alt="谷歌推ads.txt解决方案，重拳打击虚假广告"><span class="line-effect"><span></span></span>
</a>

CSS代码


/* line-effect */
.line-effect {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
opacity:0.5;
filter:Alpha(opacity=50);
}
.line-effect:after,
.line-effect:before,
.line-effect span:after,
.line-effect span:before {
    content: "";
    display:block;
    position:absolute;
    background-color:#606060;
    z-index:3
}
.line-effect:after,
.line-effect:before {
    width:  0;
    height: 6px;
    -webkit-transition:.15s ease-in;
    -o-transition:.15s ease-in;
    transition:.15s ease-in
}
.line-effect:before {
    top:0;
    left:0
}
.line-effect:after {
    bottom:0;
    right:0
}
.line-effect:hover:after,
.line-effect:hover:before {
    width: 100%;
}
.line-effect span:after,
.line-effect span:before {
    width: 6px;
    height: 0;
    -webkit-transition:.15s ease-in-out;
    -o-transition:.15s ease-in-out;
    transition:.15s ease-in-out;
    -webkit-transition-delay:.2s;
    -o-transition-delay:.2s;
    transition-delay:.2s
}
.line-effect span:before {
    bottom:0;
    left:0
}
.line-effect span:after {
    top:0;
    right:0
}
.line-effect:hover span:after,
.line-effect:hover span:before {
    height: 100%;
}