<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html, body { height: 100%; } body { background-color: deepskyblue; } .rocket { width: 50px; position: absolute; left: 0; bottom: 0; transform: translate(-100px, 100px) rotate(45deg); transition: all 1s; } body:hover .rocket { transform: translate(500px, -500px) rotate(45deg); } </style> </head> <body> <img class="rocket" src="rocket.png" alt=""> </body> </html>
- demo效果
- 小火箭素材
