慕课网

制作3D旋转导航综合练习题

小伙伴们，根据变形transform和过渡transition等内容，实现如下3D旋转动画下拉导航

案例在线演示地址：http://codepen.io/airen/pen/icFba

任务

1、通过CSS3的@font-face属性引入本地字体

2、调用自定义的字体

3、设置3D舞台布景

4、给3D舞台布景设置过渡动画效果

5、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果

6、给3D舞台中“.three-d-box”设置过渡与变形效果

7、给导航设置3D前，与3D后变形效果

8、设置导航当前状态与悬浮状态下的背景效果

9、显示下拉导航菜单，并其设置一个变形效果

?不会了怎么办: 提示1：

使用@font-face引入本地字体，本地字体的路径为：

http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu

同时提供自定义字体：

“sansation_regular-webfont.eot”、“sansation_regular-webfont.woff”、“sansation_regular-webfont.ttf”和“sansation_regular-webfont.svg”

提示2：

通过font-family调用自定义的字体名“sansationregular”。

提示3：

在元素”.three-d”上使用“perspective”给元素设置3D舞台布景，并且将其值设置为”200”

提示4：

通过transition给3D舞台设置过渡动画，设置的参数为所有属性“all”,过渡时间持续“0.07s”，使用的过渡函数为“linear”。

提示5：

给不是当前状态的3D舞台的悬浮与聚焦状态设置旋转效果，也就是“.three-d:not(.active):hover”和“.three-d:not(.active):focus”状态下的“.three-d-box”设置z轴位移“-25px”，X轴旋转“90deg”。

提示6：

给3D舞台中的“.three-d-box”元素设置过渡效果，并且对其Z设置一个“-25px”旋转。

提示7：

在.front”元素上设置X轴的旋转，旋转度为0，同时给Z轴位移25px。另外给“.back”元素上设置X轴的旋转，旋转度为-90deg，同时Z轴位移25px。

提示8：

通过CSS的渐变与背景尺寸实现导航当前状态与悬浮状态下的斑纹背景效果。

index.html

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作3D旋转导航</title> <style> @import url("http://www.w3cplus.com/demo/css3/base.css"); /*任务一：引入本地字体文件*/ body { background-color:#edecec; } /* basic menu styles */ .nav-menu { display: block; background: #74adaa; width:950px; margin: 50px auto 150px; } .nav-menu > li { display: inline; float:left; border-right:1px solid #94c0be; } .nav-menu > li:last-child { border-right: none; } .nav-menu li a { color: #fff; display: block; text-decoration: none; /*调用本地字体*/ -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-smoothing: antialiased; text-transform: capitalize; overflow: visible; line-height: 20px; font-size: 20px; padding: 15px 30px 15px 31px; } .three-d { /* 任务三、设置3D舞台布景 */ /*任务四、设置3D舞台布景过渡效果*/ position: relative; } .three-d:not(.active):hover { cursor: pointer; } /*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/ .three-d:not(.active):hover .three-d-box, .three-d:not(.active):focus .three-d-box { } .three-d-box { /*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-pointer-events: none; -moz-pointer-events: none; -ms-pointer-events: none; -o-pointer-events: none; pointer-events: none; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; } /*任务七、给导航设置3D前，与3D后变形效果*/ .front { } .back { color: #FFE7C4; } .front, .back { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #74adaa; padding: 15px 30px 15px 31px; color: white; -webkit-pointer-events: none; -moz-pointer-events: none; -ms-pointer-events: none; -o-pointer-events: none; pointer-events: none; -webkit-box-sizing: border-box; box-sizing: border-box; } /*任务八、设置导航当前状态与悬浮状态下的背景效果*/ .nav-menu li .active .front, .nav-menu li .active .back, .nav-menu li a:hover .front, .nav-menu li a:hover .back { } .nav-menu ul { position: absolute; text-align: left; line-height: 40px; font-size: 14px; width: 200px; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -webkit-transform-origin: 0px 0px; -moz-transform-origin: 0px 0px; -ms-transform-origin: 0px 0px; -o-transform-origin: 0px 0px; transform-origin: 0px 0px; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } /*任务九、显示下拉导航菜单，并其设置一个变形效果*/ .nav-menu > li:hover ul { display: block; } </style> </head> <body> <div id="nav"> <ul class="nav-menu clearfix unstyled"> <li><a href="#" class="three-d active"> Home HomeHome </a></li> <li><a href="#" class="three-d"> Services ServicesServices </a></li> <li><a href="#" class="three-d"> Products ProductsProducts </a></li> <li><a href="#" class="three-d"> About AboutAbout </a></li> <li><a href="#" class="three-d"> Contact ContactContact </a></li> <li><a href="#" class="three-d"> Blog BlogBlog</a> <ul class="clearfix unstyled drop-menu"> <li><a href="#" class="three-d"> Html5 Html5Html5 </a></li> <li><a href="#" class="three-d"> Css3 Css3Css3 </a></li> <li><a href="#" class="three-d"> JavaScript JavaScriptJavaScript </a></li> <li><a href="#" class="three-d"> Videogames VideogamesVideogames </a></li> </ul> </li> <li><a href="#" class="three-d"> Shop On-line Shop On-lineShop On-line </a></li> </ul> </div> </body> </html>

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

9-10 制作3D旋转导航综合练习题

制作3D旋转导航综合练习题

任务

写笔记

收藏课程后，能更快找到我哦～