1 CSS3 选择器

1.1 基本选择器

1.2 层级

  • 空格

  • >

  • + .item+li

  • ~ .item~p

1.3 属性选择器

  • [attr]

  • [attr=value]

  • [attr^=value]

  • [attr$=value]

  • [attr*=value]

  • [][][]

1.4 伪类选择器

  • :link

  • :visited

  • :hover

  • :active

  • :focus

  • :first-child .list li:first-child

  • :last-child

  • :nth-child() 从1开始 odd even

  • :nth-last-child() 从1开始

  • :only-child li:only-child

  • :first-of-type

  • :last-of-type

  • nth-of-type()

  • nth-last-of-type()

  • only-of-type

  1. <ul>
        <li></li>
        <li></li>
        <p></p>
        <li>li:nth-of-type(3) </li>
        <li></li>
        <li></li>
    </ul>
    ​
    li:nth-of-type(3)   #选择到
    li:nth-child(3)   #没有满足条件的元素

1.5 伪元素选择器

  • ::before .item::before

  • ::after .clearfix::after {content:''; display:block; clear:both}

  1. <div class="nav clearfix"> 
        子元素浮动
        [::after 此处是伪元素创建的]
    </div>
    ​
    ​
    <div class="banner">
    </div>

  • ::first-letter

  • ::first-line

  • ::selection

  • ::placeholder ::placeholder {color:red} <input placeholder="请输入用户名">

2 CSS3 基础

2.1 新增颜色单位

  • rgba() 不透明0~1

2.2 新增长度单位

  • rem

  • vw

  • vh

3 新增的CSS3属性

3.1 边框圆角

  1. border-radius 长度单位
    border-top-left-radius
    border-top-righ-radius
    border-bottom-left-radius
    border-bottom-right-radius

3.2 布局

  1. display: 值很多很多 .... table table-row...
    box-sizing: content-box（默认值） / border-box

3.3 外轮廓

  1. outline:1px solid #ccc
    outline-style
    outline-color
    outline-width

3.4 不透明度

  1. opacity: 0~1

3.5 阴影

  1. box-shadow:水平偏移 垂直偏移;   偏移可以负值
    box-shadow:水平偏移 垂直偏移 颜色;
    box-shadow:水平偏移 垂直偏移 模糊值 颜色; /*最常见的*/
    box-shadow:水平偏移 垂直偏移 模糊值 外延值 颜色;
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>盒子阴影</title>
  6.      <style>
  7.          .item {
  8.              display: inline-block;
  9.              margin:20px;
  10.              width: 100px;
  11.              height: 100px;
  12.              border: 1px solid #999;
  13.          }
  14.  
  15.          .item01 {
  16.              box-shadow: 10px 10px;
  17.          }
  18.          .item02 {
  19.              box-shadow: 3px 3px #ccc;
  20.          }
  21.          .item03 {
  22.              /*大部分 需要设置这几个值*/
  23.              box-shadow: 10px 10px 10px #ccc;
  24.          }
  25.          .item04 {
  26.              /*外延值*/
  27.              box-shadow: 0px 0px 0px 120px #ccc;
  28.          }
  29.  
  30.          .item05 {
  31.              /*多重阴影*/
  32.              box-shadow: 0px 0px 3px 5px red,
  33.                          0px 0px 3px 10px orange,
  34.                          0px 0px 3px 15px yellow,
  35.                          0px 0px 3px 20px green,
  36.                          0px 0px 3px 25px cyan,
  37.                          0px 0px 3px 30px blue,
  38.                          0px 0px 3px 35px purple;
  39.          }
  40.      </style>
  41.  </head>
  42.  <body>
  43.      <h1>阴影</h1>
  44.      <hr>
  45.  
  46.      <div class="item item01">01</div>
  47.      <div class="item item02">02</div>
  48.      <div class="item item03">03</div>
  49.      <div class="item item04">04</div>
  50.      <div class="item item05">05</div>
  51.      <div class="item item06">06</div>
  52.  
  53.      <hr>
  54.  
  55.  </body>
  56.  </html>

