CSS3详解

1. 样式操作

背景操作

div{
    /* 设置背景图片的相关属性操作 */
    background: url("1.jpg") no-repeat; 
    /* 设置图片从哪里开始显示 */
    /* background-origin: padding-box; 图片从内边距左上角开始显示 */
    /* background-origin: border-box ; 图片从边框左上角底下开始显示的 */
    /* background-origin: content-box; 图片从内容位置开始显示 */

    /* background-clip: padding-box; 图片在内边距里面开始显示 */
    /* background-clip: border-box; 图片在边框里面开始显示 */
    /* background-clip: content-box; 图片在文本开始显示 */

    /* background-size: cover; 按照自己的缩放比例显示,不确定是否铺满的 */
    /* background-size: contain; 按照比例缩放,完整的显示的 */
}

边框圆角及阴影

div{
    width: 300px;
    height: 200px;
    background-color: red;
    /* 设置四个角的角度 */
    /* border-radius: 50px; 四个角的值 */
    /* border-radius: 10px 30px ; 左上和右下是10 左下和忧伤是30px */
    /* 尝试三个值是哪几个角 */ 
    /* 第一个是左上 第二个是右上和左下 第三个是右下*/

     box-shadow: 10px 20px 5px blue;
     /* 第一个是水平方向的值 第二个是竖直方向 第三个是模糊度 还可以设置阴影的内外(inset是阴影的内部,很少用) */
}

边框的图片设置

div{
    width: 300px;
    height: 200px;
    border: 20px solid red;
    /* 设置边框显示图片的属性 */
    border-image-source: url("1.png");
    /* 切割图片 */
    border-image-slice: 20; /*切割的像素 */
    border-image-repeat: round; /*stretch 拉伸, repeat 平铺,round 铺满 */
    
}

文本的修饰

div{
    width: 300px;
    height: 200px;
    text-align: center;
    padding-top: 20px;
    font-size: 30px;
    font-family: "全新硬笔行书简";                
    /* 阴影，水平，竖直，模糊度，颜色 */
    text-shadow: 5px 5px 5px red;
}

属性选择器

• p~ul 选择p后面的所有ul，但是是在div中的
• a[href^="p"] 找a标签中具有href属性，并且属性值是以p开头的a标签 区分大小写
• a[href$="p"] 找a标签中具有href属性，并且属性值是以p结尾的a标签 区分大小写
• a[href*="p"] 找a标签中具有href属性，并且属性值包含l的a标签 区分大小写

2. 选择器

其他选择器

/* 目标选择器 可用于选取当前活动的目标元素。*/
p:target{

}

/* 选中选择器  	选择被用户选取的元素部分*/
p::selection{

} 

/* 设置首字母或者第一个文字的样式 */
p:first-letter{

}

/* 设置第一行的文字样式 */
p :first-line{

}

结构伪类选择器

/* 所有li第一个 */
li:first-child{

}
/* 最后一个li */
li:last-child{

}

/* 第三个li */
li:nth-child(3){

}

/* 从后向前数第五个li  */
 li:nth-last-child(5)  {

 }

 /* 奇数 even 偶数*/
 li:nth-child(add){
     /* 注意索引就有变化了 */
 }

3. 颜色渐变

线性渐变

p{
    /* 线性渐变 */
    /* 方向，开始渐变的颜色，结束的渐变的颜色 */
    background-image: linear-gradient(0,yellow,green);
    background-image: linear-gradient(to right,yellow,green);
    background-image: linear-gradient(90deg,yellow,green);
    background-image: linear-gradient(
        to right，
        red 20%,
        green 40%,
        blue 60%,
        pink 80%
    ); 
    /* 一个颜色分段的样式 */
    background-image: linear-gradient(
        to right，
        red 20%,
        green 20%,
        green 40%,
        blue 40%,
        blue 60%,
        pink 60%,
        pink 80%
    ); 
}

径向渐变

/* 径向渐变 */
.cls{
/* 半径，坐标（位置），开始渐变的颜色，结束的渐变颜色 */
    background-image: radial-gradient(
      /* 100px at center,red,green */
      /* 100px at 10px 150px,red,green  */
      100px at center,
      red 10%,
      green 10%,
      green 20%,
      yellow 20%,
      yellow 30%,
      pink 30%,
      pink 40%,
      blue 40%
);
}

4. 2D与3D转换

2D转换

.box:hover .cls{
    /* 横向偏移，是相对与原来的位置，正的向右，负向左 */
     transform:translate(100px);
     /* 第一个是横，第二个是纵 */
     transform: translate(100px,100px);
     /* 旋转 */
     transform: rotate(60deg);
     /* 缩小和放大 数值是倍数，第一个是宽，第二个是高*/
     transform: scale(2,2);
     /* 倾斜 第一个沿着x轴，第二个沿着y轴*/
     transform: skew(30deg,30deg);
}
 

