阅读下列说明、效果图,进行静态网页开发,填写( 1 )至( 13 )代码。 【说明】 现接到思极商务有限公司官网页面开发的项目,根据业务需求,需要将业务列表页面的每一个业务以卡片形式展示;同时为提升用户体验,要求实现每个卡片在鼠标经过有旋转和放大效果。 项目名称为 goods ,包含首页 index.html 、 css 文件夹、 img 文件夹,其中, css 文件夹包含 style.css 文件; img 文件夹包含 icon-img.jpg 、 icon-img2.jpg 、 icon-img3.jpg 图片。 请使用 html+css3 完成以下效果,并在对应代码处将空缺代码补全。 【效果图】 ( 1 )图 2-1 鼠标经过前 ( 2 )图 2-2 鼠标经过 【代码:】 第二题 ( 1 ) " > 优化速度 更多 营销分析 更多 < ( 2 ) src="https://cdn.shuashuati.com/imgs/28ee65e5bc8a666a592bf685e6ee4210.jpg" > < ( 3 ) >SEO 和导入链接 更多 【代码】 /* 注意:此处省略了部分和本题无关的 css 代码 */ .box .con ul li{ float:left; background-color: #fff; width: 380px; /* 设置 li 边框为圆角 15px ,文字对齐居中。 */ ( 4 ) : ( 5 ) ; ( 6 ) : ( 7 ) ; overflow: hidden; } .box .con ul li:nth-child(2){ margin:0 30px; } .box .con ul li img{ margin:50px auto 0; /* 此处设置图片的过渡效果为 0.8 秒 */ ( 8 ) : 0.8s; } .box .con ul li p{ /* 设置内边距上下为 0 ,左右为 15px*/ ( 9 ) : ( 10 ) ; line-height: 140px; border-bottom:1px solid #ddd; font-weight: 600; color:#555; } .box .con ul li span{ display: block; width: 100%; height:60px; line-height: 60px; /* 此处设置文字的过渡效果为 0.8 秒 */ ( 11 ) : 0.8s; } /* 用 CSS3 的实现鼠标经过图片旋转 360 度,放大 1.3 倍,离开再旋转还原。 */ .box .con ul li:hover img{ ( 12 ) : ( 13 ) ; } .box .con ul li:hover span{ background-color: #f7c324; font-weight: 600; }