WEB前端教程：绘制一个雷达图

通过绘制雷达图学习掌握 CSS 渐变，复习伪元素的使用

课程目标

通过绘制雷达图学习掌握 CSS 渐变，复习伪元素的使用
初步接触 CSS transform 2D 变形了解如何移动、旋转、缩放和倾斜元素,
初步认识 CSS 动画，理解动画中关键帧的概念,了解动画帧添加和使用

阅读学习

渐变

编码一

按照示例图 (opens new window)，利用 CSS 重复径向渐变模拟一个纸张背景效果图

编码二

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>纯css绘制雷达图或者是扫描图</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <!-- partial:index.partial.html -->
    <div class="radar"></div>
    /* * 主要用来加深对渐变色属性的理解 */
    <!-- partial -->
  </body>
</html>

参考如下示例图，应用 CSS 到上述给出的 HTML 模板代码实现绘制一个静态雷达图，先不要着急后面我们实现让它动起来的效果。

用类名为radar的主元素绘制雷达图的同心圆和十字线，颜色为#3eaf7c,用伪元素绘制扫描区域
应用重复径向渐变，每隔 1em 就画出一个圆，形成一组同心圆
用径向渐变画出同心圆中最靠近圆心的那个小圆，它的直径是 1em，从圆心开始向外的 0.95em 都是透明色，然后 0.95em 至 1em 是绿色，再往外又是透明色
应用线性渐变画出雷达图的绿色十字线
然后应用线性渐变给伪元素绘制形成扫描区域，注意要使用圆角属性让它是扇形的。

动画

编码三

基于上面的任务，然后给这个雷达图添加动画效果,最终实现效果如下

应用 trasform 让扫描区域绕着圆心进行旋转
添加两个动画帧，开始帧旋转角度为 0°，结束帧选转角度为 360°

提交

把你的代码提交到 Github ，把 Github 地址提交到作业里，如果有余力的同学，可以学习如何在 Github 中预览你的 HTML 代码，并提交预览地址。

这里有很多方法(opens new window)

总结

找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：

日期，今天的学习总用时，今天学习的目标是什么，是否达成
哪些东西今天了解得比较透彻，说说自己的理解
哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-10-20 11:33
阅读 ( 948 )
分类：WEB前端开发

WEB前端教程：绘制一个雷达图

课程目标

阅读学习

渐变

编码一

编码二

动画

编码三

提交

总结

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »