CSS 备忘录2-动画、渐变、颜色、选择器等

1、背景

background属性是八个属性的简写形式：

1. background-image          指定一个文件或生成的颜色渐变作为背景图片
2. background-position      设置图片的初始位置
3. background-size              指定背景图片的渲染尺寸
4. background-repeat        是否平铺图片
5. background-origin          决定背景相对于元素的边框盒、内边距盒（初始值）、或内容盒子来定位
6. background-clip               指定背景是否应该填充边框盒（初始值）、内边距盒、或内容盒子
7. background-attachment        是否指定背景图片随着元素上下滚动（初始值）还是固定在视口区域，如果使用fixed，会对页面性能产生负面影响
8. background-color            指定纯色背景，渲染到背景图片下方

2、背景渐变

        线性渐变函数 linear-gradient()

        重复渐变函数 repeating-linear-gradient()

        径向渐变函数 radial-gradient()

        同心圆环函数 repeating-radial-gradient()

1、linear-gradient

        这个函数使用三个参数来定义行为：角度、起始颜色、终止颜色。

        角度可以使用deg，也可以形象地用 to right、to bottom right等（0 deg为正上方，度数增加，往顺时针旋转）。

        rad为弧度，2π大约为6.2832弧度，即π=3.14 rad。

        过渡型：

                如：

background-image:linear-gradient(to top, red, white, blue);

             则背景自下往上从红色（0%）慢慢过渡到白色（50%）再慢慢过渡到蓝色（100%）；

        也可以给每个颜色节点指定明确的位置：

                如：

background-image:linear-gradient(to top, red 0%, white 50%, blue 100%);

                将得到一样的效果。

        条纹型：

                如果在同一个位置设置两个颜色节点，那么渐变会直接从一个颜色变换到另一个颜色，而不会平滑过渡。

                如：

background-image:linear-gradient(to top, red 40%, white 40%,white 60%, blue 60%);

条纹渐变

2、重复渐变：

background-image: repeating-linear-gradient(
    135deg,
    #57b,
    #57b 10px,
    #148 10px,
    #148 20px
);

重复条状环

3、径向渐变：

 

background-image: radial-gradient(white, blue);  /* 椭圆 */

默认居中的椭圆渐变

background-image: radial-gradient(circle, white, blue);  /* 圆形渐变*/

默认居中的圆环渐变

/* 大小为3em，距离左侧和右侧边框都是60px，当使用百分数时，为自身大小的百分数*/
background-image: radial-gradient(3em at 60px 60px, white, blue);   

指定位置的圆环渐变

/* 指定颜色节点位置的径向渐变*/
background-image: radial-gradient(
    circle,
    midnightblue 0%,
    white 75%,
    red 100%
);

指定颜色节点位置的径向渐变

 

4、同心圆环渐变

/* 重复渐变生成条纹效果 */
background-image: repeating-radial-gradient(
    circle,
    midnightblue 0,
    midnightblue 1em,
    white 1em,
    white 2em
);                       

同心圆环背景

3、阴影

        box-shadow为元素盒阴影、text-shadow文字阴影。

        box-shadow可以应用于任何元素，而text-shadow只能应用于文本元素。

        两者的不同之处：text-shadow 没有阴影扩展。

        box-shadow:  h-shadow  v-shadow  blur  spread  color  inset;
        text-shadow:  h-shadow  v-shadow  blur  color;

box-shadow：inset 2px 2px black；第一个参数 inset 使边缘阴影出现在元素的内部。

4、过渡 transition

4-1、基本使用

        transition是一个简写属性，依次分别代表四个值：transition-property（生效的属性）、transition-duration（持续的时间）、transition-timing-function（定时函数）、transition-delay（执行前的延迟时间）。

        transition-property 初始值为关键字all，表示所有属性都生效，如果只有某个属性需要过渡，可以直接指定属性名，如 transition: color；如 transition: color,font-size ; 

        transition-duration、transition-delay用秒s或毫秒ms指定，带单位。

        transition-timing-function控制过渡过程中变化率如何加速或减速，可以是一个关键字，如linear或ease-in等。

    

        等价的写法：

transition: border-radius 0.3s linear, background-color 0.6s ease-in;

/* 等价于：*/

transition-property：border-radius, background-color;
transition-duration:0.3, 0.6s;
transition-timing-function:linear, ease-in;

4-2、关于定时函数：

        linear：匀速

        ease：低速开始，然后加速，在结束前变慢

        ease-in：加速

        ease-out：减速

        ease-in-out：低速开始和结束

图片来自《深入解析CSS》

注意：

        不是所有属性都可以添加过渡效果，display就是其中之一。不能在display:none;和display:block; 等之间过渡。        

5、 变换 transform

        注意，变换不能作用在行内元素上

5-1、二维变换

1）、旋转：rotate(xx deg) —— 元素绕着一个轴心（默认是中心）旋转一定角度。默认围绕Z轴旋转。Z轴正方向就是垂直于屏幕向外的方向。

2）、平移：translate(xx px/%...) —— 元素向上、下、左、右方向移动，类似相对定位，使用百分比是相对自身元素的大小来变化。

可以指定两个参数，第一个参数是x轴正方向，第二个参数是y轴正方向。使用负值那就是反方向。

3）、缩放：scale( xxx ) —— 缩小或放大元素，数值为放大的倍数，无单位。

4）、倾斜：skew(xxx deg) —— 使元素变形、顶边划向一个方向，底边划向相反方向。

以上每一种变换函数都是transform属性的值。

写法：

transform：skew(20deg)  scale(0.5);   /* 多个属性用空格隔开 */

通常将 translate() 放在最后执行，在代码的顺序中要放在首位。

        变换是围绕元素的基点展开的（除了 translate 是整体行为），可以通过 transform-origin 属性改变基点的位置，如：
 

transfrom-origin: right center;

transfrom-origin: 100% 50%;

是等效的，都将基点设置为最右侧中间的位置。还可以通过px、em等的长度值来指定。

5-2、三维变换：

分别指定平移的方向：translateX()、translateY()、translateZ()。

分别指定转动的方向：rotateX()、rotateY()、rotateZ()。

为页面添加3D变换之前，要确定好透视距离 perspective()，这是十分重要的，不然3D效果不明显或者根本看不到。

透视距离比较小时，那么3D效果就比较明显；如果透视距离比较大，则3D效果就会比较弱。

可以通过两种方式指定透视距离：

        1) 在需要观察的元素中设置 perspective() 变换；如：

transform:perspective(100px)  rotateX(30deg);

        2) 在需要观察的元素的父元素中设置 perspective 属性；为祖先元素设置perspective属性可以使多个元素共享相同的透视距离。如： 

perspective：200px;

        perspective-origin属性设置观察的位置，默认是位于元素的正前方。如：

perspective-origin：left  bottom；

6、动画 @keyframes

@keyframes 用来定义动画规则，为元素添加 animation 属性即为元素添加指定动画。

animation是几个属性的简写：

        1)、animation-name        设置动画的名称

        2)、animation-duration              动画的持续时长（300ms、1s）

       3)、animation-timing-function        动画函数（和渐变中的函数是基本一样的，如ease、linear等）

        4)、animation-delay        延迟多长时间后再播放

        5)、animation-iteration-count        循环播放次数（2、infinite 无限重复播放）

        6)、animation-direction        动画的播放方向

        7)、animation-fill-mode        动画不播放时，要应用到元素的样式（播放前和播放后）

        关于 animation-direction：

来自菜鸟教程

        关于 animation-fill-mode：

来自菜鸟教程

        注意：当出现了样式层叠，那么动画中设置的规则比其他声明拥有更高的优先级。

 

.animation{
    width: 100px;
    height: 100px;
    border: 1.5px solid black;
    border-radius: 0.5rem;
    animation: myanimation 4s linear 1s infinite;       /*给当前元素添加动画效果 */
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
/* 动画名称 持续时间 时间函数 延迟 播放次数 是否在下一周期逆序播放 当动画不在播放时（未开始或已完成）要应用到元素上的样式  */
}

        @keyframes myanimation{     /* 给动画命名 */
            0%{             /* 动画的关键帧 开始 0%*/

                opacity: 0;
                background-color: hsl(230,75%,50%);
                transform: translate(100px , 100px);
            }

            50%{            /* 中间 */
                opacity: 1;
                background-color: hsl(150,75%,50%);
                transform: translate(500px ,500px);
            }

            100%{           /* 结束时 */
                opacity: 0;
                background-color: hsl(230,75%,50%);
                transform: translate(100px ,100px);
            }
        }

        动画帧也可以使用 from-to，等价于0% ~ 100%：

        @keyframes myanimation2{
            from{
                opacity: 0;
                transform: translate(-200px, -200px) scale(2);
            }
            to{
                opacity: 1;
                transform: translate(0, 0) scale(1);
            }
        }

