最近，在看 LPL 较量的时候，看到这样一个有意思的六芒星能力图动画：
明天，咱们就来应用纯 CSS 实现这样一个动画成果！
实现背景网格
对于如下这样一个背景网格，最好的形式当然必定是切图。
如果肯定要应用 CSS，勉强也能做，这就波及了不规则图形边框成果，咱们有一些形式能够实现，能够参考一下这几篇文章：
- 古代 CSS 高阶技巧，不规则边框解决方案
- 有意思！不规则边框的生成计划
这里，咱们能够应用 drop-shadow()，大抵实现一下这个成果，外围步骤：
- 通过叠加实现一个六边形图形
- 利用
drop-shadow()实现边框成果
用动图演示一下，大略是这样：
代码如下：
<div></div>div { position: relative; width: 150px; height: 260px; background: #fff; filter: drop-shadow(0 0 .5px #333) drop-shadow(0 0 .5px #333) drop-shadow(0 0 .5px #333); &::before, &::after { content: ""; position: absolute; inset: 0; background: inherit; } &::before { transform: rotate(60deg); } &::after { transform: rotate(-60deg); }}成果如下：
只须要多叠加几次，配合 3 条直线，整个背景就能很快的画进去，残缺的代码，应用 SASS 示意如下：
<div class="g-container"> <ul class="g-bg"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div>.g-container { position: relative; width: 300px; height: 300px;}.g-bg { position: absolute; inset: 0; &::after { content: ""; position: absolute; inset: 20px 0; z-index: 6; background: linear-gradient(transparent, transparent calc(50% - .5px), #333 calc(50% - .5px), #333 calc(50% + .5px), transparent calc(50% + .5px), transparent), linear-gradient(120deg, transparent, transparent calc(50% - 1px), #333 calc(50% - .5px), #333 calc(50% + .5px), transparent calc(50% + 1px), transparent), linear-gradient(240deg, transparent, transparent calc(50% - 1px), #333 calc(50% - .5px), #333 calc(50% + .5px), transparent calc(50% + 1px), transparent); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); } li { --rotate: 0deg; position: absolute; width: 150px; height: 260px; translate: -50% -50%; left: 50%; top: 50%; background: #fff; filter: drop-shadow(0 0 .5px #333) drop-shadow(0 0 .5px #333) drop-shadow(0 0 .5px #333); &::before, &::after { content: ""; position: absolute; inset: 0; background: inherit; } &::before { transform: rotate(60deg); } &::after { transform: rotate(-60deg); } } @for $i from 1 to 5 { li:nth-child(#{$i}) { z-index: #{$i}; width: #{(1 - $i / 5) * 150}px; height: #{(1 - $i / 5) * 260}px; } }}背景网格就进去了：
实现六芒星款式
有了背景图，接下来，咱们只须要实现六芒星效果图加上动画即可。
要实现这么一个图形其实非常简单，利用 clip-path 裁剪即可：
只须要两步：
- 实现一个突变图形
- 利用
clip-path进行裁剪
外围代码：
<div></div>···div {
background: linear-gradient(rgba(241,94,174, .8), rgba(255, 152, 0, .8));clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);}
当然，咱们能够把坐标点当成参数，把坐标点计算好后，通过内联标签的 `style` 传递进 CSS 中，这样，就能够展现不同基于的六芒星的图案。像是这样：<div style="--polygon: 30% 10%, 75% 1%, 94% 51%, 71% 94%, 44% 60%, 8% 50%"></div>
<div style="--polygon: 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%"></div>
···
div { background: linear-gradient(rgba(241,94,174, .8), rgba(255, 152, 0, .8)); clip-path: polygon(var(--polygon));}这样就能疾速失去不同的图形：
残缺的代码，你能够戳这里：CodePen Demo -- LPL Player Hexagram Ability Chart Animation
借助 CSS @property 实现动画 Hover 成果
最初一步，咱们只须要实现 Hover 动画即可。
这里，咱们须要借助 CSS @property 实现。
对于 CSS @property，还不太理解的同学，能够参考：CSS @property，让不可能变可能。
这里其实就是一个饼图动画，首先，咱们来实现一个动静的饼图动画。
假如，咱们有如下构造：
<div></div>.normal { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(yellowgreen, yellowgreen 25%, transparent 25%, transparent 100%); transition: background 300ms; &:hover { background: conic-gradient(yellowgreen, yellowgreen 60%, transparent 60.1%, transparent 100%); }}将会失去这样一种成果，因为 conic-gradient 是不反对过渡动画的，失去的是一帧向另外一帧的间接变动：
好，应用 CSS @property 自定义变量革新一下：
@property --per { syntax: '<percentage>'; inherits: false; initial-value: 25%;}div { background: conic-gradient(yellowgreen, yellowgreen var(--per), transparent var(--per), transparent 100%); transition: --per 300ms linear; &:hover { --per: 60%; }}看看革新后的成果，借助 CSS @property 自定义变量，咱们可能实现过往无奈实现的过渡动画成果：
CodePode Demo -- conic-gradient 配合 CSS @property 实现饼图动画
在本 DEMO 中，咱们会使用一样的技巧，只不过，咱们会把 CSS @property 自定义变量使用在 mask 上，通过 mask 的遮罩成果，实现 Hover 过程的展现动画。
对于 mask，还不太理解的同学，能够参考：微妙的 CSS MASK。
外围代码如下：
<div class="g-content" style="--polygon: 43% 36%, 69% 12%, 99% 50%, 71% 94%, 30% 90%, 5% 50%"></div>@property --per { syntax: '<percentage> | <angle>'; inherits: false; initial-value: 360deg;}.g-content { position: absolute; inset: 20px 0; z-index: 10; mask: conic-gradient(#000, #000 var(--per), transparent var(--per), transparent 360deg); &:hover { animation: hoverPie 600ms ease-in-out; } &::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(241,94,174, .8), rgba(255, 152, 0, .8)); clip-path: polygon(var(--polygon)); }}@keyframes hoverPie { 0% { --per: 0deg; } 100% { --per: 360deg; }}这里：
- 咱们用元素的
&::before实现了咱们上述说的六芒星款式图 - 利用元素自身的
mask配合一个 CSS @property 属性实现遮罩动画
整体 Hover 下来的成果如下：
咱们把上述所有的内容交融一下，就能失去残缺的成果：
至此，咱们就大抵还原了整个成果，撒花！
残缺的代码，你能够戳这里：CodePen Demo -- LPL Player Hexagram Ability Chart Animation
最初
好了，本文到此结束，心愿本文对你有所帮忙 :)
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，继续更新，欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。