前言
之前发过一个html5的学习帖子《html5 学习总结》，帖子内容主要是介绍一些html的基础概念和注意事项如盒子模型、高度塌陷问题。利用html的标签我们可以很轻松的写一个静态网页，但是如果想给页面添加一些简单的动态效果则必须要用到CSS了。
下面来给大家分享一下，如何用CSS给网页中的图片添加一个动态的文字说明，即当鼠标移动图片上时，会有相应的文字说明浮现。想要达到这个效果只要用到的知识点是CSS的 transition(点击查看更详细的transiton说明) 属性。
这里简单介绍一下transition有哪些可以设置的方面：
1、transition-property：设置过渡的属性(all，none，property)，比如：width、height等属性，当选择多个时用‘,’分割，默认为all。
2、transition-duration：设置过渡的时间，比如：1s 、500ms
3、transition-timing-function：设置过渡的运动方式，常用有 linear(匀速)、ease(缓冲运动)
4、transition-delay：设置动画的延迟，比如：1s、500ms
可以采用transition: property duration timing-function delay方式同时设置四个属性。
例如我们有原始图片，如下面所示：
现在需要到达鼠标移入到图片上时出现文字说明的效果，如下所示：
那么对于这样的需求如何实现呢？废话不多说，直接看下面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.pic_con{
width:200px;
height:300px;
margin:50px auto 0;
position:relative;
overflow:hidden;
}
.pic_info{
position:absolute;
left:0;
top:300px;
width:100px;
height:200px;
background-color:rgba(0,0,0,0.3);
color:#fff;
padding:10px;
transition:all 500ms ease;
}
.pic_con:hover .pic_info{
top:180px;
}
</style>
</head>
<body>
<div class="pic_con">
<img src="images/banner01.jpg" alt="banner">
<div class="pic_info">
<h3>新鲜的柠檬</h3>
<p>价格：5元/kg <br> 好吃不贵，你值得拥有</p>
</div>
</div>
</body>
</html>
解释一下代码的实现过程，首先是在页面中创建了一个块div元素("pic_con"，长宽与图片大小一直)，然后这个块元素中添加了需要展示的图片和另一个块元素(“pic_info”，用来显示文字说明，这个块元素需要添加transition属性来达到移入的效果)。最后再给文字说明的块元素添加一个“hover”鼠标移入属性就ok啦，这样鼠标移入时文字说明就会出现了。
最后
emm，今天就分享到这里，快给你的网页添加动态移入的文字说明吧！各位看官们帮忙点个赞呀！！！
网友评论