鼠标悬浮时缓慢放大图片（过渡transition）

最新推荐文章于 2022-09-28 07:00:00 发布

多米尼克领主

最新推荐文章于 2022-09-28 07:00:00 发布

阅读量642

点赞数 2

分类专栏：前端文章标签： css html html5

本文链接：https://blog.csdn.net/qq_42822993/article/details/120448930

版权

前端专栏收录该内容

21 篇文章 3 订阅

订阅专栏

鼠标悬浮时缓慢放大图片（过渡transition）

一、不添加过渡

效果：

请添加图片描述

代码：

<!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>
    <style>
        img{
            /* 统一设置图片高度 */
            height: 100px;
        }
        .foodList{
            /* 给父容器开启flex布局，让块级元素也能共享一行 */
            display: flex;
            border: 1px solid #6666;
        }
        .food{
            margin: 20px;
        }
        /* 当鼠标悬浮时时，图片放大 */
        img:hover {
            height: 120px;
        }

    </style>
</head>
<body>
    <div class="foodList">
        <div class="food">
            <div class="cover"><img src="./1.jpg" alt=""></div>
            <div class="title">孜然羊肉</div>
        </div>
        <div class="food">
            <div class="cover"><img src="./2.jpg" alt=""></div>
            <div class="title">羊肉清汤</div>
        </div>
        <div class="food">
            <div class="cover"><img src="./3.jpg" alt=""></div>
            <div class="title">红烧羊肉</div>
        </div>
    </div>
</body>
</html>

二、添加过渡时

效果：

请添加图片描述

代码：

        img:hover {
            height: 120px;
            //添加过渡效果
            //height为变化的属性，1s为过渡效果的持续时间
            transition: height,1s;
        }

三、transision

使用方法：
transition: property duration timing-function delay;
参数解释：

参数名	参数说明
property	需要添加过渡效果的 CSS 属性的名称
duration	过渡效果持续时间
timing-function	过渡效果速度效果的速度曲线
delay	推迟多少时间后过渡效果开始

多米尼克领主

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
鼠标悬浮时缓慢放大图片（过渡transition）

鼠标悬浮时缓慢放大图片（过渡transition）一、不添加过渡效果：代码：<!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,
复制链接

扫一扫