一个学习分享免费资源平台网站

自定义超链接动画---transition

来源:博客园【破壳而出的蝌蚪】 2019-04-10 22:39:23

html超链接

HTML a {

position: relative; text-decoration: none; display: block; text-align: center; width: 200px; } /* 绘制上下线条 */ a::before, a::after{ content: ""; position: absolute; width: 100%; height: 2px; transition: width .2s ease-in-out; background: #92B901; } /* 固定线条方向 */ a::before{ top: 0; left: 0; } a::after{ bottom: 0; right: 0; } /* 过滤效果 */ a:hover::before, a:hover::after{ width: 0; } a span{ display: block; padding: 20px; } /* 绘制左右线条 */ a span::before, a span::after{ content: ""; position: absolute; width: 2px; height: 100%; transition: height .2s ease; background: #92B901; } a span::before{ bottom: 0; left: 0; } a span::after{ top: 0; right: 0; } a span:hover::before, a span:hover::after{ height: 0; }

原文出处:https://www.cnblogs.com/whnba/p/10666258.html
版权声明:本文来源地址若非本站均为转载,若侵害到您的权利,请及时联系我们,我们会在第一时间进行处理。

热门图集

© 2018 07素材网 粤ICP备18013358号
07素材网由用户分享,若发现权利被侵害,请及时联系我们,我们会在第一时间进行处理。标签大全 网站地图