<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body { background-color: gainsboro; position: relative; } .out { position: relative; margin: 250px auto; width: 200px; height: 200px; background-color: cadetblue; display: block; margin: 300px auto; } .inner1, .inner2, .inner3, .inner4 { position: absolute; width: 200px; height: 200px; background-color: cadetblue; display: block; opacity: 0; transition: all 0.5s linear; } .inner1 { transform: translateY(-400px); } .inner2 { transform: translateY(400px); } .inner3 { transform: translateX(-400px); } .inner4 { transform: translateX(400px); } .out:hover .inner1, .out:hover .inner2, .out:hover .inner3, .out:hover .inner4 { opacity: 1; transform: translateY(0px); } </style> </head> <body> <div class="out"> <div class="inner1"> </div> <div class="inner2"> </div> <div class="inner3"> </div> <div class="inner4"> </div> </div> </body> </html>
原文：http://www.cnblogs.com/wind90/p/4901457.html