码迷,mamicode.com
首页 > Web开发 > 详细

css3购物网站商品文字提示实例

时间:2015-09-09 22:49:51      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:

css3购物网站商品文字提示实例
先来看效果图:
<ignore_js_op>技术分享 
当鼠标划过图片时,有着泰迪熊黑色长方形的背景就会出现。
来看HTML5+CSS3代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>购物网站商品文字提示</title>
  6.         <style type="text/css">
  7.         *{margin:0;padding:0;}
  8.                 #con{width:500px;height:470px;margin:50px auto;position:relative;}
  9.                 #con p{background:#000;color:#fff;width:100%;height:30px;text-align:center;line-height:30px;position:absolute;left:0;bottom:0;opacity:0.6;height:0;-webkit-transition:height 0.5s;}
  10.                 #con:hover p{height:30px;}
  11.         </style>
  12. </head>
  13. <body>
  14.         <div id="con">
  15.         <img src="images/dog.jpg" alt="商品图" title="商品图">
  16.                 <p>泰迪熊</p>
  17.         </div>
  18. </body>
  19. </html>
复制代码

代码解释:
构建一个div,div中存放一张需要展示的商品图片,再添加商品图片的文字表述,
给div添加css样式属性,给p元素也添加css样式属性,其中那个高度设置为0,不可见。重点在与用到了绝对定位与相对定位,还对他们不了解的请看此贴http://www.00h5.com/thread-133-1-1.html
把描述文字定位好后添加transition动画,这里我们要鼠标划过div的时候改变的只是p的高度为原来30px即可,而动画也是设置高度属性

css3购物网站商品文字提示实例

标签:

原文地址:http://www.cnblogs.com/00h5/p/4796136.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!