阴影

  1.  

3.5 背景

  1. background-size: cover / contain / 400px 300px / 100% 100%
    background: color image postion/size repeat attachment
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>背景</title>
  6.      <style>
  7.          .item {
  8.              /*display: block;*/
  9.              width: 300px;
  10.              height: 300px;
  11.              border: 1px solid #ccc;
  12.              background: url("./images/meinv02.jpg") no-repeat;
  13.  
  14.              /*设置背景图片的尺寸*/
  15.              /*background-size: cover; 优先 铺满元素。 多余的图片裁掉 保证原图比例*/
  16.              /*background-size: contain; 优先 保证图片显示完整，可能元素不能铺满。 保证原图比例*/
  17.  
  18.              /*background-size:100px 200px;指定背景大小*/
  19.              /*background-size:100% 100%;*/
  20.  
  21.              /*background: url('./images/meinv02.jpg') 10px 20px/cover;*/
  22.          }
  23.      </style>
  24.  </head>
  25.  <body>
  26.      <div class="item">
  27.  
  28.      </div>
  29.  </body>
  30.  </html>

背景

3.6 CSS3变换

  • transform

    1. translatex() 
      translatey()
      translate(x, y)
      rotate() 角度 deg
      skewx()  角度deg
      skewy()
      skew(x, y)

  • transform-origin 变换的原点。 对translate没有意义。 对rotate影响大

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>变换</title>
  6.      <style>
  7.          .box {
  8.              display: inline-block;
  9.              margin: 30px;
  10.              width: 100px;
  11.              height: 100px;
  12.              border:2px dashed orange;
  13.  
  14.              vertical-align: middle;
  15.          }
  16.          .item {
  17.              border: 1px solid #999;
  18.              background: #ccc;
  19.              height:99px;
  20.          }
  21.  
  22.          .item01 {
  23.              /*位移 移动*/
  24.              transform: translate(20px, 20px);
  25.              /*transform: translatex(10px) translatey(10px);*/
  26.              /*transform: translatey(10px);*/
  27.          }
  28.  
  29.          .item02 {
  30.              /*旋转 deg角度  0~360deg*/
  31.              transform: rotate(60deg)
  32.          }
  33.  
  34.          .item03 {
  35.              /*扭曲*/
  36.              transform: skewx(60deg) skewy(60deg);
  37.          }
  38.  
  39.          .content {
  40.              margin: 30px;
  41.              width: 100px;
  42.              height: 100px;
  43.              border: 1px solid #999;
  44.              transform: rotate(60deg);
  45.              transform-origin: left top;/*transform-origin 变换的原点*/
  46.          }
  47.      </style>
  48.  </head>
  49.  <body>
  50.  
  51.      <div class="box">
  52.          <div class="item item01"></div>
  53.      </div>
  54.  
  55.          <div class="box">
  56.          <div class="item item02">HELLO</div>
  57.      </div>
  58.  
  59.          <div class="box">
  60.          <div class="item item03">HELLO</div>
  61.      </div>
  62.  
  63.      <hr>
  64.  
  65.      <div class="content">
  66.          HELLO
  67.      </div>
  68.  
  69.  </body>
  70.  </html>

变换

3.7 过渡效果

