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

十天精通CSS3

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

    Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

    在这里，我们为奇数和偶数 p 元素指定两种不同的背景色，从最后一个子元素开始计数：

    p:nth-last-child(odd){background:#ff0000;}
p:nth-last-child(even){background:#0000ff;}


    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—nth-child(n)

    2019-04-04

  • _晴不知所起一往而深_

    连背景颜色也会裁剪

    查看全部
    0 采集 收起 来源：CSS3背景 background-clip

    2019-04-02

  • 薄荷青年

    <!DOCTYPE html>

    <html>

    <head> 

    <meta charset="utf-8">

    <title>结构性伪类选择器—root</title>

    <link href="style.css" rel="stylesheet" type="text/css">


    <style>

        :root{

            background:yellow;

        }

    </style>


    </head> 

    <body>

    <div>Root选择器修改HTML元素的背景颜色</div>

    </body>

    </html>


    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—root

    2019-03-27

  • qq_慕用2213857

    only-of-type选择器


    一个父元素有多个或一个类型的子元素，其中某一个同类型的子元素数量只有一个就会被选中。


    例如：


    <div class="wrapper">

      <p>我是一个段落</p>

      <p>我是一个段落</p>

      <p>我是一个段落</p>

      <div>我是一个Div元素</div>

    </div>

    <div class="wrapper">

      <div>我是一个Div</div>

      <ul>

        <li>我是一个列表项</li>

      </ul>

      <p>我是一个段落</p>

    </div>



    .wrapper > div:only-of-type {

      background: orange;

    }


    第一个类名为wrapper的盒子和第二个类名为wrapper的盒子都有子集div而且数量都只有一个，所以会被选中被改变背景颜色为橙色


    查看全部
    1 采集 收起 来源：CSS3 only-of-type选择器

    2019-03-27

  • qq_慕用2213857

    only-child的意思就是父元素中只有一个同类型子元素，而且这个子元素的数量只有一个，这样就比较好理解了。


    <div class="post">

      <p>我是一个段落</p>

      <p>我是一个段落</p>

    </div>

    <div class="post">

      <p>我是一个段落</p>

    </div>


    .post p:only-child {

      background: orange;

    }


    代码会改变第二个盒子p标签的背景颜色。

    因为第一个虽然只有一个类型的子元素但是数量有两个，所以不行。

    第二个盒子只有一个类型子元素而且数量只有一个，所以可以改变。

    查看全部
    1 采集 收起 来源：CSS3 only-child选择器

    2019-03-27

  • 慕莱坞0249791

    在Responsive布局中，可以毫无保留的丢弃：

    第一， 尽量少用无关紧要的div；

    第二，不要使用内联元素（inline）；

    第三，尽量少用JS或flash；

    第四，丢弃没用的绝对定位和浮动样式；

    第五，摒弃任何冗余结构和不使用100%设置。

    有舍才有得，丢弃了一些对Responsive有影响的东东，那么有哪些东东能帮助Responsive确定更好的布局呢？

    第一，使用HTML5 Doctype和相关指南；

    第二，重置好你的样式（reset.css）；

    第三，一个简单的有语义的核心布局；

    第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素。


    查看全部
    0 采集 收起 来源：Responsive布局技巧

    2019-03-27

  • 慕莱坞0249791

    transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的CSS属性主要有：

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

    2019-03-26

  • 慕莱坞0249791

    matrix() 6个属性的意思的：第一个宽度比例1就是原大小，       第二个是上下倾斜1就是2倍，2就是3倍，0就是不倾斜       第三个是左右倾斜，数字和第二个一样的意思，       第四个是高度比例1就是原大小，      第五个是X方向的像素位移，X方向就是左右，       第六个是Y方向的像素位移，X方向就是上下

    查看全部
    0 采集 收起 来源：CSS3中的变形--矩阵 matrix()

    2019-03-26

  • qq_CY霏_0

    <div data-line="1"></div>    

    div[data-line]:after { content: attr(data-line);/* 属性名称上不要加引号！ */ }

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

    2019-03-26

  • qq_CY霏_0

    常见三种媒体类型：Screen（电脑显示器）、All（所有设备）、Print(打印预览)

    查看全部
    0 采集 收起 来源：Media Queries——媒体类型（一）

    2019-03-26

  • qq_CY霏_0

    column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。

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

    2019-03-26

  • qq_CY霏_0

    <!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 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旋转导航综合练习题

    2019-03-25

  • qq_CY霏_0

    animation-direction: normal/alternate

    normal:默认值 每次循环向前播放

    alternate: 在第偶数次向前播放，第奇数次反方向播放


    查看全部
    0 采集 收起 来源：CSS3中设置动画播放方向

    2019-03-25

  • 慕莱坞0249791 
    background-origin ： border-box | padding-box | content-box;


    查看全部
    0 采集 收起 来源：CSS3背景 background-origin

    2019-03-25

  • qq_CY霏_0

    5344f1320001481905640812.jpgease由快到慢 linear恒速 ease-in加速  ease-out减速 ease-in-out先加速再减速

    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡函数 transition-timing-function

    2019-03-25

首页上一页56575859606162下一页尾页

举报

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

微信扫码，参与3人拼团

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

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

查看已购买的课程