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

最新推荐文章于 2024-01-27 20:29:14 发布

讓丄帝愛伱

最新推荐文章于 2024-01-27 20:29:14 发布

阅读量1.3k

点赞数 6

分类专栏：前端技术文章标签： css css3 html

本文链接：https://blog.csdn.net/ximaiyao1984/article/details/130609278

版权

前端技术专栏收录该内容

234 篇文章 7 订阅

订阅专栏

鼠标悬停图片向上浮动
在这里插入图片描述

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

在这里插入图片描述

讓丄帝愛伱

关注

6
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS实现鼠标悬停图片向上浮动，放大，翻转

transform: rotate(angle)指定元素的 2D 旋转，transition: all 0.2s设定旋转的动画时间。鼠标悬停图片放大，在css样式中增加 transform:scale(放大倍数)鼠标悬停图片向上浮动。
复制链接

扫一扫