阅读下列说明、效果图,进行静态网页开发,填写(1)至(10)代码。 【说明】 现接到一个项目,是企业信息展示网站,为提高用户的体验,现需要用CSS3实现摇动效果的下拉菜单。 项目包含首页index.html、css文件夹。根据已有代码和效果图,在对应代码处将空缺代码补全。 【效果图】 图2-1 【index.html代码】 第二题-css3实现动画 主菜单一 子菜单1-1 子菜单1-2 子菜单1-3 主菜单二 子菜单2-1 子菜单2-2 子菜单2-3 子菜单2-4 子菜单2-5 子菜单2-6 主菜单三 子菜单3-1 子菜单3-2 子菜单3-3 主菜单四 子菜单4-1 子菜单4-2 子菜单4-3 【index.css代码】 * { margin: 0; padding: 0; list-style-type:none; } body { padding: 30px; font-family: "Helvetica Neue", helvetica, arial; background: url('http://subtlepatterns.com/patterns/white_carbonfiber.png'); } #container { position: relative; width: 940px; } #container:after { content: ""; display: block; clear: both; height: 0; } #menu { position: relative; float: left; width: 100%; padding: 0 20px; border-radius: 3px; ____(1)_____: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15); /*设盒子阴影*/ background: #ccc; } #menu, #menu ul { list-style: none; } #menu > li { float: left; ____(2)____; /*相对定位*/ border-right: 1px solid rgba(0,0,0,.1); ____(1)____: 1px 0 0 rgba(255,255,255,.25); /*设盒子阴影*/ perspective: 1000px; } /*设置第一个li元素*/ #menu > li__(3)_____ { border-left: 1px solid rgba(255,255,255,.25); ____(1)____: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25); } #menu li li{float:left;} #menu a { display: block; float:left; position: relative; ____(4)_____:10;/*设置层级为10*/ padding: 13px 20px 13px 20px; text-decoration: none; color: rgba(75,75,75,1); line-height: 1; font-weight: 600; font-size: 12px; _____(5)____: -.05em;/*设置字符间距*/ background: transparent; ____(6)_____: 0 1px 1px rgba(255,255,255,.9);/*设置文字投影*/ transition: all .25s ease-in-out; } #menu > li:hover > a { background: #333; color: rgba(0,223,252,1); _____(6)___: none; } #menu li ul { position: absolute; top:38px; left: 0; ____(4)____: 1;/*设置层级*/ width: 200px; padding: 0; opacity: 0; visibility: hidden; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background: transparent; overflow: hidden; _____(7)____: 50% 0%;/*设置旋转元素的基点位置*/ } #menu li:hover ul { padding: 15px 0; background: #333; opacity: 1; visibility: visible; ___(1)____: 1px 1px 7px rgba(0,0,0,.5); animation-name: swingdown; _____(8)_____: 1s;/*设置动画执行时间*/ animation-timing-function: ease; } /*定义动画*/ ____(9)_____ swingdown { 0% { opacity: .99999; ____(10)____: rotateX(90deg); } 30% { ____(10)____: rotateX(-20deg) rotateY(5deg); animation-timing-function: ease-in-out; } 65% { ____(10)____: rotateX(20deg) rotateY(-3deg); animation-timing-function: ease-in-out; } 100% { ____(10)____: rotateX(0); animation-timing-function: ease-in-out; } } #menu li li a { padding-left: 15px; font-weight: 400; color: #ddd; text-shadow: none; border-top: dotted 1px transparent; border-bottom: dotted 1px transparent; transition: all .15s linear; } #menu li li a:hover { color: rgba(0,223,252,1); border-top: dotted 1px rgba(255,255,255,.15); border-bottom: dotted 1px rgba(255,255,255,.15); background: rgba(0,223,252,.02); } 【问题】(20分,每空2分) 进行静态网页开发,补全代码,在(1)至(10)处填入正确的内容。