今日一题：

下面的CSS代码中，定义了一个帧动画，请问该帧动画能否正常流畅的执行？

@keyframesmove {50% {/* 改变自定义变量的值 */--x:100px;/* 改变元素的背景颜色 并使用!important */background: yellow!important;}}.d{/* 定义一个自定义变量 */--x:0px;width:100px;height:100px;/* 初始背景颜色red */background: red;/* 自定义变量决定元素的偏移量 */transform:translateX(var(--x));/* 调用动画 */animation: move2sinfinite;}

答案和解析可在文章底部查看。

今日面试题：

1、 常见的HTML全局属性 ( global attribute ) 有哪些？

① class

为元素设置类名，多个类名之间以空格分隔。

② id

为元素设置唯一标识符id，该id要求在当前文档内唯一。

③ style

为元素设置行内样式。

④ title

为元素设置内容的相关信息文本，指针悬浮时会显示。可用于显示因为字数过多，被截取的文本。

⑤ style="line-height: inherit;orphans: 4;margin-top: 0.8em;margin-bottom: 0.8em;white-space: pre-wrap;caret-color: rgb(51, 51, 51);color: rgb(51, 51, 51);font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, "Segoe UI Emoji", sans-serif;font-size: 16px;letter-spacing: normal;text-align: start;background-color: rgb(255, 255, 255);">为元素设置自定义属性，存储元素特定数据，数据可在JS中读取。

⑥ draggable

为元素设置是否可拖拽，即是否可以使用Drag and Drop API。

⑦ tabindex

为元素设置是否可获取焦点，值为一个整数，如果值为负数，表示元素可聚焦，但不能通过顺序键盘导航到达；值为0，表示元素可聚焦，且可以通过顺序键盘导航到达，但具体顺序取默认顺序；值为正数，表示元素可以可聚焦，且可以通过顺序键盘导航到达，具体顺序取决于值的相对大小顺序。如果多个元素的值相同，则顺序取决于元素在文档中的先后顺序。

⑧ autofocus

为元素设置在页面加载时自动聚焦。

⑨ hidden、lang、contenteditable等其他全局属性。

2、谈谈Canvas和SVG两者的区别

① 基本概念

Canvas：是HTML5新增用于绘制2D图形的API，可以通过JS操作相关的API，在对应的<canvas>元素上，绘制图形。输出的是标量图形，在被放大后会出现失真和锯齿。

SVG：是一种标准的图形格式，基于XML的矢量图形格式，通过在 HTML 中编写 SVG 代码，绘制图形。输出的图像能够被无限放大而不失真或降低质量。

② 绘制方式

Canvas：使用的是基于像素绘制的方式，每次操作都会直接修改画布上的像素，不保留绘制图形的结构信息，只保留最终的像素结果。也就是说如果要修改图像上的某一块区域，需要重新绘制整个画布，因为没有保留该区域的独立信息。

SVG：使用的是矢量绘制的方式，矢量图形通过数学公式描述图形的形状和位置，每个图形元素都是独立的对象，保存在 DOM 树中，可以通过 CSS 和 JS 对单独的图形元素进行操作和修改。

③ 绘制性能

Canvas：由于是基于像素的绘制方式，修改图形时直接操作像素，因此在复杂的动画和大量图形操作等高频率重绘的场景下，性能较好。

SVG：在复杂的动画和大量图形操作等高频率重绘的场景下，性能不如Canvas，因为每个图形元素都是独立的 DOM 节点，而操作DOM需要一定的性能开销。但在绘制静态图形、无需频繁更新图形时，性能较好。

④ 操作复杂性

Canvas：提供了一系列API，每次更新图形，都需要通过JS调用API来操作重绘，越复杂的图形，越需要编写复杂的JS代码。而且只能对整体图形进行重绘，无法对单个图形元素进行操作。

SVG：通过 XML 描述图形，每次更新图形，可以直接在修改相应的SVG代码，语法相对简单，并且可以通过CSS和JS直接对单个图形元素进行操作。

⑤ 可交互性

Canvas：只保留最终的像素结果，不存在单独的图形对象，无法只对单个图形元素进行交互、事件监听等操作。可以结合图形坐标和鼠标点击坐标，实现一定的交互。

SVG：每个图形元素都是独立的对象，独立的DOM节点，可以直接为其添加事件监听器，与元素进行交互。

⑥ 兼容性

Canvas：是HTML5标准的一部分，现代浏览器和大多数移动设备都支持。可以通过 JavaScript 检测当前浏览器是否支持 Canvas。

functionisCanvasSupported(){constelem =document.createElement('canvas');return!!(elem.getContext && elem.getContext('2d'));}

SVG：是一种标准的图形格式，现代浏览器和大多数移动设备都支持。

functionisSVGSupported(){return!!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;}

⑦ 适用场景

Canvas：适用于需要高性能绘图的场景，如游戏开发、实时数据可视化、大量动画效果等。

SVG：适用于需要高质量图形和交互的场景，如图标、图表、简单动画、地图等。

3、页面绘制一个可点击的圆形区域的方法有哪些？

① border-radius

border-radius用于设置元素的圆角，如果元素的四个圆角的值为元素宽高的一半，则元素区域会变成圆形。

.d{width:100px;height:100px;border-radius:50%;background-color: green;}

② SVG

SVG提供了一个<circle>元素，用于创建圆形。(cx, cy)表示圆心的坐标，r表示半径，fill表示图形颜色。

<svgwidth="100"height="100"onclick="alert('Circle clicked!')"><circlecx="50"cy="50"r="50"fill="green"style="cursor: pointer;"/></svg>

③ <map>和<area>

<map>和<area>标签是 HTML 中用于创建图像映射（Image Map）的标签。通过与<img>图像标签结合使用，允许在一张图片上定义一个或多个可点击的区域。

<map>的name属性指定图像映射的名称，该名称要与目标图像的usemap属性相同。

<area>的shape属性指定可点击区域的形状，coords属性指定圆心和半径。

<imgsrc="../assets/circle2.jpg"style="width: 100px;height: 100px;"usemap="#circlemap"alt="一个包含圆形的图片，宽高为100*100"><mapname="circlemap"><areashape="circle"coords="50,50,50"href="javascript:void(0);"onclick="alert('Circle clicked!')"alt="Circle"></map>

今日一题答案：不能

实际动画效果：

解析：

该题目主要考察的是对CSS中帧动画中@keyframes规则的掌握情况。考察的点有两个：关键帧中的!important和关键帧中的自定义属性。

① 关键帧中的!important

CSS规范中明确规定在@keyframes的关键帧中，如果在样式属性后面使用!important，将会导致该属性被忽略，不起作用。因为关键帧动画的工作机制与普通的CSS样式规则不同，关键帧在动画执行时会被浏览器逐帧计算和渲染，为了确保动画的平滑和一致性，浏览器需要完全控制这些关键帧的样式计算过程。

因此本题代码中的background: yellow !important;属性将会被忽略，执行动画过程中元素的背景颜色不会发生改变。

② 关键帧中的自定义属性

CSS的自定义属性是指以--开头的声明的变量，其可以通过var(--属性名)的形式调用。自定义属性可以在关键帧中使用，可以被正常渲染。

如果在关键帧中通过修改自定义属性的值，从而修改元素的样式，虽然样式会正常发生改变，但是无法实现平滑的动画效果。因为CSS 自定义属性的值对于浏览器来说相当于一个字符串，字符串的变化属于是不连贯的属性，浏览器无法对其进行插值计算，无法补全中间的关键帧，也就无法实现平滑的动画效果。