html如何给图⽚添加动态的⽂字说明
前⾔
  之前发过⼀个html5的学习帖⼦《html5 学习总结》，帖⼦内容主要是介绍⼀些html的基础概念和注意事项如盒⼦模型、⾼度塌陷问题。利⽤html的标签我们可以很轻松的写⼀个静态⽹页，但是如果想给页⾯添加⼀些简单的动态效果则必须要⽤到CSS了。
  下⾯来给⼤家分享⼀下，如何⽤CSS给⽹页中的图⽚添加⼀个动态的⽂字说明，即当⿏标移动图⽚上时，会有相应的⽂字说明浮现。想要达到这个效果只要⽤到的知识点是CSS的 transition(点击查看更详细的transiton说明) 属性。html图片展示特效
这⾥简单介绍⼀下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⽅式同时设置四个属性。
例如我们有原始图⽚，如下⾯所⽰：
现在需要到达⿏标移⼊到图⽚上时出现⽂字说明的效果，如下所⽰：
那么对于这样的需求如何实现呢？废话不多说，直接看下⾯代码：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。