css3的属性

过渡

弹性效果
//当在div悬停时 span发生改变
div: hover span{
     //上边不发生改变 左右增加20px
    margin:0 20px;
}

div span{
            height: 50px;
            width: 40px;
            font-size: 30px;
            text-align: center;
           /*第一种写法(缩写)*/
            transition: margin 2s;
           /*第二种写法*/
            /*transition-property: margin;*/
            /*transition-duration: 2s;*/

        }

• 指明元素

/*被悬停的是ul ul中的li*/
ul:hover li{
}
/*被悬停的那个li*/
ul li:hover{
}

• 过渡的使用方法
  1.修改相应属性
  2.再回头给该元素添加过渡

2D转换

• 方法
  1. rotate（）
  2. translate()
  3. scale()

方法实用注意点在注释里面
       /*加不加ul都没有问题*/
        ul li:nth-of-type(2){
            transform:rotate(45deg);
        }
        ul li:nth-of-type(3){
            /*第一个参数是水平方向
              第二个参数是垂直方向
            */
            transform: translate(100px,0);
        }
        ul li:nth-of-type(4){
            /*第一个参数是水平方向
              第二个参数是垂直方向
              注意点：
              两个参数一样可缩写为一个，大于1放大，小于1缩小
            */
            transform: scale(0.5,1);
        }

        ul li:nth-of-type(5){
            /*1。如果同时写两个方法则用空格隔开
              2。如果发生旋转则参考系发生旋转，再平移就不是水平平移而是相对平移*/
            transform: rotate(30deg) translate(100px,0);
        }

• 三种属性会层叠如：

/*rotate的方法不会显示,因为被层叠掉了*/
transform: rotate(45deg);
transform: scale(0.5);

• 形变中心点
  • 默认旋转的中心点是盒子的中心如果需要改变

/*参数有三种形式
   下面都表示左上角*/
transform-origin:0px 0px;
transform-origin:0% 0%;
transform-origin:left left;

• 旋转轴向
  • 可以围绕x y z三种轴进行旋转

transform:rotateX(45deg);
transform:rotateY(45deg);
transform:rotateZ(45deg);

• perspective 属性
  • 近大远小
  • 值越大越不明显
• 盒子阴影和文字阴影
  • 盒子阴影

/*依次为：水平 垂直 模糊度 阴影扩展 阴影颜色 内外阴影（默认为外阴影）
   注意：1.阴影扩展是在原来的阴影的上下左右进行扩展
        2.默认的颜色是盒子内部文字的颜色确定的
*/
box-shadow:h-shadow v-shaow blur spread color inset;

• 文字阴影

/*只有四个参数*/
text-shadow:h-shadow v-shaow blur  color ;

动画

• 动画和过渡的相同点
  • 过渡和动画都是给元素添加动画的
  • 过渡和动画都是系统新增的一些元素
  • 过渡和动画都需要满足三要素

        div{
            width: 100px;
            height: 100px;
            background-color: pink;
          /*1.要执行的动画的名称*/
            animation-name: xxx;
          /*3.动画执行时长*/
            animation-duration: 3s;
        }
        /*2.创建一个叫xxx的动画*/
        @keyframes xxx {
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }
        }

• 动画的一些其他的属性

            animation-name: xxx;
            animation-duration: 3s;
            /*动画执行的延迟时间*/
            animation-delay: 2s;
            /*执行时是以怎么的函数进行运动*/
            animation-timing-function: linear;
            /*执行的次数*/
            animation-iteration-count:3;
            /*执行的形式
            1。normal 执行结束后又从起始点开始，默认
            2。alternate 执行结束后以终点为起点返回*/
            animation-direction: alternate;
            /*告诉系统动画是运动还是暂停
            running
            paused*/
            animation-play-state: running;

• 另外一种创建动画的方式

       div{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 0;
            animation-name: xxx;
            animation-duration: 3s;
        }
        @keyframes xxx {
            0%{
                left: 0px;
                top:0;
            }
            25%{
                left: 300px;
                top: 0;
            }
            50%{
                left: 300px;
                top: 300px;
            }
            75%{
                left: 0;
                top: 300px;
            }
            100%{
                left: 0;
                top:0;
            }
        }

• 动画可以分为三种状态
  • 等待状态
  • 执行状态
  • 结束状态

/*1.backwards：决定动画等待状态的时候是否显示第一帧
  2.afterwards：决定动画节俗状态的时候是否保持最后一帧
  3.none：默认
  4.both*/
animation-fill-mode:backwards;

• 动画的连写

div
{
/*animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;*/

/*简写的话只写名字和执行时间就好了*/
animation:myfirst 5s linear 2s infinite alternate running;

3D

• 让元素呈现3d效果
  • 需要在其父元素添加（跟perspective相似）

 transform-style: preserve-3d;

• 如果要得到长方体，直接通过scale让正方体拉伸一下就可以了

背景尺寸属性

• 设置背景图片的尺寸 background-size

/*分别是
  1.用像素指明宽高
  2.用百分比指明宽高
  3.等比拉伸至覆盖
  3.等比拉伸至图像完全显示*/
background-size: length|percentage|cover|contain;

background-size: 100px 100px;
background-size: 100%   100%;
background-size: cover;
background-size: contain;

• 相对于内容框来定位背景图像 background-origin

background-origin: padding-box(默认)|border-box|content-box;

• 规定背景的绘制区域 background-clip 属性

background-clip: border-box|padding-box|content-box;

• 多重背景
  • 现天价的背景图片会盖住后添加的背景图片

/*也可以在里面添加其他的属性如：no-repeat left top*/
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
background-repeat:no-repeat,no-repeat;
background-size:50px 50px, 50px 50px;
background-position: 50px 150px, 500px 50px;

css的书写格式

• 行内样式: 可以将样式直接写在标签当中

<div style="color: red"> </div>

• 内嵌样式
• 外链样式
  • 通过link标签将css代码和html相关联起来

<link rel="stylesheet" href=" ">

• 导入样式

<style>
@import"xxx.css";
</style>

• 一般都使用外链样式 导入样式是css2.1的 所以有兼容问题 而且倒入样式先布置结构开始的界面会很丑