图片文字缩放特效

小明
2022-04-12 / 0 评论 / 7 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年04月12日,已超过175天没有更新,若内容或图片失效,请留言反馈。

效果展示

Test

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片文字缩放</title>
<style type="text/css">
*{
    transition:0.2s linear;/*动画过渡时间*/}
body{text-align:center;
     width:1500px;
    }
.box{
    width:600px;
    height:300px;
    overflow:hidden;
    position:relative;
    float:left;
    margin:10px;
    box-shadow: 10px 10px  10px  #666;/*立体阴影及颜色*/
    }
img{
    width:600px;
    height:300px;}
.box .info{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background-color:#FFF;
    text-align:center;
    opacity:0;
    transform:scale(1.3);
    }
.box:hover .info{
    opacity:0.8;
    transform:scale(1);
    }
.box:hover img{
    transform:scale(1.3);
}
</style>

</head>

<body>
<div class="box">
    <img src="images/dog1.jpg" width="550 height="286" />
    <div class="info">
        <h3>狗诞辰节</h3>
        <p>狗诞辰节是流行于广西壮族自治区靖西县、隆林各族自治县和德保县一带的壮族民间节日。节日为每年农历的二月二十二日。民间传说狗是天上的龙犬,农历二月二十二日是它的诞辰,是日狗神显灵之时,吃狗肉可令人益寿延年。因此,这一天壮族家家户户烹食狗肉,形成传统,流传。</p>
        <a href="##" class="btn">learn more</a>
    </div>
</div>
<div class="box">
    <img src="images/dog2.jpg" width="550 height="286" />
    <div class="info">
        <h3>狗诞辰节</h3>
        <p>狗诞辰节是流行于广西壮族自治区靖西县、隆林各族自治县和德保县一带的壮族民间节日。节日为每年农历的二月二十二日。民间传说狗是天上的龙犬,农历二月二十二日是它的诞辰,是日狗神显灵之时,吃狗肉可令人益寿延年。因此,这一天壮族家家户户烹食狗肉,形成传统,流传。</p>
        <a href="##" class="btn">learn more</a>
    </div>
</div>
</body>
</html>

原理

先把文字隐藏在图片上,然后设置动画过渡时间为1秒,先将文字放大再缩小,将图片放大

1

评论 (0)

取消