css3购物网站商品文字提示实例
先来看效果图:
当鼠标划过图片时,有着泰迪熊黑色长方形的背景就会出现。
来看HTML5+CSS3代码:
-
-
-
-
- 购物网站商品文字提示
-
- *{margin:0;padding:0;}
- #con{width:500px;height:470px;margin:50px auto;position:relative;}
- #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;}
- #con:hover p{height:30px;}
-
-
-
-
-
-
泰迪熊
-
-
-
复制代码
代码解释:
构建一个div,div中存放一张需要展示的商品图片,再添加商品图片的文字表述,
给div添加css样式属性,给p元素也添加css样式属性,其中那个高度设置为0,不可见。重点在与用到了绝对定位与相对定位,还对他们不了解的请看此贴http://www.00h5.com/thread-133-1-1.html
把描述文字定位好后添加transition动画,这里我们要鼠标划过div的时候改变的只是p的高度为原来30px即可,而动画也是设置高度属性
Déclaration:Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn