鼠标浮上去边框渐渐包裹容器的css3动画_CSS3+HTML5_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

鼠标浮上去边框渐渐包裹容器的css3动画

来源：我爱模板网作者：类型：文章教程点击次数：发布时间：2020-10-21 10:44:33

这是我爱模板网扒自别人网站的一个css3动画效果：鼠标浮上去边框渐渐包裹容器的css3动画，运行下面代码查看效果：

<!DOCTYPE html> <html> <head> <title>鼠标浮上去边框渐渐包裹容器的css3动画 - 我爱模板网 www.5imoban.net</title> </head> <a href="javascript:;">我爱模板网</a> <style type="text/css"> a { box-sizing: border-box; color: #333; text-decoration: none; position: relative; display: inline-block; height: 100%; border: 1px solid #EDEDED; padding-left: 40px; margin-left: 10px; padding-right: 20px; margin-right: 10px; display: block; line-height: 40px; transition: all .6s ease-in; } a:hover { border: 1px solid #367dff; } a:after, a:before { box-sizing: border-box; border: 1px solid transparent; width: 0; height: 0; content: ''; display: block; position: absolute; } a:before { bottom: 0; right: 0; transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in; } a:after { top: 0; left: 0; transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s; } a:hover:after, a:hover:before { width: 100%; height: 100%; } a:hover:before { border-bottom-color: #367dff; border-left-color: #367dff; transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s; } a:hover:after { border-top-color: #367dff; border-right-color: #367dff; transition: width 0.2s ease-out,height 0.2s ease-out 0.2s; } </style> </body> </html>
提示：您可以先修改部分代码再运行