先为大家提供两张照片:
效果如下:
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嫦娥</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background: #111111; } .wrap{ width: 470px; height: 470px; margin: 50px auto; border: 10px solid white; text-align: center; } .wrap .moon{ margin-top: 50px; } .wrap .ce{ position: relative; margin-top: -550px; margin-left: -350px; opacity: 0;/*透明度:全透明*/ transition-duration: 2s;/*动画过渡时间*/ } .wrap:hover .ce{ transition-duration: 2s; transform: translate(100px,100px);/*嫦娥移动方向*/ opacity: 1;/*透明度:不透明*/ } </style> </head> <body> <div class="wrap"> <div class="moon"> <img src="../img/moon.png" alt="" width="430" height="430"> </div> <div class="ce"> <img src="../img/嫦娥.png" alt="" width="300" height="300"> </div> </div> </body> </html>