为了账号安全，请及时绑定邮箱和手机立即绑定
首页 免费课 十天精通CSS3 笔记

十天精通CSS3

大漠 Web前端工程师
查看讲师更多课程 大漠讲师的其他课程
难度初级
时长 5小时 0分
学习人数
综合评分9.40
485人评价 查看评价
9.7 内容实用
9.3 简洁易懂
9.2 逻辑清晰
最热 最新
  • 007号学员

    @font-face{

        font-family: "MOOC Font";

        src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");

    }

    设置字体，非常重要

    查看全部
    0 采集 收起 来源：CSS3文字与字体 嵌入字体@font-face

    2018-12-11

  • 慕标2166624

    <!doctype html>

    <html>

    <head>

        <meta charset="UTF-8">

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

    <style>

            @import url("http://www.imooc.com/Amaranth-BoldItalic.otf");

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

            @font-face{

               font-family:"MOOC Font";

               import url("http://www.imooc.com/Amaranth-BoldItalic.otf");

            }

            body {

             background-color:#edecec;

            }

            ul, li {

                list-style: none outside none;

            }   

            /* 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;

                position: relative;

            }

            .nav-menu > li:last-child {

              border-right: none;

            }

            .nav-menu li a {

              color: #fff;

             display: block;

             text-decoration: none;

                font-family:"MOOC Font";

              /*调用本地字体*/

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

                perspective: 200px;

              /* 任务三、设置3D舞台布景 */

            transition:all .6s linear;

              /*任务四、设置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 {

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

            }

            .three-d-box {

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

                transition:all .3s ease-out;

                transform: translatez(-25px);

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

             }

            

            .back {

                transform:rotatex(-90deg) translatez(25px);

                animation-fill-mode:forwards;

              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:#51938f;

                background-size: 5px 5px;  

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

            }

            .nav-menu ul {

              position: absolute;

                left: -40px;

             text-align: left;

             line-height: 40px;

             font-size: 20px;

             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:visible;   

                

            }

            /*任务九、显示下拉导航菜单，并其设置一个变形效果*/

            .nav-menu > li:hover ul {

              display: block;

              transform: rotateX(0deg);  

             }

            

    </style>

    </head>

    <body>

    <div id="nav">

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

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

    Home

    <span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>

    </a></li>

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

    Services

    <span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>

    </a></li>

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

    Products

    <span class="three-d-box"><span class="front">Products</span><span class="back">Products</span></span>

    </a></li>

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

    About

    <span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>

    </a></li>

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

    Contact

    <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>

    </a></li>

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

    Blog

    <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span></a>

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

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

    Html5

    <span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span>

    </a></li>

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

    Css3

    <span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span>

    </a></li>

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

    JavaScript

    <span class="three-d-box"><span class="front">JavaScript</span><span class="back">JavaScript</span></span>

    </a></li>

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

    Videogames

    <span class="three-d-box"><span class="front">Videogames</span><span class="back">Videogames</span></span>

    </a></li>

    </ul>

    </li>

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

    Shop On-line

    <span class="three-d-box"><span class="front">Shop On-line</span><span class="back">Shop On-line</span></span>

    </a></li>

    </ul>

    </div>

    </body>

    </html>


    查看全部
    0 采集 收起 来源：制作3D旋转导航综合练习题

    2018-12-10

  • Mars_Hello 
    - top left 属性只有在该标签为固定定位时才生效， 