7、关于颜色的使用

1、使用十六进制的形式：

        如 #1A2B3C4F

        其中前面两位（1A）代表红色的取值，紧随的两位（2B）表示绿色的取值，再后面两位（3C）表示蓝色的取值 ，最后两位（4F）的取值表示透明度的大小。

        这里将两位分成一组，每一组的取值为0-255，要转换成十六进制，即00-FF，值越大，代表该颜色越深。最终的结果是由前三组的值（红绿蓝调制）混合而成，再加上最后一组表示透明度，最后一组的值越小，则越透明。

        对于前三组确定颜色：

                当第一组的值大，而另外两组的值较小，如#aa0123，则颜色偏红。

                当第二组的值大，而另外两组的值较小，如#11AA22，则颜色偏绿。

                当第三组的值大，而另外两组的值较小，如#1234AA，则颜色偏蓝。     

                当第一、二组的值较大于第三组时，偏黄色（由红色和绿色生成）。

                当第二、三组的值较大于第一组时，偏青色。

                当第一、三组的值教大于第二组时，偏紫红色。  

                当三组的值都相当时，整体由小到大改变，则颜色由黑到白改变。

        在前三组中，若其余两组不变，另外一组的数变大（或一组不变，其余两组变小），则该组对应的颜色会加深影响；如果该组取值减少，则由另外两组确定的颜色加深。        

        

2、使用hsl()函数表示颜色

        该函数包含三个参数，分别代表色相、饱和度、明度（或者光度）。书写格式如：hsl(240, 100%, 50%); 代表蓝色blue。

        第一个参数色相是介于0 ~ 359之间的整数值，代表色相环上的360°。从红色（0）、黄色（60）、绿色（120）、青色（180）、蓝色（240）、洋红色（300）依次过渡。

        第二个参数饱和度是代表色彩强度的百分数100%时颜色最鲜艳，0%意味着没有色彩，只是一片灰色。

        第三个参数明度代表颜色有多亮或者多暗。明度值设置的越高，颜色越浅，100%就是纯白色；设置得越低，颜色越暗，0%就是黑色。一般设置50%是最鲜艳的。

（该图片来源于网络）

 

8、改变滚动条的样式

（该图片来源于网络）

 

 在CSS中，可以使用 -webkit-scrollbar 来自定义滚动条的外观。该属性提供了七个伪元素：

1）::-webkit-scrollbar：整个滚动条

2）::-webkit-scrollbar-button：滚动条上的按钮（上下箭头）

3）::-webkit-scrollbar-thumb：滚动条上的滚动滑块

4）::-webkit-scrollbar-track：滚动条轨道

5）::-webkit-scrollbar-track-piece：滚动条没有滑块的轨道部分

6）::-webkit-scrollbar-corner：当有垂直和水平滚动条时，两者交汇的部分

