<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title></title> <meta content="" name="Keywords"> <meta content="" name="Description"> <meta name="format-detection" content="telephone=no"> <style> *{ margin:0; padding:0; } ul,li{ list-style:none; } ul{ width:300px; margin:20px auto; } li{ height:20px; line-height:20px; margin-bottom:16px; width:100px; } :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a:hover { border: 1px solid #367dff; color: #1769ff; text-decoration: none; } a { border: 1px solid #EDEDED; display: block; -webkit-transition: all 0.6s ease-in; -moz-transition: all 0.6s ease-in; -ms-transition: all 0.6s ease-in; -o-transition: all 0.6s ease-in; transition: all 0.6s ease-in; color: #ccc; text-decoration: none; position: relative; height: 100%; } a:after, a:before { content: ''; display: block; position: absolute; width: 0; height: 0; box-sizing: border-box; border: 1px solid transparent; } a:after { top: 0; left: 0; -webkit-transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s; transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s; } a:before { bottom: 0; right: 0; -webkit-transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in; transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in; } a:hover:after, a:hover:before { width: 100%; height: 100%; } a:hover:before { border-bottom-color: #367dff; border-left-color: #367dff; -webkit-transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s; 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; -webkit-transition: width 0.2s ease-out,height 0.2s ease-out 0.2s; transition: width 0.2s ease-out,height 0.2s ease-out 0.2s; } </style> </head> <body> <ul> <li> <a href="javascript:void (0);">列表1</a> </li> <li> <a href="javascript:void (0);">列表1</a> </li> <li> <a href="javascript:void (0);">列表1</a> </li> </ul> </body> </html>