从0开始学习HTML5CSS3(二)

css3新增内容

1 伪类选择器

特点: 都是以:开头,连在一起的写法其实是交集选择器

以下这些主要是给a标签用的（hover除外）
        :hover   鼠标悬停
        :active  点击a标签时的样式
        :link    尚未访问的样式
        :visited 访问后的样式

1.1 xxx-child

:first-child：找到第一个子元素
:last-child：找到最后一个子元素
:nth-child：找到某一个子元素
写几就代表找到第几个
写n代表找到所有
写odd代表找到所有奇数
写even代表找到所有偶数
写mn： m是一个数字，代表m的倍数 3n 代表 3的倍数
写n+m：m是一个数字，代表找到从m开始到最后 例：n+6 从6开始
xxx-child：必须满足是在父元素中也是第几个子元素

    

        我是span
        
隔壁老王1
        
隔壁老王2
        
隔壁老王3
        
隔壁老王4
        
隔壁老王5
        
隔壁老王6
        
隔壁老王7
        
隔壁老王8
        
隔壁老王9
        
隔壁老王10
        最后的span
    


//第一个子元素是span li:nth-child(1)找不到,因为li不是第一个子元素

1.2 xxx-of-type

xxx-of-type：用法和特点几乎跟xxx-child是一样的
xxx-of-type就是直接找到第几个，不用管在父元素中是第几个子元素，但是xxx-child要管
注意：不是说找到整个文件里的第几个，而是找到自己所在的盒子的第几个

 

        我是span
        
隔壁老王1
        
隔壁老王2
        
隔壁老王3
        
隔壁老王4
        
隔壁老王5
        我是最后的span
    

    

        
隔壁老周1
        
隔壁老周2
        
隔壁老周3
        
隔壁老周4
        
隔壁老周5
    
///* 找到第一个li,不用管在父元素中是第几个 */
         li:first-of-type{
             color:red;
         }
老王1和老周一都会变红色

2 伪元素选择器

伪元素选择器：前面有两个冒号
::before
在不改变html的情况下，给元素内容的前面加一个子元素
::after
在不改变html的情况下，给元素内容的后面加一个子元素
默认都是行内元素,哪怕没有内容，也要写content,只不过content为空就行了
因为它们的应用场景主要只是用来清除浮动带来的影响

::first-letter 匹配首字母
::first-line 匹配第一行
::selection匹配选中的部分
::placeholder 匹配占位符

3 transition

transition：过渡. 让你的样式变化的时候具有动画效果
/*
参数1：参与过渡的属性，写一个all代表所有属性都参与过渡,一般写的是all,有默认值，默认值就是all
参数2：过渡的持续时间
参数3：延迟时间
参数4：运动曲线：linear,steps() 分步骤动画
顺序其实可以打乱，随便写都行，但是先写的是动画时间，后写的时间是延迟时间
/
/ transition:all 2s 1s steps(3); /
/ 以下是顺序打乱写法 /
/ transition: 1s all steps(2) 2s; /
/ 代表所有属性参与过渡，并且动画时间为2s /
/ transition: 2s; /
transition: all 1s;
/ transition其实也个是复合属性，由下面四个子属性组成 /
/ transition-property: 参与过渡的属性 /
/ transition-duration: 持续时间 /
/ transition-delay: 延迟时间 /
/ transition-timing-function: 运动曲线 */

4 box-shadow(盒子阴影)

box-shadow：盒子阴影 所有元素都可以加阴影

参数1：阴影水平偏移位置
参数2：阴影处置偏移位置
参数3：阴影模糊度
参数4：阴影的宽度 阴影默认跟盒子一样大，如果给正的数，在盒子的基础上四边加多少
参数5：阴影的颜色
参数6：是否为内阴影，默认为外阴影 如果加一个inset就是内阴影，不加就是外阴影
多个阴影之间用逗号隔开，先写的阴影层级更高
实例:box-shadow:0px 0px 20px 10px green,0px 0px 20px 10px gold;

5 box-sizing

box-sizing：它可以设置边框是外扩还是内聚

设置后盒子宽高不用再加上边框

//加上后盒子宽高为100px
.box{
             width: 100px;
             height: 100px;
             background-color: #f00;
             border: 10px solid black;

             /* 让边框内聚
                border-box代表内聚
                content-box代表外扩，它也是默认值
              */
             box-sizing: border-box;
         }

6 text-shadow

text-shadow:文字阴影,给文字加阴影
参数1：水平偏移,正数往右边
参数2：垂直偏移,正数往下边
参数3：模糊度
参数4：阴影的颜色
多个阴影之间用逗号隔开，先写的层级更高
实例:text-shadow: -5px -5px 10px green,-10px -10px 10px yellow,-15px -15px 10px red;

7 background

参数1：图片路径,路径里可以写引号也可以不写
参数2：是否平铺，默认值是repeat：水平和垂直都平铺
no-repeat 用的多，代表不平铺
repeat-x：代表水平平铺
repeat-y：代表垂直平铺
参数3：图片偏移位置，默认在左上角
第一个数给的是水平方向，值越大越往右，越小往左
第二个数给的是垂直方向，值越大越往下，越小往上
除了可以给数字具体数据外，还可以给单词，如果你要居中，写一个center就够了
还可以给百分比50%代表居中
参数4：图片的大小，默认用的是图片自身大小
参数4前面必须加 /
两个单词：
cover： 覆盖的意思。图片最终一定要覆盖整个盒子
contain：包含的意思。图片一定会被盒子包含住
它们两都是等比例缩放
参数5：背景颜色
如果要放多个背景图片，用逗号隔开，如果多张背景图片，那么背景颜色，一定只能写在最后
先写的层级更高！
代码示例:background: url(images/pl.png) no-repeat 0 0 / 300px 200px, url(images/lq.png) no-repeat 0 200px/300px 200px red;