7）::-webkit-resizer：右下角可拖动位置（类似textarea右下角可拖动的部分）

 

    .outer{
        width: 400px;
        height: 400px;
        overflow: auto;
        scrollbar-width: 30px;
        border: 2px solid black;
    }
    .outer::-webkit-scrollbar{
        width: 30px;
        height: 100%;
    }
    .outer::-webkit-scrollbar-thumb{
        background-image: linear-gradient(to bottom, #ff8800, #e1f831);
        border-radius: 30px;
        border: 2px solid black;
    }
    .outer::-webkit-scrollbar-track{
        background-image: linear-gradient(to top, rgba(220, 220, 251, 0.8), rgba(182, 182, 182, 0.8));
        border: 1px solid black;
    }
    .inner{
        height: 1200px;
        width: 100%;
        background-image: linear-gradient(to top,rgba(255, 192, 203, 0.261), rgba(135, 207, 235, 0.689));
    }

 

9、选择器汇总

1、基础选择器

标签选择器，如 div{}、p{}、span{}

类选择器，如 .myclass{}、.yourClass{}

id选择器，如 #yourId、#elseId

通用选择器：*{}，匹配所有元素，优先级最低

2、组合选择器

子组合器(>，选择的是直接后代)：.parent > .children{}、div > .child{}

相邻兄弟组合器(+，选择的是该元素同级的后一个元素)：p + h2、div + div

通用兄弟组合器(~，匹配所有跟随在指定元素后面的兄弟元素)：div ~ p

复合选择器（多个基础选择器的连接，没有空格）：div.mydiv

3、伪类选择器

        伪类选择器的优先级等价于一个类选择器（0,1,0）

1）:first-child：匹配当前元素的父元素的第一个子元素

2）:last-child：匹配当前元素的父元素的最后一个子元素

3）:only-child：匹配当前元素的父元素的唯一一个子元素（如果子元素是唯一的话）

4）:nth-child(an+b)：匹配当前元素同类型的兄弟元素中位置特定的元素，n从0开始代入

    

        

            
1111
            
2222
            
3333
            
4444
            
5555
        
        

            
1234
            1234
            
1234
            
1234
            
1234
            
1234
        
    

    li{
        margin: 6px 0;
    }
    li:nth-child(2n + 1){
        background-color: brown;
    }
    .mydiv{
        border: 2px solid pink;
    }
    .mydiv > :nth-child(2n){
        background-color: brown;
    }

 

5）:nth-last-child(an+b)：类似于:nth-child()，从最后往前数

6）:first-of-type：根据拥有相同标签名的子元素中的数字顺序查找第一个原素

7）:last-of-type：匹配当前元素的父元素下，每种类型的最后一个子元素

8）:only-of-type：匹配当前元素的父元素下，指定类型的唯一一个子元素（如果唯一则匹配）

9）:not()：匹配的元素不匹配括号中的选择器

    

        

            
1111
            
2222
            
3333
            
4444
            
5555
        
    

    li{
        margin: 6px 0;
    }
    li:not(.myli){
        background-color: brown;
    }

 

10）:empty：匹配的元素必须没有子元素

11）:focus：获得焦点的元素（click、touch、按tab键导航）

12）:hover：鼠标悬浮于其上时应用该样式

13）:root：匹配文档根元素（html）

14）:disabled：匹配已经禁用的元素

15）:enabled：匹配已启用的元素

16）:checked：匹配复选框、单选框等被选中的元素

17）:invalid：匹配有非法输入值的元素，如 input 的 type="number" 但输入了汉字

18）:valid：匹配有合法值的元素

19）:required：匹配设置了 required 属性的元素

20）:nth-of-type(an+b)：根据目标元素的类型按指定的数组顺序进行匹配

 

    

        

            
1234
            
666
            666
            
1234
            
666
            
1234
            
1234
            
1234
            
666
        
        
1234
        
1234
        
1234
    

    p:nth-of-type(2n){
        background-color: brown;
    }
    p:nth-of-type(2n + 1){
        background-color: beige;
    }

 21）:nth-last-of-type：基本同上，是从末尾开始匹配

4、伪元素选择器

        伪元素选择器的优先级等价于一个标签选择器（0,0,1）

1）::before：将成为匹配元素的第一个子元素。默认为行内元素，可以用于插入文字、图片或构建形状。需指定content属性才能让元素显现

2）::after：将成为匹配元素的最后一个子元素。同上。

3）::first-letter：用于指定匹配元素的第一个文字字符的样式

4）:first-line：用于指定匹配元素的第一行文本的样式

5）::selection：用于指定用户使用鼠标高亮选择的任意文本的样式，通常用来改变选中文本的背景。这个伪元素选择器只有几个属性可以使用：color、background-color、cursor、text-decoration。

5、属性选择器

        属性选择器的优先级等价于一个类选择器（0,1,0）

1）[attr]：匹配的元素拥有指定的属性attr，而不管属性值是什么，如 input[disabled] 匹配

2）[attr="value"]：匹配的元素拥有指定的属性attr和值value，如 input[type="text"] 匹配

3）[attr^="value"]：匹配的元素拥有指定的属性attr，并且对应的值以value开头

4）[attr$="value"]：匹配的元素拥有指定的属性attr，并且以指定的值value结尾

5）[attr*="value"]：匹配的元素拥有指定的属性attr，并且属性值包含value在内

6）[attr~="value"]：匹配拥有指定属性attr，并且该属性值是以空格分隔的列表，该列表中含有value。如 input[class~="myInp"] 可以匹配 ：