写轮眼进化万花筒写轮眼

前言

记得几个月前逛掘金, 看到一篇挺有意思的文章, 大概的内容是怎么画一只写轮眼, 我本身是一个火影迷, 着实被这创意给惊了一下, 我想既然能画出写轮眼, 万花筒写轮眼应该也没有太大问题, 在火影中岸本塑造了太多令人影响深刻的人物形象, 我最喜欢的就是卡卡西、凯和鼬, 一个是历经各种磨难也不忘初心的拷贝忍者，一位是凡人之躯比肩神明的苍蓝猛兽, 所以这一期我会用css画出卡卡西的万花筒写轮眼

思路

万花筒写轮眼形态很多, 但卡卡西的眼睛算是里面形状最复杂的一只, 其他的可能只有与之宇智波斑能与之一战, 它的形状像三把镰刀交错在一起, 三勾玉形态基本就是div设置边框+伪类即可实现

.tail {
        position: relative;
        width: 30px;
        height: 30px;
        margin-left: 17px;
        top: 4px;
        background: #000;
        border-top-right-radius: 95%;
        transform: rotateZ(15deg);
      }

      .tail::after {
        content: "";
        position: absolute;
        left: -1px;
        bottom: -1px;
        width: 30px;
        height: 15px;
        border-top-right-radius: 99%;
        background: #d21801;
      }

设置右边框的弧度尽可能大这样可以实现四分之一圆弧的效果, 这里不设置成100%是想勾玉的尾巴不要太粗, 而.tail的伪类如法炮制, 在原本四分之一的圆弧内再切割成小一点的圆弧, 两个圆弧相交就能勾勒出勾玉的尾巴

勾玉的部分基本没有什么问题了,然后就是画镰刀的环节，画镰刀和上面的勾玉有点相似, 同样是利用边框的弧度和伪类的交叉形成一把刀尖，但是仔细看卡卡西的眼睛这个镰刀形状的不是直挺挺的而是像半个椭圆, 这里的话思路就是需要绝对定位然后分层级, 类似于这样

实现这个效果的代码也不是很复杂

.wht {
        position: relative;
        width: 70px;
        height: 130px;
        background: #000;
        border-top-right-radius: 90%;
        border-top-left-radius: 10%;
        border-bottom-left-radius: 25%;
      }

      .wht::after {
        position: absolute;
        content: '';
        left: 16px;
        bottom: -1px;
        height: 90px;
        width: 50px;
        background: #d21801;
        border-bottom-left-radius: -50%;
        border-top-right-radius: 99%;
      }

      .tuoyuan {
        position: absolute;
        top: 0px;
        left: -15px;
        height: 105px;
        width: 40px;
        background-color: #000;
        clip-path: ellipse(20px 105px at 20px 105px);
      }

其中这里值得注意的是最后画半椭圆的clip-path, 这个css属性可能不是很常见, 但是它对于形状的裁剪作用其实很大, 不仅常见的圆形, 梯形, 菱形, 三角形等不在话下, 最顶的它有一个path值(可以参考svg)可以在div中裁剪出任何形状的图案, 有兴趣的同学可以去了解一下 clip-path传送门 这样一把镰刀就算成功了, 另外两把也就是rotateZ(120deg)和rotateZ(240deg)的事了

动画部分

动画部分的话因为有三勾玉的动画的消失和万花筒的显现两段衔接的动画, 我直接用了Element.animate, 我上一篇文章也有用到, 就不做过多介绍了, 来看看最终效果吧

代码传送门

结尾

总体来说代码没什么难度, 只是那段凯父子的对话一直在我耳旁萦绕

祝贺你从忍者学校毕业，但青春可不能就此毕业啊。
青春什么时候结束？
青春不会退缩，所以永远不会结束。那爸爸死的时候也不结束吗？
那才是青春的最高潮！