<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css之transition动画效果</title> <style> body,html{ position: relative; } #root{ position: relative; top: 200px; left: calc(50% - 150px); width: 300px; height: 300px; background-color: yellow ; overflow: hidden; } #root:hover #box{ top: 0; } #box{ width: 300px; height: 300px; background-color: skyblue; position: absolute; top: -100%; transition: all ease-in 2s; } #box button { position: absolute; bottom: 0; right: 0; } #box:active{ background-color: red; } </style> </head> <body> <div id="root"> <div id="box"> <button onclick="toBuy()">购买</button> </div> </div> </body> </html> <script> function toBuy(){ alert('购买成功') } </script>