时间：2023-09-17 09:48:01 | 来源：网站运营
时间：2023-09-17 09:48:01 来源：网站运营
一篇文章教会你使用html+css3制作炫酷效果：【一、项目背景】
在线咨询
<body><div class="show"><div class="wap"> <div class="box" > <img src="images/img1.jpg"> <span class='ba'> </div> <div class="box"> <img src="images/img2.jpg"> <span class='ba'></span> </div> <div class="box"> <img src="images/img3.jpg"> <span class='ba'></span> </div> <div class="box"> <img src="images/img4.jpg"> <span class='ba'></span> </div> <div class="box"> <img src="images/img5.jpg"> <span class='ba'></span> </div> </div></div></body>2、添加文字。<span class='ba'>功夫熊猫</span><span class='ba'>飞屋环游记</span><span class='ba'>汽车总动员</span><span class='ba'>玩具总动员</span><span class='ba'>机器人</span>3、添加CSS样式body { background: #ccc; }2）设置box的宽，边框，边框阴影，加载动画过渡效果。.box{ float: left; width: 160px; transition: all 0.5s; border: 1px solid #fff; #边框 box-shadow: -5px 0px 10px 0px #000; #阴影 position: relative; }3）添加外层div 样式。添加overflow属性，防止内容溢出。.wap{ width: 999999999px; overflow: hidden; } .show{ width: 800px; height: 320px; overflow: hidden; margin: 200px auto; box-shadow: 5px 5px 10px 4px #000; }4、文字样式。.ba{ width: 640px; height: 50px; line-height: 50px; color: #fff; background: rgba(0,0,0,0.5); bottom: 0; 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文件自取）。关键词：效果,文章,教会,使用
