<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background-color: #eee; } .box{ width: 200px; height: 350px; background-color: #fff; position: relative; } .box:hover{ box-shadow:0 0 18px rgba(0,0,0,0.4); } .box:hover:before{position:absolute; content:""; bottom:10px; left:0; height:20px; width:50%; box-shadow:0 15px 10px rgba(0,0,0,0.3); -webkit-transform:rotate(-6deg); -moz-transform:rotate(-6deg); -o-transform:rotate(-6deg); -ms-transform:rotate(-6deg); transform:rotate(-6deg); z-index:-1} .box:hover:after{position:absolute; content:""; bottom:10px; left:0; height:20px; width:50%; box-shadow:0 15px 10px rgba(0,0,0,0.3); -webkit-transform:rotate(-6deg); -moz-transform:rotate(-6deg); -o-transform:rotate(-6deg); -ms-transform:rotate(-6deg); transform:rotate(-6deg); z-index:-1;right:0; left:auto; -webkit-transform:rotate(6deg); -moz-transform:rotate(6deg); -o-transform:rotate(6deg); -ms-transform:rotate(6deg); transform:rotate(6deg)} </style> </head> <body> <div class="box"></div> </body> </html>
效果如下图所示：
