css魔法 | 火龙の蛋

我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！

介绍

看过《冰与火之歌》的小伙伴或许可以知道，火龙可是一种神奇且强悍的魔法生物，他们体型巨大，能喷出火焰震慑众人。本期我们就将用纯css制作一枚龙蛋，并且每次触碰龙蛋，里面的幼龙都可以探出头来，非常可爱。

演示

https://code.juejin.cn/pen/7120466259354845220

正文

绘制龙蛋

.egg-wrapper {
    position: absolute;
    width: 320px;
    height: 320px;
    transform: rotate(-45deg);
    top: 0;
    cursor: pointer;
    z-index: 9;
}

龙蛋的绘制将分成两个步骤，一开始我们完整的做一颗蛋的形状，因为后面会考虑到破壳怎么绘制。因为蛋是特殊的椭圆，这里先将蛋进行旋转45度，用一角去当蛋的顶部。

然后，我们在伪元素中分别绘制一枚龙蛋出来，用 border-radius 做出蛋的形状，然后再用 radial-gradient 做蛋上做背景涂鸦，这次画的是小圆圈的图案，其实还可以绘制很多，甚至可以用svg平铺来实现复杂的图案，还是有很多想象空间的。

.egg-wrapper::before,
.egg-wrapper::after{
    content: '';
    display: block;
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 320px;
    height: 320px;
    border:1px solid #000;
    border-radius: 80% 20% 55% 50%/55% 20% 80% 50%;
    background-image: radial-gradient(circle at center center, rgba(231,179,248, 0.1) 0%, rgba(231,179,248, 0.1) 48%,transparent 48%, transparent 56%,rgba(242,189,255, 0.89) 56%, rgba(242,189,255, 0.89) 100%),linear-gradient(90deg, rgb(255,207,255),rgb(255,207,255));
    background-size: 128px 128px;
    box-shadow: inset 1em 1em 2em #ffd6ff;
    overflow: hidden;
}

龙蛋.png

相信刚才也看到了，我们绘制了两个伪元素，这样其实就是绘制了两颗蛋，只是因为绝对定位让他们的位置都一样，所以看着是一颗。相信很多的小伙伴早已经猜到了，我们的破壳效果，就是让这两个伪元素分离，所以每个伪元素还要进行 clip-path 做路径裁切，形成不同的蛋壳部分，然后拼起来又是一颗完整的蛋了。

.egg-wrapper::before{
    clip-path: polygon(27.84% -22.62%,123.57% -5.52%,108.11% 49.6%,76.11% 57.69%,71.33% 37.01%,44.85% 22.33%,32.41% -13.39%);
}

蛋壳2.png

.egg-wrapper::after{
    clip-path: polygon(-35.87% 83.08%,244% 155.05%,108.11% 49.6%,76.11% 57.69%,71.33% 37.01%,44.85% 22.33%,32.41% -13.39%);  
}

蛋壳1.png

绘制幼龙

所谓幼龙其实在蛋壳里只是会探出头来，所以只绘制它的小脑袋就好了，为了更加立体，我用 box-shadow 在做了内阴影，当然别忘了后面幼龙要破壳所以先要设置 transition 来做一个过渡。

.dragon{
    position: relative;
    height: 180px;
    width: 230px;
    background: rgb(247,120,52);
    margin: 40px auto 0;
    border: 3px solid #333;
    border-radius: 50% 50% 40% 40%;
    box-shadow: inset 0em 1em .65em rgb(255,173,65),
    inset 0em -2em 1em rgb(248, 117, 30); 
}

其他部分因为都很简单的图形拼凑可以看演示代码，这里唯一要讲的是幼龙是如何眨眼的。

.dragon-eye{
    position: absolute;
    border: 3px solid #333;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #444;
    overflow: hidden;
    animation: 4.2s blinking infinite backwards ease-out;
}
@keyframes blinking {
  0%,
  30%,
  80% {
    clip-path: ellipse(100% 100% at 50% 48%);
  }
  60%,
  100% {
    clip-path: ellipse(100% 2% at 50% 48%);
  }
}

可以看到这里做了 animation 动画，其眨眼的效果也是利用了 clip-path ,让其从顶部和底部往中间部分裁切，来实现眨眼的效果。

有的小伙伴可能会问，为什么不用 height 和 border-radius直接同时改变高度和圆角这样实现眨眼效果岂不是更加简单么？其实不然，虽然也能让眼睛变小，但是内部会出现变形那可不是我们想要的结果。

幼龙.png

破壳动画

当然，别忘了破壳是幼龙把蛋壳顶开，蛋壳上半部分会有一个过渡动画，大致是蛋壳顶飞后再回到幼龙的头上。所以，下面要在蛋壳上半部分和幼龙上写 transition动画过渡，然后分别调整 cubic-bezier 曲线，达成这个效果。

.egg-wrapper::before{
    transition: .3s all cubic-bezier(.5,-.15,.2,1.8);
}
.dragon{
    transition: .3s all cubic-bezier(.5,-.15,.2,1.2);
}

接下来，我们就是利用 hover 移入到龙蛋上然后分别改变幼龙和蛋壳上半部的距离，就这么简单，这只幼龙自己就探出头来啦。

.egg-container:hover .egg-wrapper::before{
    transform: translateX(80px) translateY(-80px);
}
.egg-container:hover .dragon{
    transform: translateY(-80px);
}

封面.gif