效果展示
代码如下
<!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秒，先将文字放大再缩小，将图片放大
评论 (0)