HTML代码
<a href="#">RABBIT</a>
CSS代码
body { background: #353535;
}a { width: 200px; display: block; position: relative; border: 2px solid #D24D57; margin: 40px auto; padding: 14px 16px; font-size: 20px; color: #fff; text-align: center; text-decoration: none; overflow: hidden;
}a:after { content: ''; display: block; position: absolute; opacity: 0; width: 100%; height: 0%; left: 50%; top: 50%; z-index: -1; border: 3px solid #D24D57; transform: translateX(-50%) translateY(-50%); -webkit-transition: all 0.75s ease 0s; -moz-transition: all 0.75s ease 0s; -o-transition: all 0.75s ease 0s; transition: all 0.75s ease 0s;
}a:hover:after { height: 150%; opacity: 1;
}HTML代码
<a href="#">RABBIT</a>
CSS代码
body { background: #353535;
}a { width: 200px; display: block; position: relative; border: 2px solid #D24D57; margin: 40px auto; padding: 14px 16px; font-size: 20px; color: #fff; text-align: center; text-decoration: none; overflow: hidden;
}a:after { content: ''; display: block; position: absolute; opacity: 0; width: 100%; height: 0%; left: 50%; top: 50%; z-index: -1; border: 3px solid #D24D57; transform: translateX(-50%) translateY(-50%) rotate(90deg); -webkit-transition: all 0.75s ease 0s; -moz-transition: all 0.75s ease 0s; -o-transition: all 0.75s ease 0s; transition: all 0.75s ease 0s;
}a:hover:after { height: 450%; opacity: 1;
}HTML代码
<a href="#">RABBIT</a>
CSS代码
body { background: #353535;
}a { width: 200px; display: block; position: relative; border: 2px solid #D24D57; margin: 40px auto; padding: 14px 16px; font-size: 20px; color: #fff; text-align: center; text-decoration: none; overflow: hidden;
}a:after { content: ''; display: block; position: absolute; opacity: 0; width: 100%; height: 0%; left: 50%; top: 50%; z-index: -1; border: 3px solid #D24D57; transform: translateX(-50%) translateY(-50%) rotate(-25deg); -webkit-transition: all 0.75s ease 0s; -moz-transition: all 0.75s ease 0s; -o-transition: all 0.75s ease 0s; transition: all 0.75s ease 0s;
}a:hover:after { height: 300%; opacity: 1;
}HTML代码
<a href="#">RABBIT</a>
CSS代码
body { background: #353535;
}a { width: 200px; display: block; position: relative; border: 2px solid #D24D57; margin: 40px auto; padding: 14px 16px; font-size: 20px; color: #fff; text-align: center; text-decoration: none; overflow: hidden;
}a:after { content: ''; display: block; position: absolute; opacity: 0; width: 100%; height: 0%; left: 50%; top: 50%; z-index: -1; background-image: linear-gradient( transparent 50%, rgba(210,77,87,0.2) 50%); background-size: 10px 10px; transform: translateX(-50%) translateY(-50%) rotate(25deg); -webkit-transition: all 0.75s ease 0s; -moz-transition: all 0.75s ease 0s; -o-transition: all 0.75s ease 0s; transition: all 0.75s ease 0s;
}a:hover:after { height: 300%; opacity: 1;
}最后两个效果的做法也是一样的，只是改变了一下角度而已。
作者：滑滑兔
链接：https://www.jianshu.com/p/4bd0afb3ce9e