class|一篇文章教会你使用html+css3制作炫酷效果( 二 )
left: 0;
position: absolute;
text-indent: 2em;
}
5、添加鼠标移上去的效果样式 。
.ba:hover{
height: 320px;
transition: all 0.5s;
}
.show:hover .box{
width: 40px;
}
.show .box:hover{
width: 640px;
}
6、添加详细介绍文字 。 （text文件自取） 。
【五、效果展示】
1、点击F12运行到浏览器 。
本文插图
2、点击图片放大 。
本文插图
3、点击文字 ， 详细介绍 。
本文插图
【六、总结】
1、本项目 ， 就鼠标点击事件遇到的一些难点进行了分析及提供解决方案 。
2、html+css也可以做出网站页面的效果 ， 在上面显示图片标题的地方不能用绝对定位 ， 于是用的relative定位 ， 这个地方是布局的核心部分 ， 否则无法将文字放在图片之上 。
3、按照操作步骤 ， 自己尝试去做 。 自己实现的时候 ， 总会有各种各样的问题 ， 切勿眼高手低 ， 勤动手 ， 才可以理解的更加深刻 。
4、需要本文源码的小伙伴 ， 后台回复“炫酷效果”四个字 ， 即可获取 。
****看完本文有收获？请转发分享给更多的人****
IT共享之家
推荐阅读
- 样子|十二星座性格中最让人心疼的地方
- 信风|等你，是一种久违的美丽〈外一篇〉
- 生肖|“说话算话”的4大生肖男，一生为爱痴狂，女人可以很放心
- 黑色丝袜|黑色丝袜搭配高跟鞋，初秋的穿搭，会更有层次感
- 辣椒|吃辣椒是能致癌还是能防癌呢？
- 烹饪|不管什么蔬菜，炒点肉，味道还是完全不同的呢
- 齐白石|单刀直入、大刀阔斧的齐白石篆刻艺术
- |恋爱关系中，很难被征服的4大星座
- 女人|容易追的女人，往往具备这些特质，别不懂
- |美人美图：白色微透无袖衬衣