鼠标悬停图片向上浮动，放大，翻转"/>
CSS实现鼠标悬停图片向上浮动，放大，翻转
css + html 实现鼠标悬停图片向上浮动小案例如下：
效果图展示：
设置index.css样式
.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向上浮动的距离
}设置html页面
<!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);
}旋转效果图如下所示：
更多推荐
CSS实现鼠标悬停图片向上浮动,放大,翻转
发布评论