CSS实现鼠标悬停图片向上浮动，放大，翻转

铃儿响叮当不响

已于 2022-07-12 20:48:14 修改

阅读量9.8k

点赞数 20

分类专栏：前端js笔记文章标签： css html

于 2022-07-12 16:10:39 首次发布

本文链接：https://blog.csdn.net/qq_36507046/article/details/125744746

版权

前端js笔记专栏收录该内容

43 篇文章 7 订阅

订阅专栏

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);    
}

旋转效果图如下所示：