HTML:
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> <link rel="stylesheet" href="css/style.css"> <title></title> </head> <body> <div class="middle"> <a class="btn" href="#"> <i class="fa fa-chrome"></i> </a> <a class="btn" href="#"> <i class="fa fa-edge"></i> </a> <a class="btn" href="#"> <i class="fa fa-firefox"></i> </a> <a class="btn" href="#"> <i class="fa fa-internet-explorer"></i> </a> <a class="btn" href="#"> <i class="fa fa-opera"></i> </a> </div> </body> </html>
CSS:
body{ margin:0; padding:0; } .middle{ position: absolute; top:50%; transform: translateY(-50%); width:100%; text-align: center; } .btn{ display: inline-block; width:90px; height:90px; border-radius: 30%; color:#3498db; background: #f1f1f1; margin:10px; box-shadow:0 5px 15px -5px #00000070; overflow: hidden; position: relative; } .btn i{ line-height: 90px; font-size:28px; transition: 0.2s linear; } .btn:hover i{ transform: scale(1.3); color:#f1f1f1; } .btn::before{ content: ""; position:absolute; width:120%; height:120%; background:#3498db; transform: rotate(45deg); left:-110%; top:90%; } .btn:hover::before{ animation: aaa 0.7s 1; top:-10%; left:-10%; } @keyframes aaa { 0%{ left:-110%; top:90%; } 50%{ left:10%; top:-30%; } 100%{ left:-10%; top:-10%; } }
效果：