哪些CSS属性可以过渡

  1. 长度 (padding margin width height  left/top/right/bottom border-width  background-position ...)
    颜色
    变换
    纯数字 (opacity、z-index)
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>CSS3过渡</title>
  6.      <style>
  7.          .box {
  8.              width: 100px;
  9.              height: 100px;
  10.              background: red;
  11.              /*display: block;*/
  12.              /*visibility: visible;*/
  13.  
  14.              border:10px solid purple;
  15.  
  16.              /*过渡*/
  17.              /* transition:3s; */
  18.              transition-property: width,height;
  19.              transition-duration: 5s;
  20.              transition-timing-function: ease;
  21.              transition-delay:3s;
  22.  
  23.              transition: all ease 3s 1s;
  24.              transition: 4s;
  25.              transition: all 4s;
  26.  
  27.          }
  28.          .box:hover {
  29.              /*display: none;*/
  30.              /*visibility: hidden;*/
  31.              width: 200px;
  32.              height: 200px;
  33.              background: green;
  34.  
  35.              border:20px dashed purple;
  36.  
  37.          }
  38.      </style>
  39.  </head>
  40.  <body>
  41.      <h1>transition</h1>
  42.      <hr>
  43.      <div class="box">
  44.  
  45.      </div>
  46.  
  47.      <hr>
  48.  
  49.      <p>
  50.          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolore veritatis, ducimus maxime fugiat unde inventore aspernatur mollitia dolor doloribus facere eum libero repudiandae, quisquam, deserunt facilis magni error! Vero.
  51.      </p>
  52.  </body>
  53.  </html>

过渡

  1.  

触发过渡

  1. 伪类触发  :hover  :focus  ....
    媒体查询   @media
    JS
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>过渡实例</title>
  6.      <style>
  7.          .item {
  8.              display: inline-block;
  9.              width: 100px;
  10.              height: 100px;
  11.              border: 1px solid #ccc;
  12.              text-align: center;
  13.              line-height: 100px;
  14.              border-radius: 50px;
  15.              font-size:30px;
  16.              cursor:pointer;
  17.              color:#f66700;
  18.  
  19.              /*过渡*/
  20.              transition: transform 1s;
  21.          }
  22.  
  23.          .item:hover {
  24.              transform: rotate(360deg)
  25.          }
  26.      </style>
  27.  </head>
  28.  <body>
  29.      <h1>同志</h1>
  30.      <hr>
  31.  
  32.      <div class="list">
  33.          <div class="item">1</div>
  34.          <div class="item">2</div>
  35.          <div class="item">3</div>
  36.          <div class="item">4</div>
  37.          <div class="item">5</div>
  38.          <div class="item">6</div>
  39.          <div class="item">7</div>
  40.          <div class="item">8</div>
  41.      </div>
  42.  </body>
  43.  </html>

过渡实例

  1.  