3D转换

.box{
    /* 3D效果必须要有透视 */
    perspective: 1000px; /* 透视效果  */
}

.cls{
    transform-style: preserve-3d; /* 平面转立体的效果 */
}

.box:hover .cls{
    transform: translateX(100px); /* 沿着x轴位移 */
    transform: translateY(100px); /* 沿着y轴位移 */
    transform: translateZ(100px); /* 沿着z轴位移 */
    /* 旋转 */
    transform: translateX(100px); /* 沿着x轴位移 笔记本关闭的感觉*/
    transform: translateY(100px); /* 沿着y轴位移 翻书的感觉*/
    transform: translateZ(100px); /* 沿着z轴位移 */
    /* 缩放 */
    transform: scaleX(2);
    transform: scaleY(2);
    transform: scaleZ(2);
    /* 倾斜 没有Y轴*/
    transform: skewX(30deg);
    transform: skewY(30deg);
}

3D与2D就是一个xyz轴的区别

5. 动画操作

过渡

过渡就是动画开始到动画结束的中间过程。可以在父级元素中写，也可以用：hover这种方式写，都是有效果的

属性	描述	值
transition	简写属性，用于在一个属性中设置四个过度属性
transition-property	规定应用过度的css属性名称
transition-duration	定义过度效果花费的时间，默认是0
transition-timing-function	规定过渡的时间曲线，默认是“ease”.	linear,ease,ease-in,ease-out,ease-in-out,cubiz-bezier(n,n,n,n)
transition-delay	规定过渡效果何时开始，默认是0.

.cls{
     /* 简写的方式 */
     /* all：代表的是所有的属性 3s完成动画，ease不匀速，2s代表延迟*/
     transition: all 3s ease 2s ;
}

动画

要创建CSS3动画，需要了解@keyframes规则

• @keyframes 规则是创建动画
• @keyframes 规则内指定一个CSS 样式和动画将逐步从目前的样式更改到新的样式

当在**@keyframes** 创建动画，要绑定一个选择器

绑定在div元素，时长五秒

div{
    animation:myfirst 5s;
    -webkit-animation:myfirst 5s;
}

必须要表明时间，因为默认是0。

属性	描述
animation	所有动画的简写，除了animation-play-state属性
animation-name	规定名称
animation-duration	规定动画完成一个周期所花费的秒/毫秒，默认是0
animation-timing-function	规定动画的速度曲线，默认“ease”
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1，无限次是infinite。
animation-direction	规定动画是否在下一周期逆向播放。默认是“normal”
animation-play-state	规定动画是否正在运行或暂停，默认是“running”

animation-direction 的值有normal,reverse(反向播放)，alternate(奇数正向，偶数次反向),alternate-reverse(奇数反向，偶数正向)。

 @keyframes rotate{
    from{
        /* 开始的状态 */
        transform: rotateZ(0deg);
    }
    to{
        /* 动画的状态 */
        transform: rotateZ(360deg);
    }
}    
    /* 另外一种方式 */
@keyframes rotate{
    0%{
        
    }
    20%{
        
    }
    40%{
        
    }
    60%{
        
    }
    80&{
        
    }
    100%{
          
    }
    
}

6. 网页布局

伸缩布局

.box{

    /* 将父级元素设置为伸缩(flex)效果 */
    display: flex;
    /* 子元素在主轴（水平方向）的对齐方式的设置 */
    /* justify-content: flex-start; 主轴从左到右 */
    /* justify-content: flex-end; 主轴从右到左 */
    /* justify-content: center; 中间显示 */
    /* justify-content: space-between; 两端对齐 */
    /* justify-content: space-around; 环绕的方式显示 */

    /* 主轴的反向调整 默认是row */
    /* flex-direction: row-reverse; 水平反转 */
    /* flex-direction: column; 主轴的水平方向变成垂直方向，侧轴依旧与主轴垂直 */

    /* 侧轴对其方式 默认是flex-start*/
    /* align-items: flex-end; 侧轴从下向上显示 */
    /* align-items: center; 中间显示 */
    /* align-items: stretch; 拉伸的效果，子元素不能设置高 */


    /* flex-wrap: wrap; 子元素换行显示，nowrap不换行 */
    /* align-content: flex-start; 换行没有空白行 */


}

伸缩百分比

在父元素有伸缩效果时，使用flex:num num是一个数字。

.dv1{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-left: 5px;
    flex:2;
    /* 占两份 */
}

.dv1{
    width: 100px;
    height: 100px;
    background-color: green;
    margin-left: 5px;
    flex: 1;
}

.dv1{
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-left: 5px;
    flex:1;
}

父元素分成四份，第一个占两份，二三各占一份