1.为了更好的向前兼容不同的浏览器,编写CSS3时都有哪些前缀?分别对应什么浏览器?
浏览器引擎前缀,是一些放在CSS属性前的小字符串,用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。常用前缀和浏览器对应如下:
当需要使用浏览器引擎前缀(vendor-prefix)时,最好是把带有各种前缀的写法放在前面,然后把不带前缀的标准的写法放到最后。比如:
.box {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
2.说说你理解的伪类和伪元素分别是什么?
伪类是基于元素的特征而不是他们的id、class、属性或者内容。一般来说,元素的特征是不可以从DOM树上推断得到的,而且其是动态的,当用户和DOM进行交互的时候,元素可以获得或者失去一个伪类。(这里有一个例外,就是:first-child
和:lang
是可以从DOM树中推断出来的。)
CSS的现有标准中,伪类包括:
-
:first-child
,应用第一个子元素 -
:link
,应用未访问过的链接 -
:visited
,应用已访问过的链接 -
:hover
,应用鼠标指针悬浮的元素 -
:active
,应用活动的链接 -
:focus
,应用聚焦的输入元素 -
:lang
,伪类将应用于元素带有指定lang的情况,不常用
伪元素是创造文档树之外的对象。例如文档不能提供访问元素内容第一字或者第一行的机制。伪元素还提供一些在源文档中不存在的内容分配样式,例如:before
和:after
能够访问产生的内容。伪元素的内容实际上和普通DOM元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。
CSS的现有标准中,伪元素包括:
-
:first-letter
,伪元素的样式将应用于元素文本的第一个字(母) -
:first-line
,伪元素的样式将应用于元素文本的第一行 -
:before
,在元素内容的最前面添加新内容 -
:after
,在元素内容的最后面添加新内容
3.分清 Transform
、Transition
、Animations
三兄弟,并阐述它们分别的用处?
Transform
、Transition
、Animations
是动画三兄弟。能给你的界面加上炫酷的效果。
- CSS
transform
属性允许你旋转,缩放,倾斜或平移给定元素。
div {
border: solid red;
transform: translate(30px, 20px) rotate(20deg);
width: 140px;
height: 60px;
}
-
CSS
transition
提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色,按照一定的曲线速率变化。CSS
transitions
可以决定哪些属性发生动画效果 (明确地列出这些属性),何时开始 (设置 delay),持续多久 (设置 duration) 以及如何动画 (定义timing function,比如匀速地或先快后慢)。
div {
transition: <property> <duration> <timing-function> <delay>;
}
- CSS
animations
使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。
通过使用@keyframes
建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。
p {
animation-duration: 3s;
animation-name: myfirst;
}
@keyframes myfirst /*定义动画名*/
{
0% {background:red; left:0px; top:0px;} /*定义起始帧样式,0%可以换成from*/
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;} /*定义结束帧样式,100%可以换成to*/
}
}
总结来讲,transform
描述了元素静态样式。而transition
和 animation
都能实现动画效果。
这篇文章对后面两种动画效果进行了比较,总结如下:
- 触发条件不同。transition通常和hover等事件配合使用,由事件触发。animation则和gif动态图差不多,立即播放。
- 循环。 animation可以设定循环次数。
- 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性, transition中所有样式属性都要一起变化。