2019-11-30 css 3基础

Q1 为了更好的向前兼容不同的浏览器，编写CSS3时都有哪些前缀？分别对应什么浏览器？

前缀	浏览器
-webkit	chrome和safari
-moz	firefox
-ms	IE
-o	opera

Q2 说说你理解的伪类和伪元素分别是什么？

伪类：是为了通过选择器，格式化DOM树以外的信息，以及不能被常规CSS选择器获取到的信息。
通过上面的概念我们知道了伪类的功能有两种：
1.格式化DOM树以外的信息。比如： 标签的:link、:visited 等。这些信息不存在于DOM树中。

2.不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child 来获取到。

伪元素：可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到（::first-letter、::first-line）。同时，伪元素还可以创建源文档不存在的内容，比如使用::before或者::after。
根据上述理解，伪类和伪元素的区别如下：
伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息，而伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。

在CSS3中，伪类用单冒号:表示；而伪元素用双冒号::表示。一个选择器可以同时使用多个伪类(但有的伪类会互斥)；而一个选择器只能同时使用一个伪元素

Q3 分清 Transform 、Transition、 Animations 三兄弟,并阐述它们分别的用处？

1、transform: 改变元素形状

属性	意义
rotate	围绕中心点旋转deg单位
translate(x,y)	向x y轴移动位置px
scale	整体缩放倍数、scaleX scaleY沿轴方向缩放
skew(x,y)	切变 、scaleX scaleT沿轴切变

2、transition：过渡，一个元素从一个形状变换到另一个形状。（需要事件触发）

属性	含义
property(none/all/indent)	变换的属性
duration	转换持续时间，单位 s/ms
timing-function(ease/liner/ease-in/ease-out/ease-in-out/cubic-bezier)	变换速率
delay	转换开始执行的时间，事件触发后多久执行

transition 连写格式：

 transition: property duration animation type delay 

注意:大众型浏览器 IE 全家都是不支持，另外由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法，所以在应用transition时我们有必要加上各自的前缀

3、animation动画

属性	含义
@keyframes	定义动画名 ，以及该名称包含的动画需要变化的属性及内容
animation-name	元素绑定动画名（@keyframes定义的动画名）
animation-duration	动画持续时间
animation-timing-function	动画变换速率
animation-delay	开始时间。触发动画后多久开始动画
animation-interation-count	循环播放次数。（infinite 是无限次）
animation-direction	动画运动方向 （normal/ alternate: 默认值为normal，如果是normal动画每次循环都是向前播放的，也就是每次都是从0%播放到100%。 另一个值是alternate，设定animation-direction为alternate，那么就会从0%播放到100%后就会从100%播放到0%。结合 animation-interation-count:infinite，可以形成动画来回循环播放。例如实现“如何使一个小球来回无限运动”）
animation-play-state(running/pause)	动画的播放状态(其中running是默认值，就是在播放。而paused就是暂停播放。而当动画暂停播放后，再重新设置为running的时候，就会从原来的位置重新播放。)

样例:

.animation{
    width: 300px;
    height: 300px;
    position: absolute;
    font-size: 22px;
    color: white;
    background-color: brown;
    animation: ccchange 3s ease alternate infinite;
}
 
@keyframes ccchange {
    0%{
        width: 300px;
        height: 300px;
        background-color: brown;
    }
 
    40%{
        width: 500px;
        height: 500px;
        background-color: seagreen;
    }
 
    60%{
        width: 400px;
        height: 400px;
        background-color: coral;
    }
 
    100%{
    }
}