相关属性

  1. transition-property  指定要过渡的属性 用,隔开。默认是 all
    transition-duration  过渡持续时间
    transition-timing-function  过渡线性效果  默认 ease
    transition-delay   过渡延迟
    transition：property timing-function duration delay
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>纯CSS实现下拉菜单</title>
  6.      <style>
  7.          * {
  8.              padding: 0;
  9.              margin: 0;
  10.          }
  11.          body {
  12.              font:14px "Microsoft YaHei",sans-serif;
  13.          }
  14.          ul {
  15.              list-style: none;
  16.          }
  17.          .container {
  18.              margin: 0 auto;
  19.              width: 1000px;
  20.          }
  21.  
  22.          .nav {
  23.              /*margin-top: 60px;*/
  24.              width: 100%;
  25.              height: 40px;
  26.              line-height: 40px;
  27.              background: #333;
  28.          }
  29.  
  30.          /*一级菜单*/ /*该选择器会选择 所有li*/
  31.          .nav li {
  32.              float: left;
  33.              position: relative;
  34.          }
  35.  
  36.          /*一级菜单*/
  37.          .nav li a {
  38.              display: block;
  39.              width: 100px;
  40.              text-align: center;
  41.              color: #fff;
  42.              text-decoration: none;
  43.          }
  44.  
  45.          /*二级菜单*/
  46.          .nav li ul li a {
  47.              color: #333;
  48.          }
  49.          .nav li ul li {
  50.              /*覆盖前面设置  */
  51.              float: none;
  52.          }
  53.          .nav li ul {
  54.              /*border: 1px solid #ccc;
  55.              border-top: none;*/
  56.              background: #fff;
  57.              /*二级菜单先隐藏*/
  58.              /*display: none;
  59.  */
  60.              /*绝对定位*/
  61.              position: absolute;
  62.              left:0;
  63.              top:;
  64.  
  65.              overflow: hidden;
  66.              height: 0px;
  67.  
  68.              /*过渡*/
  69.              transition: height .5s;
  70.          }
  71.  
  72.          /*划过那个li 哪个li就变红*/
  73.          .nav li:hover {
  74.              background: red;
  75.          }
  76.          .nav li:hover ul{
  77.          /*    display: block;*/
  78.              height: 160px;
  79.          }
  80.  
  81.          /*设置banner*/
  82.          .banner img {
  83.              width: 100%;
  84.          }
  85.      </style>
  86.  </head>
  87.  <body>
  88.  
  89.      <div class="nav">
  90.          <div class="container">
  91.              <ul>
  92.                  <li><a href="#">首页</a></li>
  93.                  <li>
  94.                      <a href="#">博客</a>
  95.                      <ul>
  96.                          <li><a href="#">同志博客</a></li>
  97.                          <li><a href="#">小同志博客</a></li>
  98.                          <li><a href="#">老同志博客</a></li>
  99.                          <li><a href="#">大同志博客</a></li>
  100.                      </ul>
  101.                  </li>
  102.                  <li>
  103.                      <a href="#">论坛</a>
  104.                      <ul>
  105.                          <li><a href="#">同志论坛</a></li>
  106.                          <li><a href="#">红色论坛</a></li>
  107.                          <li><a href="#">黄色论坛</a></li>
  108.                          <li><a href="#">绿色论坛</a></li>
  109.                      </ul>
  110.                  </li>
  111.                  <li><a href="#">关于我们</a></li>
  112.                  <li>
  113.                      <a href="#">举报我们</a>
  114.                      <ul>
  115.                          <li><a href="#">涉黄</a></li>
  116.                          <li><a href="#">涉黑</a></li>
  117.                          <li><a href="#">涉赌</a></li>
  118.                          <li><a href="#">涉毒</a></li>
  119.                      </ul>
  120.                  </li>
  121.              </ul>
  122.          </div>
  123.      </div>
  124.  
  125.      <div class="banner">
  126.          <img src="../../dist/images_one/meinv02.jpg" alt="">
  127.      </div>
  128.  </body>
  129.  </html>

导航-下拉菜单

3.8 CSS3动画

关键帧

  1. @keyframes 动画名字 {
        0% {
            
        }
        20% {
            
        }
        40% {
            
        }
        100% {
            
        }
    }

相关CSS属性

  1. animation-name  指定动画的名字
    animation-duration  动画的执行时间
    animation-timing-function  执行效果速度  
    animation-delay   延迟
    animation-iteration-count   循环 次数  infinite(无限)
    animation-direction:  alternate （正向 反向 交替）\ reverse（反向）
    animation-play-state: running / paused
    animation 复合属性
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>CSS3动画</title>
  6.      <style>
  7.  
  8.          /*关键帧的语法*/
  9.          @keyframes myanimate{
  10.              from {
  11.                  background: red;
  12.                  width:200px;
  13.              }
  14.  
  15.              50% {
  16.                  width:400px;
  17.              }
  18.  
  19.              to {
  20.                  background: green;
  21.                  width:600px;
  22.              }
  23.          }
  24.  
  25.          .box {
  26.              width: 200px;
  27.              height: 200px;
  28.              border: 2px dashed orange;
  29.  
  30.              animation-name: myanimate;
  31.              animation-duration: 1s; /*动画持续时间*/
  32.              animation-timing-function: linear;
  33.              animation-delay: 0s;
  34.              animation-iteration-count: infinite; /*无限循环*/
  35.              animation-direction: alternate; /*多次循环的时候，一次正向动画，一次反向动画*/
  36.  
  37.              animation-play-state: paused;
  38.  
  39.              animation: myanimate 2s linear 2 alternate;
  40.          }
  41.  
  42.          .box:hover {
  43.              animation-play-state: running;
  44.          }
  45.      </style>
  46.  </head>
  47.  <body>
  48.  
  49.      <div class="box"></div>
  50.  
  51.  </body>
  52.  </html>

