现代CSS：纯 CSS 实现路径动画

日常开发中，Loading 动画及加载进度应该是使用最广泛的。实现它们的方案很多，包括Gif图、CSS动画、APNG、Lottie等。本文将介绍一种使用 CSS 自定义属性 @property、conic-gradient()、offset-path 以及表情符号实现的路径动画。

1.核心知识点介绍

1.1.@property

引用 MDN 的定义：

@property CSS at-rule是CSS Houdini API 的一部分，它允许开发者显式地定义他们的CSS 自定义属性, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。
@property 规则提供了一个直接在样式表中注册自定义属性的方式，而无需运行任何 JS 代码。有效的 @property 规则会注册一个自定义属性，就像 CSS.registerProperty (en-US) 函数被使用同样的参数调用了一样。

基础语法：

@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

浏览器兼容性：

1.2.conic-gradient()

conic-gradient() 创建一个由渐变组成的图像，渐变的颜色围绕一个中心点旋转（而不是从中心辐射）进行过渡。锥形渐变的例子包括饼图和色轮 (en-US)

conic-gradient() 即锥形渐变，它由起始角度、中心位置、角渐变断点三个部分组成，其中起始角度和中心位置都是可以省略的。

基础语法：

conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )

浏览器兼容性：

conic-gradient() 已经被所有现代浏览器所支持。

1.3.offset-path

offset 常见属性：

offset-distance：指定元素沿 offset-path 路径运动的距离，可以是数值或者百分比单位，100% 则表示把所有的路径都跑完了。
offset-position：定义元素的 offset-path 初始位置，类似于属性 background-position。
offset-anchor：指定 offset-path 路径框内的原点，其属性值和 transform-origin 类似。
offset-rotate：定义元素沿 offset-path 路径的角度，默认是 auto，表示自动计算当前路径的切线方向，并朝着这个方向前进。

path 的路径参数:

M=moveto
L=lineto
H=horizontal lineto
V=vertical lineto
C=curveto
S=smooth curveto
Q=quadratic Bézier curve
T=smooth quadratic Bézier curveto
A=elliptical Arc
Z=closepath

浏览器兼容性：

offset: path() 也已被所有现代浏览器所支持。

2.实现方案

2.1.创建页面框架

使用 html:5 和 div.circle>div.indicator 快速创建页面框架。

2.2.增加基础样式

使用 conic-gradient() 增加背景色，使用伪元素 ::before 增加了圆环效果，同时给 .indicator 元素增加了 offset 路径，并设置 --size: min-content 以适应内容大小。

