当前位置:首页 > 站长笔记 > css笔记 > 正文
运行天数:2908 天 最后更新:2020-4-7

CSS实现动态边框效果

用手机或者平板电脑扫描应用扫描本二维码,可以在手机浏览器继续浏览,也可以分享给你的联系人。

2018年09月14日 | 作者: 影子 | 分类: css笔记, 自用代码 | 点击量: 612

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.net/2619/,转载请以链接形式注明出处,谢谢合作!

作者:清晨@网站建设专家. | 清晨,领先的网站优化品牌。

交流QQ号:925474725 邮件支持:shadoweb@qq.com