搜索到
2
篇与
html
的结果
-
图片文字缩放特效 效果展示代码如下<!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秒，先将文字放大再缩小，将图片放大{cloud title="" type="lz" url="https://beginner.lanzouf.com/i13Sl0338qyf" password=""/} -
