前端基础面经

    技术2025-08-10  11

    1、如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)

    大多数显示器的默认频率是60hz(即一秒刷新60次),每刷新一次时间需要1000ms/60=16.7ms,所以理论上最小时间间隔是16.7ms。

    2、CSS3动画(简单动画的实现,如旋转等)。

    (1)依靠CSS3中提出的三个属性:transition、transform、animation。 (2)transition:设置四个过渡属性,transition: property duration timing-function delay;属性名称、周期时间、速度曲线、开始时间。 (3)transform:对元素进行旋转、缩放、移动或倾斜,包含rotate(angle)、scale(x,y)(2D缩放)、skew(angle)(倾斜角度)、translate(平移)。 (4)animation:动画定义了动作的每一帧(@keyframes)有什么效果,包括animation-name,animation-duration(执行时间)、animation-timing-function("ease",动画的速度曲线)、animation-delay(0,动画开始时间)、animation-iteration-count(1,播放次数)、animation-direction("normal",动画是否在下一周期逆向地播放)。

    当在 @keyframes 中创建动画时,必须把它捆绑到某个选择器,否则不会产生动画效果。

    必须规定以下两项动画属性,即可将动画绑定到选择器:

    规定动画的名称规定动画的时长

    示例:

    @keyframes myfirst { from {background: red;} to {background: yellow;} } div { animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari 和 Chrome */ -o-animation: myfirst 5s; /* Opera */ }

    3. link与@import的区别。

    建议使用link标签,慎用@import方式。

    (1)功能:@import只能引入css样式表;link标签不仅可以引入css文件,还可以设置rss、rel属性。

    (2)兼容性:@import在IE5+才能使用;link兼容性更好,不存在兼容性问题。

    (3)加载顺序:@import在页面全部加载完才加载css文件;link则与页面同时加载css文件。

    (4)DOM操作:js不能通过DOM操作插入@import;但是可以插入link标签。

     

     

    Processed: 0.008, SQL: 9