我正在参加「创意开发 投稿大赛」详情请看:掘金创意开发大赛来了!
介绍
看过《冰与火之歌 》的小伙伴或许可以知道,火龙可是一种神奇且强悍的魔法生物, 他们体型巨大,能喷出火焰震慑众人。本期我们就将用纯css制作一枚龙蛋,并且每次触碰龙蛋,里面的幼龙都可以探出头来,非常可爱。
演示
正文
绘制龙蛋
.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;
}
相信刚才也看到了,我们绘制了两个伪元素,这样其实就是绘制了两颗蛋,只是因为绝对定位让他们的位置都一样,所以看着是一颗。相信很多的小伙伴早已经猜到了,我们的破壳效果,就是让这两个伪元素分离,所以每个伪元素还要进行 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%);
}
.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%);
}
绘制幼龙
所谓幼龙其实在蛋壳里只是会探出头来,所以只绘制它的小脑袋就好了,为了更加立体,我用 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
直接同时改变高度和圆角这样实现眨眼效果岂不是更加简单么?其实不然,虽然也能让眼睛变小,但是内部会出现变形那可不是我们想要的结果。
破壳动画
当然,别忘了破壳是幼龙把蛋壳顶开,蛋壳上半部分会有一个过渡动画,大致是蛋壳顶飞后再回到幼龙的头上。所以,下面要在蛋壳上半部分和幼龙上写 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);
}