一步步教你用HTML5 SVG实现动画效果

最新推荐文章于 2024-04-07 08:40:45 发布

编程鸭

最新推荐文章于 2024-04-07 08:40:45 发布

阅读量5.2k

点赞数 3

分类专栏：互联网 JavaScript JavaScript Promise 编程语言前端文章标签：前端 IT 编程程序员

本文链接：https://blog.csdn.net/weixin_44811417/article/details/92663932

版权

本文详细介绍了如何使用HTML5 SVG和CSS创建动态的填充过渡动画。通过理解SVG的路径、填充和描边属性，以及CSS的填充过渡效果，你可以创建出富有视觉吸引力的动画。文章还探讨了BEM命名规范，以及代码质量和可维护性的原则。

摘要由CSDN通过智能技术生成

SVG是一种基于XML的，用于定义缩放矢量图形的标记语言。它允许你通过在2D平面中确定的一组点来绘制路径、曲线和形状。此外你还可以通过在这些路径上添加动态属性（例如笔触，颜色，粗细，填充等）来生成动画。

从2017年4月起，CSS Level 3 填充和描边模块(https://www.w3.org/TR/fill-stroke-3/)开始支持从外部样式表设置SVG颜色和填充图案，而不是在每个元素上设置属性。在本教程中，我们将会使用简单的纯十六进制颜色，不过填充和描边属性也支持图案，渐变和图像作为值。

注意：访问Awwwards( https://www.awwwards.com/)网站时，你需要把浏览器宽度设置为1024px或更高的才能更好的下查看动画笔记显示。

演示链接 (https://marina-ferreira.github.io/smashing-magazine-note-display-demo/)
源代码 (https://github.com/marina-ferreira/smashing-magazine-note-display-demo)

文件结构

让我们从在终端中创建文件开始：

1?  mkdir note-display
2?  cd note-display
3?  touch index.html styles.css scripts.js

HTML
这是连接css和js文件的初始模板：

 1<html lang="en">
 2<head>
 3  <meta charset="UTF-8">
 4
 5  <title>Note Display</title>
 6
 7  <link rel="stylesheet" href="./styles.css">
 8</head>
 9<body>
10  <script src="./scripts.js"></script>
11</body>
12</html>

每个note元素都包含一个列表项：li用于保存circle，note值及其label。

.circle_svg是一个SVG元素，它包含两个元素。第一个是要填充的路径，第二个用来为动画作准备。

注释分为整数和小数，所以可以把它们设定为不同大小的字体。 label 是一个简单的<span>。把所有得这些元素放在一起看起来像这样：

 1<li class="note-display">
 2  <div class="circle">
 3    <svg width="84" height="84" class="circle__svg">
 4      <circle cx="41" cy="41" r="38" class="circle__progress circle__progress--path"></circle>
 5      <circle cx="41" cy="41" r="38" class="circle__progress circle__progress--fill"></circle>
 6    </svg>
 7
 8    <div class="percent">
 9      <span class="percent__int">0.</span>
10      <span class="percent__dec">00</span>
11    </div>
12  </div>
13
14  <span class="label">Transparent</span>
15</li>

cx和cy属性定义圆的x轴和y轴中心点。 r属性定义其半径。

你可能已经注意到类名中的下划线/破折号模式。这是BEM（block element modifier）(http://getbem.com/naming/)，分别代表 block, element 和 modifier。它是使元素命名更加结构化、有条理和语义化的一种方法。

推荐阅读：什么是BEM以及为什么需要它(https://www.smashingmagazine.com/2018/06/bem-for-beginners/)

为了完成模板结构，让我们将四个列表项包装在无序列表元素中：

图：无序列表包装器拥有四个li子元素

 1<ul class="display-container">
 2  <li class="note-display">
 3    <div class="circle">
 4      <svg width="84" height="84" class="circle__svg">
 5        <circle cx="41" cy="41" r="38" class="circle__progress circle__progress--path"></circle>
 6        <circle cx="41" cy="41" r="38" class="circle__progress circle__progress--fill"></circle>
 7      </svg>
 8
 9      <div class="percent">
10        <span class="percent__int">0.</

最低0.47元/天解锁文章

编程鸭

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
一步步教你用HTML5 SVG实现动画效果

SVG是一种基于XML的，用于定义缩放矢量图形的标记语言。它允许你通过在2D平面中确定的一组点来绘制路径、曲线和形状。此外你还可以通过在这些路径上添加动态属性（例如笔触，颜色，粗细，填充等）来生成动画。从2017年4月起，CSS Level 3 填充和描边模块(https://www.w3.org/TR/fill-stroke-3/)开始支持从外部样式表设置SVG颜色和填...
复制链接

扫一扫