css3动画

css3 变换、过渡效果、动画的更多相关文章

  1. CSS3:变换和动画

    <html> <style> .container{ -webkit-perspective: 800; -webkit-perspective-origin: 50% 40% ...

  2. css3 3D变换和动画

    3D变换和动画 建立3D空间,transform-style: preserve-3d perspective: 100px; 景深 perspective-origin:center center ...

  3. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  4. CSS3中的动画

    CSS3中的动画包括两种: Transition(过渡) Animation(动画) 这两种方法都可以让元素动起来,功能类似,但是稍有区别: Transition只定义某一个元素的开始状态和结束状态 ...

  5. CCS3的过渡、变换、动画以及响应式布局、弹性布局

    CSS3 过渡 .变换.动画 在没有CSS3之前,如果页面上需要一些动画效果,要么你自己编写 JavaScript,要么使用 JavaScript 框架(如 jQuery)来提高效率. 但是CSS3出 ...

  6. IT兄弟连 HTML5教程 CSS3属性特效 动画-animation

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通 ...

  7. CSS3中的动画功能（一）

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  8. 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  9. css变换与动画详解

    举个栗子:--------元素整体居中.box{     position:absolute;top:50%;left:50%;    width:50px;    height:50px;    t ...

随机推荐

  1. CodeForces960F：Pathwalks （主席树+DP）

    You are given a directed graph with n nodes and m edges, with all edges having a certain weight. The ...

  2. LiveCD、LiveDVD和BinDVD区别在哪里

    本文转载自: http://www.kankanews.com/ICkengine/archives/86968.shtml 1.CentOS系统镜像有两个,安装系统只用到第一个镜像即CentOS-6 ...

  3. bzoj4004

    线性基 构成线性基的个数是定的,所以我们对价值进行贪心就行了,根据拟阵那套理论,我们排个序,然后能塞进去就塞,这样就求出最小值了. 思维江化,只要是多维向量都能用线性基搞. #include<b ...

  4. java枚举类Enum方法简介(valueof,value,ordinal)

    Enum作为Sun全新引进的一个关键字,看起来很象是特殊的class,   它也可以有自己的变量,可以定义自己的方法,可以实现一个或者多个接口.   当我们在声明一个enum类型时,我们应该注意到en ...

  5. HDOJ-2034

    人见人爱A-B Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  6. visual editor ve1.5下载

    eclipse官网的ve下载不了,下面这个能下 http://sourceforge.net/projects/visualeditor/files/latest/download

  7. C#高级参数out,ref,params

    在C#中通过使用方法来获取返回值时,通常只能得到一个返回值.因此,当一个方法需要返回多个值的时候,就需要用到ref和out,那么这两个方法区别在哪儿呢? out 当需要返回一系列返回值时可用out高级 ...

  8. 快速打开和关闭SQL服务

    将下面文本复制到txt中,然后将文本文件另存为bat @echo off for /f "skip=3 tokens=4" %%i in ('sc query MSSQLSERVE ...

  9. HDU2604【矩阵快速幂】

    思路: 把fm看成01,f-1,m-0: 不能存在101,111; dp[i]代表第i结尾的方案数: ①:结尾是0一定行:只要i-1序列里添个0就好了,dp[i]+=dp[i-1]: ②:结尾是1   ...

  10. SpringBoot2.0基础案例(01)：环境搭建和RestFul风格接口

    一.SpringBoot 框架的特点 1.SpringBoot2.0 特点 1)SpringBoot继承了Spring优秀的基因,上手难度小 2)简化配置,提供各种默认配置来简化项目配置 3)内嵌式容 ...