然后 这里是采用绝对定位实现垂直居中。 代码较多。
但是不需要知道宽高。 不过transform的兼容性不是很好
得ie9以上， 也能用margin-left；代替transform 
但是需要知道宽高


    查看全部
    1 采集 收起 来源：CSS3中的动画--过渡延迟时间 transition-delay

    2018-12-07

  • a可

    column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色column-rule: 2px dotted green;


    查看全部
    0 采集 收起 来源：CSS3 列表边框column-rule

    2018-12-07

  • a可

    column-gap主要用来设置列与列之间的间距

    查看全部
    0 采集 收起 来源：CSS3 列间距column-gap

    2018-12-07

  • 慕标2166624

    动画--过渡属性 transition-property

    div {

      width: 200px;

      height: 200px;

      background: red;

      margin: 20px auto;

      -webkit-？: width;

      transition-property:all;

      -webkit-transition-duration:.5s;

      transition-duration:.5s;

      -webkit-transition-timing-function: ease-in;

      transition-timing-function: ease-in;

      -webkit-transition-delay: .18s;

      transition-delay:.18s;

    }

    div:hover{

      width: 400px;

      background: blue;

      height: 300px;

    }


    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡属性 transition-property

    2018-12-04

  • 宝慕林039392

    1.创建一个flex容器

    .flexcontainer{ display: flex; }

    2.Flex项目显示

    沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。

    3.Flex项目列显示

    .flexcontainer{ 

    display: flex; 

    flex-direction: column; }

    4.Flex项目移动到顶部

    如何将flex项目移动到顶部，取决于主轴的方向。如果它是垂直的方向通过align-items设置；如果它是水平的方向通过justify-content设置。

    .flexcontainer{ 

    flex-direction: column; 

    justify-content: flex-start; }

    .flexcontainer{ 

    display: flex; 

    flex-direction: row; 

    align-items: flex-start; }

    5.Flex项目移到左边
    flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。

    .flexcontainer{ 

    display: flex; 

    flex-direction: row; 

    justify-content: flex-start; }

    .flexcontainer{ 

     display: flex; 

    flex-direction: column; 

    align-items: flex-start; }

    6.Flex项目移动右边

    .flexcontainer{ 

    display: flex; 

    flex-direction: row; 

    justify-content: flex-end; }

    .flexcontainer{ 

    display: flex; 

    flex-direction: column;

    align-items: flex-end; }

    7.水平垂直居中

    在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。

    .flexcontainer{ 

    display: flex; 

    flex-direction: row; 

    align-items: center; 

    justify-content: center; }

    .flexcontainer{ 

    display: flex; 

    flex-direction: column;

    align-items: center; 

    justify-content: center; }

    8.Flex项目实现自动伸缩

    您可以定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值。

    .bigitem{flex:200; }  

    .smallitem{flex:100; }


    查看全部
    0 采集 收起 来源：CSS3 伸缩布局（一）

    2018-11-28

  • 宝慕林039392

    CSS3都有哪些强大功能:选择器、圆角效果、块投影与文字阴影、色彩（HSL,CMYK,HSLA,RGBA）、渐变效果、

    个性化字体、多背景图、边框背景图、变形处理、多懒布局、媒体查询


    查看全部
    0 采集 收起 来源：CSS3能做什么？

    2018-12-06

  • 宝慕林039392

    在Web中插入内容，CSS3的伪元素“::before”、“::after”来实现,其关键是依靠CSS3中的“content”属性来实现。

    不过这个属性对于img和input元素不起作用。

    在CSS中有一种清除浮动的方法“clearfix”。而这个“clearfix”方法中就使用了“content”，只不过是在这里插入了一个空格。

    .clearfix:before, .clearfix:after {content:””; display:table;}

    .clearfix:after {clear:both; overflow:hidden;}

    查看全部
    1 采集 收起 来源：CSS生成内容

    2018-12-06

  • 宝慕林039392

    responsive设计：根据用户的使用设备的当前宽度，你的web页面将加载一个备用的样式，实现特定的页面风格。

    1、流体网格：好处是使网格大小随时根据屏幕尺寸大小做出对应的比例缩放。

    2、弹性图片：因Media Queries不能改变图片的src属性值，但可以使用backgroung-image给元素使用背景图片，显示/隐藏父元素，给父元素使用不同的图片，然后通过Media Queries来控制这些图片的显示或隐藏。

    3、媒体查询：可根据设备的尺寸，查询出适配的样式。

    4、屏幕分辨率：Responsive设计利用Media Queries属性针对浏览器使用的分辨率来适配对应的CSS样式。Web页面要在哪种分辨率下显示何种效果，才能调用对应的样式。

    5、主要断点：简单叙述设备宽度的临界点。



    查看全部
    1 采集 收起 来源：Responsive设计（二）

    2018-11-28

  • 宝慕林039392 
    Media Queries能在不同的条件下使用不同的样式，
