当前位置:清晨 » 站长笔记 » css笔记 » CSS实现动态边框效果

CSS实现动态边框效果

发布日期:2018年9月14日 08:09:27 点击量: 239

宝塔服务器面板,一键全能部署及管理,送你¥3188礼包,点我领取,简单好用的 Linux/Windows 面板

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%;
}

 

 

 


关键词:

本文网址:https://www.menglei.info/2619/,转载请以链接形式注明出处,谢谢合作!


老薛主机专属优惠码: PT ,有需要购买的同学可以使用.可享受30%的优惠.

联系站长: shadoweb@qq.com QQ: 925474725


发表评论

电子邮件地址不会被公开。 必填项已用*标注