鼠标悬停图片上浮，并且添加阴影效果
效果图展示：
文章源自玩技e族-https://www.playezu.com/picture/css-tx/
设置index.css样式文章源自玩技e族-https://www.playezu.com/picture/css-tx/
.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页面文章源自玩技e族-https://www.playezu.com/picture/css-tx/
<!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;
}
文章源自玩技e族-https://www.playezu.com/picture/css-tx/
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);
}旋转效果图如下所示： 文章源自玩技e族-https://www.playezu.com/picture/css-tx/
文章源自玩技e族-https://www.playezu.com/picture/css-tx/ 文章源自玩技e族-https://www.playezu.com/picture/css-tx/
玩技站长微信
添加好友自动发送入群邀请
rainbow-shownow
玩技官方公众号
官方微信公众号
PLAYEZU
评论