【9】CSS知识点：44.a标签的伪类选择器 45.过渡模块 46.2D转换模块 47.盒子阴影和文字阴影

44.a标签的伪类选择器

1.通过我们的观察发现a标签存在一定的状态
1.1默认状态, 从未被访问过
1.2被访问过的状态
1.3鼠标长按状态
1.4鼠标悬停在a标签上状态

2.什么是a标签的伪类选择器?
a标签的伪类选择器是专门用来修改a标签不同状态的样式的

3.格式
:link 修改从未被访问过状态下的样式
:visited 修改被访问过的状态下的样式
:hover 修改鼠标悬停在a标签上状态下的样式
:active 修改鼠标长按状态下的样式

4.注意点
4.1a标签的伪类选择器可以单独出现也可以一起出现
4.2a标签的伪类选择器如果一起出现, 那么有严格的顺序要求
编写的顺序必须要个的遵守爱恨原则 love hate
4.3如果默认状态的样式和被访问过状态的样式一样, 那么可以缩写

4.4.在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面
4.5.在企业开发中和a标签盒子相关的属性都写在标签选择器中(显示模式/宽度/高度/padding/margin)
4.6.在企业开发中和a标签文字/背景相关的都写在伪类选择器中

45.过渡模块

1,过渡三要素
1.1必须要有属性发生变化
1.2必须告诉系统哪个属性需要执行过渡效果
1.3必须告诉系统过渡效果持续时长

2.注意点
当多个属性需要同时执行过渡效果时用逗号隔开即可
transition-property: width, background-color;
transition-duration: 5s, 5s;

 div{
            width: 100px;
            height: 50px;
            background-color: red;
            /*告诉系统哪个属性需要执行过渡效果*/
            transition-property: width, background-color;
            /*告诉系统过渡效果持续的时长*/
            transition-duration: 5s, 5s;

            /*transition-property: background-color;*/
            /*transition-duration: 5s;*/
        }
        /*:hover这个伪类选择器除了可以用在a标签上, 还可以用在其它的任何标签上*/
    div:hover{
            width: 300px;
            background-color: blue;
        }

3.其他属性

 transition-duration: 5s;
            /*告诉系统延迟多少秒之后才开始过渡动画*/
  transition-timing-function: linear;
            /*告诉系统过渡动画的运动的速度*/

4.连写格式
1.过渡连写格式
transition: 过渡属性 过渡时长 运动速度 延迟时间;

2.过渡连写注意点
2.1和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可
2.2连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素
2.3如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为
transition:all 0s;

5.编写过渡套路
1.1不要管过渡, 先编写基本界面
1.2修改我们认为需要修改的属性
1.3再回过头去给被修改属性的那个元素添加过渡即可

46.2D转换模块

1.转换模块

  ul li:nth-child(2){
                /*其中deg是单位, 代表多少度*/
                transform: rotate(45deg);
            }
            ul li:nth-child(3){
                /*
                第一个参数:水平方向
                第二个参数:垂直方向
                */
                transform: translate(100px, 0px);
            }
            ul li:nth-child(4){
                /*
                第一个参数:水平方向
                第二个参数:垂直方向
                注意点:
                如果取值是1, 代表不变
                如果取值大于1, 代表需要放大
                如果取值小于1, 代表需要缩小
                如果水平和垂直缩放都一样, 那么可以简写为一个参数
                */
                /*transform: scale(0.5, 0.5);*/
                transform: scale(1.5);
            }
            ul li:nth-child(5){
                /*
                注意点:
                1.如果需要进行多个转换, 那么用空格隔开
                2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的
                */
                transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
                /*transform: translate(100px, 0px);*/
            }

2.转换模块——形变中心点

 ul li{
            list-style: none;
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            /*
            第一个参数:水平方向
            第二个参数:垂直方向
            注意点
            取值有三种形式
            具体像素
            百分比
            特殊关键字
            */
            /*transform-origin: 200px 0px;*/
            /*transform-origin: 50% 50%;*/
            /*transform-origin: 0% 0%;*/
            /*transform-origin: center center;*/
            transform-origin: left top;
        }
        ul li:nth-child(1){
            /*
            默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点
            */
            background-color: red;
            transform: rotate(30deg);
        }
        ul li:nth-child(2){
            background-color: green;
            transform: rotate(50deg);
        }
        ul li:nth-child(3){
            background-color: blue;
            transform: rotate(70deg);
        }

3.2D转换模块-旋转轴向

 ul li{
            list-style: none;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            margin-top: 50px;
            border: 1px solid #000;
            /*
            1.什么是透视
            近大远小
            2.注意点
            一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
            */
            perspective: 500px;
        }
        ul li img{
            width: 200px;
            height: 200px;
            /*perspective: 500px;*/
        }
        ul li:nth-child(1){
            /*默认情况下所有元素都是围绕Z轴进行旋转*/
            transform: rotateZ(45deg);
        }
        ul li:nth-child(2) img{
            transform: rotateX(45deg);
        }
        ul li:nth-child(3) img{
            /*
            总结:
            想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可
            */
            transform: rotateY(45deg);
        }

47.盒子阴影和文字阴影

1.如何给盒子添加阴影
box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;

2.注意点
2.1盒子的阴影分为内外阴影, 默认情况下就是外阴影
2.2快速添加阴影只需要编写三个参数即可
box-shadow: 水平偏移 垂直偏移 模糊度;
默认情况下阴影的颜色和盒子内容的颜色一致

3.如何给文字添加阴影
text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色 ;