CSS整理3

a标签的伪类选择器

作用: 修改a标签不同状态的

link 修改没有被访问过的样式

visited 修改被访问过的样式

hover 修改鼠标悬停下的样式

ctive 修改鼠标长按样式

一起出现顺序要求爱恨原则 love hate 顺序link visited hover ctive

默认状态的样式和被访问过状态的样式一样, 可以缩写成不用写

transition 过度模块

过渡三要素
1  有属性变化
2  给发生改变的属性标签添加过渡transition 
3  持续时长

其他属性

transition-property: width;   变化的属性

transition-duration: 5s;   持续时间

transition-delay: 2s    延迟时间

transition-timing-function: linear; 运动的速度 linear ease ease-in ease-out ease-in-out

连写:

transition: 过渡属性 过渡时长 运动速度 延迟时间

transition:all 0s;

2d转换模块

transform: rotate(45deg).  旋转  （平移方向会发生改变）

transform: translate(100px, 0px)  平移   （水平、垂直）

transform: scale(1.5, 1);   放大缩小     子元素会继承父元素的拉伸

transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);  综合

transform-origin: 设置中心点

95-2D转换模块-旋转轴向

围绕xyz轴做旋转

rotateZ  
rotateX

rotateY

透视：perspective： 500px 近大远小 添加到做旋转元素的父类中

给 ：hover伪元素选择器一个transform 可以初始化过渡效果

盒子阴影和文字阴影

盒子阴影box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;

简写box-shadow: 10px 10px 10px

文字阴影text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色 ;

动画模块

动画和过渡的区别
过渡需要人为主动触发
动画被动触发

相同点

需要满足三要素才会有动画效果

动画写在需要执行动画的标签里  

给动画起个名字            animation-name:  自定义

给动画设置执行时间     animation-duration： 3s

 animation-fill-mode作用:
            指定动画等待状态和结束状态的样式
            取值:
            none: 不做任何改变
            forwards: 保持动画最后一帧的样式
            backwards: 显示动画第一帧的样式

            both: 显示动画第一帧的样式, 结束状态保持动画最后一帧的样式

连写

animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;

创建动画

@keyframes {

     from: {

        动画的起始位置

    }

    to: {

        结束为止

    }

    或者..

               0%{
                left: 0;
                top: 0;
            }
            25%{
                left: 300px;
                top: 0;
            }
            50%{
                left: 300px;
                top: 300px;
            }
            75%{
                left: 0;
                top: 300px;
            }
            100%{
                left: 0;
                top: 0;
            }

}

:hover{
            /*
            告诉系统当前动画是否需要暂停
            取值:
            running: 执行动画
            paused: 暂停动画
            */
            animation-play-state: paused;

        }

3D转换模块

2D就是一个平面,3D就是一个空间立体， 默认元素都2D展现的

呈3D展现： transform-style: preserve-3d; 添加到发生属性改变的父元素里

background-size 背景大小

取值:

  background-size:200px 100px;
 background-size:100% 80%;
 background-size:100px auto;

两个属性

cover:拉伸宽度和高度都填满

contain 拉伸宽度或者高度 其中一个填满

由网络收集，个人提炼整理