来自codepen,http://codepen.io/PalashSharma20/pen/YWBAgN
知识点：屏幕居中、transform、transition、transition-delay
最重要的是idea
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } body, html { height: 100%; min-height: 100%; } body { font-family: sans-serif; } .button { height: 200px; width: 400px; position: relative; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); display: table; cursor: pointer; background: #252525; transition: 0.333333333333333s all ease-in; color: #ff4c4c; } .button .border { background: #ff4c4c; position: absolute; transition: 1s all linear; } .button .border.o { height: 5px; width: 0; bottom: 0; left: 0; transition-delay: 1s; } .button .border.tw { bottom: 0; right: 0; width: 5px; height: 0; } .button .border.th { top: 0; right: 0; width: 0; height: 5px; transition-delay: 1s; } .button .border.f { top: 0; left: 0; width: 5px; height: 0; } .button:hover { background: #ff4c4c; color: #252525; transition-delay: 2s; } .button:hover .o, .button:hover .th { width: 100%; } .button:hover .tw, .button:hover .f { height: 100%; } .button span { display: table-cell; vertical-align: middle; font-size: 40px; text-align: center; letter-spacing: 13px; text-transform: uppercase; font-weight: 100; } </style> </head> <body> <div class="button"> <span>hover me</span> <div class="border o"></div> <div class="border tw"></div> <div class="border th"></div> <div class="border f"></div> </div> </body> </html>