css3怎么实现鼠标经过图片显示描述的动画效果-创新互联

本篇内容主要讲解“css3怎么实现鼠标经过图片显示描述的动画效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css3怎么实现鼠标经过图片显示描述的动画效果”吧!

10年积累的做网站、网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先建设网站后付款的网站建设流程，更有仁化免费网站建设让你可以放心的选择与我们合作。

今天给大家带来的是用css3技术实现鼠标经过图片，显示图片描述的动画效果。鼠标经过图片时，图片动画缩小并渐变显示描述。我们一起看看效果图：

css3怎么实现鼠标经过图片显示描述的动画效果

源码下载

我们一起学习下此案例的代码。

html代码：

代码如下:

BEST HOME

This home is the best

BEST PIC

This pic is the best

BEST PC

This computer is the best

css3代码：

代码如下:

.carre_couleur
{
width: 200px;
height: 200px;
display: inline-block;
position: relative;
margin-top: 0px;
}
.base_hov .retract
{
-webkit-transition: all 200ms ease-in;
-webkit-transform-origin: 50% 20%;
-webkit-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform-origin: 50% 20%;
-moz-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform-origin: 50% 20%;
-ms-transform: scale(1);
transition: all 200ms ease-in;
transform-origin: 50% 20%;
transform: scale(1);
width: 200px;
height: 200px;
position: absolute;
z-index: 2;
left: 0;
}
.base_hov:hover .retract
{
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(0.6);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(0.6);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(0.6);
transition: all 200ms ease-in;
transform: scale(0.6);
}
.acced
{
width: 180px;
padding: 10px;
bottom: 0;
position: absolute;
z-index: 1;
text-align: left;
}
.big_acced
{
color: #ffffff;
font-size: 25px;
font-weight: 400;
}
.middle_acced
{
color: #ffffff;
font-size: 15px;
font-weight: 400;
}

到此，相信大家对“css3怎么实现鼠标经过图片显示描述的动画效果”有了更深的了解，不妨来实际操作一番吧！这里是创新互联建站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

网页题目：css3怎么实现鼠标经过图片显示描述的动画效果-创新互联
本文链接：http://cdxtjz.cn/article/edgsj.html

css3怎么实现鼠标经过图片显示描述的动画效果-创新互联

其他资讯