:root {
  --size: 200px; 
  --p: 10%;
}
@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 10%;
}
body {
  display: grid;
  place-items: center;
}
.circle {
  position: relative;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient( red calc(-60% + var(--p)), rgb(224, 187, 77) var(--p), #eee 0); 
  cursor: progress;

  .indicator {
    --size: min-content;
    width: var(--size); 
    aspect-ratio: 1;
    offset: path("M 100,0 a 100 100 0 1 1 -.1 0 z");
    offset-distance: var(--p);
    font: 43pt serif;
    transform: rotateY(180deg) translateX(-6px);
  }

  &::before {
    position: absolute;
    inset: 20px; 
    content: '::before';
    text-align: center;
    line-height: 160px;
    border-radius: inherit;
    background: #fff;
  }
}

效果如下：

2.3.增加动画样式

动画实现主要依赖 --p 属性的变化，记得使用 @property 来定义。

.circle {
  animation: offsetDis 2s linear infinite;

  .indicator {
    animation: offsetDis 2s linear infinite;
  }
}

3.效果预览

载

Video.js (当前版本 v7.18.1)提供了下列的一些使用方法，但是你应该选择最适合你使用的方式去使用。

Video.js CDN

我们在Fastly上提供了video.js所需必须的足够多的文件，通过引用这些托管文件可能是使用video.js最简单的方法，你只需要在你的页面按照下列方式使用即可。

<head>
  <link href="https://vjs.zencdn.net/7.18.1/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="MY_VIDEO_POSTER.jpg"
    data-setup="{}"
  >
    <source src="MY_VIDEO.mp4" type="video/mp4" />
    <source src="MY_VIDEO.webm" type="video/webm" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

  <script src="https://vjs.zencdn.net/7.18.1/video.min.js"></script>
</body>

通过NPM安装

对于更高级的工程可以使用NPM进行安装

$ npm install --save-dev video.js

对IE浏览器的支持

由于IE浏览器已经基本被市场淘汰，所以这块内容不做翻译，如果真的遇到IE浏览器的问题，建议大家访问官网（https://videojs.com/getting-started/#internet-explorer-support）解决

谷歌分析（Google Analytics）

我们内置了一个精简的谷歌分析器，用于通过跟踪和分析用户从CDN加载的随机百分比来了解当前使用的浏览器，以及一些其他有用的指标属性，如系统和设备。如果你想禁用分析，你可以通过设置下面的全局属性即可。

window.HELP_IMPROVE_VIDEOJS=false;

注意：v7不会发送任何数据，而v6.8及以上版本尊重浏览器的不跟踪标志。

下载的包是什么？

如果您已经下载了其中的一个版本，或者通过包管理器安装了它，您可能会注意到其中的内容与Github上提供的源代码略有不同。前者只包含使用Video.js所需的编译文件，而后者包含用于创建这些文件的源代码。

结构目录

如果你下载了了一个发行版或者通过包管理工具安装了一个video.js，就会发现下面的目录结构：

Video.js/
├── alt
│   ├── video.core.js
│   ├── video.core.min.js
│   ├── video.core.novtt.js
│   ├── video.core.novtt.min.js
│   ├── video.novtt.js
│   └── video.novtt.min.js
├── examples/
├── font
│   ├── VideoJS.svg
│   ├── VideoJS.ttf
│   └── VideoJS.woff
├── lang/
├── video-js-<span class="vjs-version">$LATEST_VERSION$</span>.zip
├── video-js.css
├── video-js.min.css
├── video.cjs.js
├── Video.es.js
├── Video.js
└── video.min.js

该包包含了Video.js在生产站点上使用所需的所有内容。默认情况下，我们将Video.js与Mozilla的VTT.js捆绑在一起。如果你不需要VTT.js功能，你可以使用Video.js的一个副本，它不包括VTT.js。它们的名称中有novtt，可以在alt/目录中找到。font/包含了Videojs font项目中生成的所有图标字体文件。Lang /包含所有生成的翻译文件。

源码

你可以在git仓库中中发现video.js的所有源码。它包含了所有用以构建video.js生产版本，以及开发工具和案例所必须的工具和源文件。

因为在互联网上，很多包管理都是使用项目根目录下的JSON配置文件。大多重要的东西都在src/和build目录下。src/目录下包含了所有的用户的js源文件和一些基础样式。build目录包含了所有grunt.js构建工具，构建任务的源文件

构建工具

使用前你需要先安装Node.js,详情可以查看CONTRIBUTING.md（https://github.com/videojs/video.js/blob/main/CONTRIBUTING.md#contributing-code）

客制化

直接使用Video.js是可以的，但是如果你想做更好播放器，那么你也可以客制化更好的客制化你的插件和样式。

皮肤

播放器皮肤完全由HTML和CSS构建，包括使用Flash和YouTube等其他播放器时。

皮肤的改变可以简单到将播放按钮置于中心(你可以将“vjs-big-play-centered”类添加到你的视频标签中)，也可以复杂到创建全新的布局。我们已经建立了一个代码依赖的项目，在那里你可以探索不同的变化。

主页主题

主页中的主题来自Videojs主题库。要在您的播放器中使用它们，请导入CSS，然后将相关的类添加到您的视频标签。例如，如果你想使用City主题，你可以这样设置你的HTML:

<!-- In the head of your document with your other CSS includes... -->
<!-- Video.js base CSS -->
<link
  href="https://unpkg.com/video.js@7/dist/video-js.min.css"
  rel="stylesheet"
/>

<!-- City -->
<link
  href="https://unpkg.com/@videojs/themes@1/dist/city/index.css"
  rel="stylesheet"
/>

<!-- Then, in the player -->
<video class="video-js vjs-theme-city" ...></video>

你的设计

很好的开始是设计你自己的video.js皮肤，我们建议使用CSS的级联方面来简单地覆盖你想定制的设计部分。

插件

Video.js本身非常简单。它支持基本的视频和音频播放特性，并确保它们在不同的播放技术(“techhs”)之间工作相同。任何更高级的功能都是作为插件构建的，包括播放列表、分析、广告，以及对HLS和DASH等高级格式的支持。查看插件页面，看看有什么可用的。

插件库：https://videojs.com/plugins/

用JavaScript实现文字逐步展现的动画效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript文字动画</title>
</head>
<body>
<div class="container"></div>
</body>
<script>
const containerEI=document.querySelector(".container");
const careers=["跟着我","每天学习一点点","让你不再枯燥","不再孤单"];
let careerIndex=0;
let characterIndex=0;
updateText();
function updateText() {
characterIndex++;
containerEI.innerHTML=`
<h1>JavaScript文字动画${careers[careerIndex].slice(0,characterIndex)}</h1>
`;
if(characterIndex===careers[careerIndex].length){
careerIndex++;
characterIndex=0;
}
if(careerIndex===careers.length){
careerIndex=0;
}
setTimeout(updateText,400);
}
</script>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
background-color: #fd946a;
font-family: "Permanent Marker", cursive;
}
</style>
</html>

总结思考

学习点：
1、document.querySelector()返回container元素的信息
2、innerHTML：更改html元素的内容，可以设置或返回表格行的开始和结束标签之间的HTML
3、slice(参数1，参数2) :从已有的数组中返回选定的元素
参数1：从何处开始选取
参数2：从何处结束选取
4、setTimeout()：定时执行一个函数或指定的一段代码

使用JavaScript完成文字的逐步展现，可以做一个简短的动画，让界面更加生动有趣。

在线咨询

上一篇：3分钟，10行代码教你写Python爬虫
下一篇：国内外主流数字孪生解决方案巡礼

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

现代CSS：纯 CSS 实现路径动画

1.核心知识点介绍

2.实现方案

3.效果预览

载

Video.js CDN

通过NPM安装

对IE浏览器的支持

谷歌分析（Google Analytics）

下载的包是什么？

结构目录

源码

构建工具

客制化

主页主题

你的设计

插件

总结思考

您的项目需求