英雄联盟玩家六点星能力图动画是怎么制作的？
时间：2023-04-05 18:57:40
HTML5
最近在看一场LPL比赛的时候，看到了这么一个有趣的卦象动画：今天我们就用纯CSS来实现这样的动画效果！实现背景网格对于像下面这样的背景网格，最好的办法当然是裁剪图片。如果一定要用CSS，勉强可以做到。这涉及不规则图形边框的效果。我们有一些方法可以实现它。可以参考这些文章：现代CSS进阶技巧，不规则边框的解决方法很有趣！这里，我们可以使用drop-shadow()来大致实现这个效果。核心步骤：通过叠加实现一个六边形图形，使用drop-shadow()实现边框效果。这是代码：
div{position:relative;宽度：150px；高度：260px；背景：#fff；过滤器：阴影（00.5px#333）阴影（00.5px#333）阴影（00.5px#333）；&::before,&::after{内容：“”；位置：绝对；插图：0；背景：继承；}&::before{变换：旋转（60度）；}&::after{变换：旋转（-60deg）；}}效果如下：只需要叠加几次，用3条直线，就可以快速绘制出整个背景，完整的代码，用SASS表示如下：
.g-container{位置：相对；宽度：300px；高度：300px；}.g-bg{位置：绝对；插图：0；＆::之后{内容：“”;位置：绝对；插图：20px0；z-指数：6；背景：线性渐变（透明，透明计算（50%-.5px），#333计算（50%-.5px），#333计算（50%+.5px），透明计算（50%+.5px），透明）、线性渐变（120deg、透明、透明计算（50%-1px）、#333计算（50%-.5px）、#333计算（50%+.5px）、透明计算（50%+1px）,透明),线性渐变(240deg,透明,透明计算(50%-1px),#333计算(50%-.5px),#333计算(50%+.5px),透明计算(50%+1px），透明的）;剪辑路径：多边形（25%0%、75%0%、100%50%、75%100%、25%100%、0%50%）；}li{--rotate:0deg;位置：绝对；宽度：150px；高度：260px；吨翻译：-50%-50%；左：50%；顶部：50%；背景：#fff；过滤器：投影（00.5px#333）投影（00.5px#333）投影（00.5px#333）；&::before,&::after{内容：“”；位置：绝对；插图：0；背景：继承；}&::before{变换：旋转（60度）；}&::after{变换：旋转（-60deg）；}}@for$i从1到5{li:nth-child(#{$i}){z-index:#{$i};宽度：#{(1-$i/5)*150}px；高度：#{(1-$i/5)*260}像素；}}}背景网格出来了：用背景图实现六角星样式，接下来我们只需要实现六角星渲染加动画实现这样的图形其实很简单，直接用clip-path剪切即可：只需要两步：实现渐变图形和用clip-path剪切核心代码：
···div{背景：线性渐变(rgba(241,94,174,.8),rgba(255,152,0,.8));剪辑路径：多边形(25%0%,75%0%,100%50%,75%100%,25%100%,0%50%);}当然我们可以将坐标点作为参数，计算出坐标点后，通过inline标签，可以根据卦象显示不同样式的Pattern。像这样：
