美国队长盾牌复原
描述：鼠标焦点在div上，盾牌复原
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盾牌</title><style>*{margin:0;padding: 0;}body{background-color: #000;}.box{width: 640px;margin: 120px auto;}.box img{transition: transform 2s;}.box img:nth-of-type(1){transform: translate(100px ,100px) rotate(30deg);}.box img:nth-of-type(2){transform: translate(-100px, -100px) rotate(-30deg);}.box img:nth-of-type(3){transform: translate(200px ,200px) rotate(60deg);}.box img:nth-of-type(4){transform: translate(-200px ,-200px) rotate(-60deg);}.box img:nth-of-type(5){transform: translate(150px, 150px) rotate(90deg);}.box img:nth-of-type(6){transform: translate(50px ,-150px) rotate(-90deg);}.box img:nth-of-type(7){transform: translate(-150px, -150px) rotate(60deg);}.box img:nth-of-type(8){transform: translate(-80px ,100px) rotate(-90deg);}.box img:nth-of-type(9){transform: translate(250px ,10px) rotate(45deg);}.box:hover img{transform: none;}</style></head>
<body><div class="box"><img src="./img/shield1.jpg" alt=""><img src="./img/shield2.jpg" alt=""><img src="./img/shield3.jpg" alt=""><img src="./img/shield4.jpg" alt=""><img src="./img/shield5.jpg" alt=""><img src="./img/shield6.jpg" alt=""><img src="./img/shield7.jpg" alt=""><img src="./img/shield8.jpg" alt=""><img src="./img/shield9.jpg" alt=""></div>
</body>
</html>
效果图：
