阅读下列说明、效果图和代码,完成一个动画,主要应用 HTML 和 css3 完成。 【说明】 在某项目中,项目中的文件包含 index.html 、 style.css 和 img 文件夹。要求鼠标经过盒子顶部半圆区域块从顶部慢慢滑下来,鼠标经过盒子人物图片是渐渐变小,鼠标经过盒子底部玫红色的区域块从底部慢慢升上来。请根据现有的代码和效果图补全代码( 1 ) - ( 7 ) 【效果图】 【 index.html 】 案例 Lucy web 前端 Lucy web 前端 Lucy web 前端 Lucy web 前端 【 transition.css 】 body,h1,p{ margin:0; } .box{ width: 800px; margin:30px auto; 1 ;/* 设置弹性盒子 */ 2 ;/* 设置两端对齐 */ } .box .info{ position: relative; margin:10px; width:180px; height:280px; border:1px solid #ccc; text-align: center; font-size: 16px; overflow:hidden; box-sizing: border-box; } .box .info .thumb{ width:120px; height:120px; border:1px solid #ccc; border-radius:50%; margin:20px auto; overflow:hidden; background-color: #f94a69; } .box .info img{ width:100%; height:100%; border-radius:50%; 3 ;/* 过渡时间 1s*/ } .box .info h1{ color:#333; line-height:50px;/* 设置行高 */ } .box .info p{ color:#555; } .box .info .bottom{ position:absolute;/* 绝对定位 */ 4 ;/* 将底部元素放到盒子外边 31px*/ width:100%; height:30px; background-color: #fd748c;/* 背景颜色 */ transition:1s; } .box .info:hover .bottom{ bottom:0; } .box .info .top{ position:absolute; top:-91px; z-index: -1; width:100%; height:90px; 5 ;/* 设置半圆 */ background-color:#fd748c; transition:1s; } .box .info:hover .top{ top:0; } .box .info:hover img{ 6 ;/* 缩放 */ 7 : 0 0 0 15px #fff;/* 盒子投影 */ } .box .info:hover{ box-shadow:0 0 15px #000; }