background也是一个复合属性

background-image: 路径
background-repeat: 是否平铺
background-position: 位置
background-position-x:x轴位置
background-position-y:y轴位置
background-size: 大小
background-color: 背景颜色

8 线性渐变

参数1：渐变的方向 可以写 to 单词
还可以写角度,单位是deg，0deg从下开始，值越大顺时针转
参数2：渐变的颜色1
参数3：渐变的颜色2
每个颜色后面还可以写百分比，第一个颜色写百分比代表它到哪结束，后面的颜色写百分比代表从哪开始，如果要指定它在哪结束，就再写一个相同的颜色再来一个百分比，这时候百分比就是结束位置
渐变颜色可以写N多个，至少2个
但其实C3是把它当图片处理的，所以你赋值是给background-image赋值
代码: background-image: linear-gradient(to right,red 30%,blue 30%,blue 60%,yellow 60%)

9 径向线变

参数1：圆的大小和圆心的位置
后面接颜色，颜色至少2个，多了可以N个
它除了渐变方式不一样以外，其他跟线性渐变都是一样的
background-image: radial-gradient(100px at center,red 30%,blue 30%,blue 60%,yellow 60%);

10 二维变换

二维：就是指只有x轴和y轴
变换：旋转、平移、缩放、扭曲
以上变换，改的都是同一个属性：transform
旋转：rotate
平移：translate
缩放：scale
扭曲：skew

li:nth-child(1):hover {

        /* 传入角度,正为顺时针旋转，负为逆时针旋转 */
         transform: rotate(-45deg);

             /* 
                参数1：x轴方向，值越大越往右，越小越往左
                参数2：y轴方向，值越大越往下，越小越往上
                只写一个只移动x轴
            */
            transform: translate(-500px, 200px);

 /* 传入的是缩放的倍数
                如果只写一个代表宽高都缩放
                参数1：代表宽的缩放（x轴方向）
                参数2：代表高的缩放（y轴方向）
            */
            transform: scale(1.5,0.5);
        }
/* 传入角度 */
            transform: skew(15deg);

多个变换使用空格隔开,先旋转后平移会改变方向

/* 空格隔开，只有改transform的时候是空格隔开 */
transform: translate(500px) rotate(45deg);

11 三维变换

三维变换要给父盒子加一个视距perspective: 600px;这样看起来才会有3d效果

三维旋转,transform:rotateX(45deg) x轴
transform:rotateY(45deg) y轴
transform:rotateZ(45deg) z轴
三维平移
x轴:transform: translateX(200px);
y轴:transform: translateY(200px);
z轴:transform: translateZ(200px);
设置旋转固定点,默认值是center center
trasnform-origin:left top;
开启3D层次显示，默认情况下浏览器没有开启元素的层次显示
transform-style: preserve-3d;

12 animation动画

transition动画的局限：
1.必须要满足一定条件才会触发，无法自动开始
2.不能设置动画播放的次数
animation属性就是一套用来做动画效果的属性，可以自动开始，可以设置动画的次数

1 使用
首先要写一个剧本

@keyframes swimming{
          //from一般不写
            from{}
            to{
          //要变成的样子
                background-position-y: -1386px;
            }
        }

调用
animation: swimming 1s steps(11) infinite;
详解:

参数1：剧本名字
参数2：动画持续时间
参数3：延迟时间
参数4：运动曲线 linear匀速 steps分步骤
参数5：动画次数，默认为1,不要加单位 infinite代表无限次
参数6：默认情况下动画完成后会复原，加一个属性叫forwards就不会复原了
加了代表停在动画结束的最终效果
参数7：默认情况下多次动画的时候，每次动画完成会闪现回最初的样子，如果我希望用动画效果回到最初样子
就加一个属性叫alternate，但是注意回去的那次动画也算一次动画
参数8：是播放还是暂停
running：默认值 播放
paused：暂停
这些参数没有顺序之分，想到哪个就写哪个就行了，后写的时间是延迟时间
*/
animation: bigger 1s .1s linear 3 forwards alternate paused;

13百分比动画

之前的from,to这种动画，它无法达到想先做什么动画，再做什么动画，然后又做什么动画的效果.它只能同时去做某一种动画,这时候需要写百分比动画,先做什么，再做什么，然后做什么

 @keyframes ani2{
            /* 从动画一开始，到动画总时长的百分之50,干下面这件事 */
            /* 从0到百分之40的时间做平移 */
            40%{
                transform: translateX(800px);
            }

            /* 从40%以后到80%用来放大 */
            80%{
                /* 在已经到800的基础再放大 */
                transform: translateX(800px) scale(1.5);
            }

            /* 80%到90%做旋转 */
            90%{
                
                transform: translateX(800px) scale(1.5) rotate(45deg);
            }

            /* 剩下的时间如果我们没写，它就代表用剩余的时间动画效果去复原 */
        }