课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

比较复杂，先在这里码一下

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

JoV

2014-12-26 22:26

比较复杂，先在这里码一下

写回答 关注

1回答

  • QLwang_web
    2016-01-15 14:16:02

    <!doctype html>

    <html>

    <head>

        <meta charset="UTF-8">

        <title>制作3D旋转导航</title>

    <style>

            @import url("http://www.w3cplus.com/demo/css3/base.css");

            /*任务一：引入本地字体文件*/

            @font-face{

             font-family: 'sansationregular';

             src:url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot');

    src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot?#iefix') format('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/embedded-opentype'),

    url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.woff') format('woff'),

    url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.ttf') format('truetype'),

    url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.svg#sansationregular') format('svg');

    font-weight: normal;

    font-style: normal;

            }

            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;

              /*调用本地字体*/

             font-family: 'sansationregular';

              -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舞台布景 */

             perspective:200px;

             -o-perspective:200px;

             -webkit-perspective:200px;

             -moz-perspective:200px;

             -ms-perspective:200px;


              /*任务四、设置3D舞台布景过渡效果*/

             transition:all 0.7s linear;

             -o-transition:all 0.7s linear;

             -ms-transition:all 0.7s linear;

             -moz-transition:all 0.7s linear;

             -webkit-transition:all 0.7s linear;

              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 {

             transform:translateZ(-25px) rotateX(90deg);

             -o-transform:translateZ(-25px) rotateX(90deg);

             -ms-transform:translateZ(-25px) rotateX(90deg);

             -moz-transform:translateZ(-25px) rotateX(90deg);

             -webkit-transform:translateZ(-25px) rotateX(90deg);


            }

            

            .three-d-box {

              /*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/

    transform:translateZ(-25px);

             -o-transform:translateZ(-25px);

             -ms-transform:translateZ(-25px);

             -moz-transform:translateZ(-25px);

             -webkit-transform:translateZ(-25px);


             transition:all .3s ease-out;

             -o-transition:all .3s ease-out;

             -ms-transition:all .3s ease-out;

             -moz-transition:all .3s ease-out;

             -webkit-transition:all .3s ease-out;



              -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 {

             transform:rotateX(0deg) translateZ(25px);

             -ms-transform:rotateX(0deg) translateZ(25px);

             -o-transform:rotateX(0deg) translateZ(25px);

             -moz-transform:rotateX(0deg) translateZ(25px);

             -webkit-transform:rotateX(0deg) translateZ(25px);

             }

            

            .back {

             transform:rotateX(-90deg) translateZ(25px);

             -ms-transform:rotateX(-90deg) translateZ(25px);

             -o-transform:rotateX(-90deg) translateZ(25px);

             -moz-transform:rotateX(-90deg) translateZ(25px);

             -webkit-transform:rotateX(-90deg) translateZ(25px);

              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 {

             background-color: #51938F;

             background-size: 5px 5px;

             background-position: 0 0, 30px 30px;

             background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

     background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

    background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

     background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

     background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

             /*background-image: -webkit-linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238),-ms-linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238),-moz-linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238),-o-linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238),linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238);*/

            }

            .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;

    -webkit-transform: rotateX(0deg);

    -moz-transform: rotateX(0deg);

    -ms-transform: rotateX(0deg);

    -o-transform: rotateX(0deg);

    transform: rotateX(0deg);          

             }

    </style>

    </head>

    <body>

    <div id="nav">

    <ul class="nav-menu clearfix unstyled">

    <li><a href="#" class="three-d active">

    Home

    <span><span>Home</span><span>Home</span></span>

    </a></li>

    <li><a href="#">

    Services

    <span><span>Services</span><span>Services</span></span>

    </a></li>

    <li><a href="#">

    Products

    <span><span>Products</span><span>Products</span></span>

    </a></li>

    <li><a href="#">

    About

    <span><span>About</span><span>About</span></span>

    </a></li>

    <li><a href="#">

    Contact

    <span><span>Contact</span><span>Contact</span></span>

    </a></li>

    <li><a href="#">

    Blog

    <span><span>Blog</span><span>Blog</span></span></a>

    <ul class="clearfix unstyled drop-menu">

    <li><a href="#">

    Html5

    <span><span>Html5</span><span>Html5</span></span>

    </a></li>

    <li><a href="#">

    Css3

    <span><span>Css3</span><span>Css3</span></span>

    </a></li>

    <li><a href="#">

    JavaScript

    <span><span>JavaScript</span><span>JavaScript</span></span>

    </a></li>

    <li><a href="#">

    Videogames

    <span><span>Videogames</span><span>Videogames</span></span>

    </a></li>

    </ul>

    </li>

    <li><a href="#">

    Shop On-line

    <span><span>Shop On-line</span><span>Shop On-line</span></span>

    </a></li>

    </ul>

    </div>

    </body>

    </html>


    0 0

十天精通CSS3

本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备

242554 学习 · 2623 问题

查看课程

相似问题

先在这里马一下！！！

回答 4

感觉这种比较难，马一下

回答 1

好复杂。。。

回答 1

感觉这个练习题是不是放在选择器那章以后比较合适。

回答 2

伪类的权值是不是比较低？

回答 1

打开慕课网App查看更多内容