transition鼠标移入图片从底部浮现文字的效果_css transition从底部-优快云博客

本文介绍了如何使用CSS3的transition属性创建一个鼠标移入图片时，文字从底部浮现的动态效果。详细讲解了HTML结构和相应的CSS样式设置，包括选择器、属性及过渡效果的配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html框架：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="transition.css">
</head>

<body>
    <div class="total">
        <div class="top">
            <img src="http://img0.imgtn.bdimg.com/it/u=3869664431,1448043395&fm=26&gp=0.jpg">
            <div class="text">植物大战僵尸不是暴雪旗下的游戏</div>
        </div>
        <div class="bottom">购买本游戏</div>
    </div>
</body>
</html>

CSS样式：

/* 给所有内容一个盒子（包括需要做出过渡效果的内容） */
.total {
    width: 533px;
    height: 400px;
    border: 1px solid #999999;
    overflow: hidden;
}
/* 再给一个盒子放入内容（不包括需要做出过渡效果的内容） */
.top {
    width: 533px;
    height: 400px;
    /* 给这个盒子一个过渡，因为我们是想让这个盒子出现过渡效果 */
    transition: all 1s ease-in-out;
}
/* top盒中的文本内容，计算好盒子高度 */
.text {
    width: 533px;
    height: 50px;
    line-height: 50px;
    text-align: center; 
}
/* 底部的上移效果 */
.bottom {
    width: 533px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: orangered;
    color: white;
    font-weight: 900;
    font-size: 20px;
    margin-left: 1px;
}
/* 给total一个hover，高度是总盒子的高度减去bottom盒的高度 */
.total:hover .top {
    height: 350px;
}