使页面在不同在终端设备下达到不同的渲染效果。

@media 媒体类型and （媒体特性）{你的样式}
    @media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

    Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀。

    查看全部
    1 采集 收起 来源：Media Queries使用方法

    2018-11-28

  • 宝慕林039392

    CSS3引入了一种新的布局模式——Flexbox布局【伸缩布局盒模型（Flexible Box）】用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。

    flex-direction来改变主轴方向修改为column，其默认值是row。

    如果它是垂直的方向通过align-items设置；

    如果它是水平的方向通过justify-content设置。

    查看全部
    0 采集 收起 来源：CSS3 伸缩布局（一）

    2018-11-28

  • 宝慕林039392

    box-sizing: content-box | border-box | inherit;

    content-box 默认值，其让元素维持W3C的标准盒模型;

    border-box 重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式）

    inherit 使元素继承父元素的盒模型模式

    查看全部
    1 采集 收起 来源：CSS3 盒子模型

    2018-11-27

  • a可

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


    @font-face {

        font-family: 'sansationregular';

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

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

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

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

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

        font-weight: normal;

        font-style: normal;

    }

    body {

    background-color:#edecec;

    }

    ul, li {

      list-style: none outside none;

    }

    /* basic menu styles */

    .nav-menu {

      display: block;

    background: #74adaa;

    width:951px;

    margin: 50px auto 150px;

    }

    .nav-menu > li {

      display: inline;

      float:left;

    border-right:1px solid #94c0be;

      position: relative;

    }

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

    }


    /* animation domination */

    .three-d {

      -webkit-perspective: 200px;

      -moz-perspective: 200px;

      -ms-perspective: 200px;

      -o-perspective: 200px;

      perspective: 200px;

      -webkit-transition: all .07s linear;

      -moz-transition: all .07s linear;

      -ms-transition: all .07s linear;

      -o-transition: all .07s linear;

      transition: all .07s linear;

      position: relative;

    }


    .three-d:not(.active):hover {

      cursor: pointer;

    }


    .three-d:not(.active):hover .three-d-box, 

    .three-d:not(.active):focus .three-d-box {

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

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

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

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

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

    }


    .three-d-box {

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

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

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

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

      transition: all .3s ease-out;

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

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

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

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

      transform: translatez(-25px);

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

    }


    .front {

      -webkit-transform: rotatex(0deg) translatez(25px);

      -moz-transform: rotatex(0deg) translatez(25px);

      -ms-transform: rotatex(0deg) translatez(25px);

      -o-transform: rotatex(0deg) translatez(25px);

      transform: rotatex(0deg) translatez(25px);

    }


    .back {

      -webkit-transform: rotatex(-90deg) translatez(25px);

      -moz-transform: rotatex(-90deg) translatez(25px);

      -ms-transform: rotatex(-90deg) translatez(25px);

      -o-transform: rotatex(-90deg) translatez(25px);

      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;

      -webkit-background-size: 5px 5px;

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

    }

    .nav-menu ul {

      position: absolute;

      left: -40px;

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

    }


    查看全部
    0 采集 收起 来源：制作3D旋转导航综合练习题

    2018-11-27

  • 宝慕林039392

    多列布局模块 

    columns: 200px 2;


    查看全部
    0 采集 收起 来源：CSS3 多列布局——Columns

    2018-11-27

首页上一页69707172737475下一页尾页

举报

0/150
提交
取消
开始学习
课程须知
1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。
老师告诉你能学到什么？
1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果

微信扫码，参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示：

您好，此课程属于迁移课程，您已购买该课程，无需重复购买，感谢您对慕课网的支持！

查看已购买的课程