- 鼠标悬停图片向上浮动
.box { width: 400px; height: 400px; margin-top: 100px; margin-left: 300px; transition: all 0.4s;//设置上浮过渡时间 } .box:hover { box-shadow: 0 8px 8px 0 grey; // 设置盒子阴影 transform: translate(0, -10px); // 鼠标悬浮时box向上浮动的距离 }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="box"> <img src="./image/2.jpg"> </div> </body> </html>
- 鼠标悬停图片放大 ，在css样式中增加 transform:scale(放大倍数)
.box:hover { box-shadow: 0 8px 8px 0 grey; transform: translate(0, -10px); transform: scale(1.2) } .box-bd { margin: 20px 0 0 300px; width: 700px; }
- transform: rotate(angle)指定元素的 2D 旋转，transition: all 0.2s设定旋转的动画时间
.box { width: 200px; height: 200px; transition: all 0.2s; } .box:hover { box-shadow: 0 8px 8px 0 grey; transform: rotate(-360deg); }
