灵感来源
前面的「解答之书」挽回了我和好友的友谊，好友趁热打铁的提出了新要求，说她想要龙珠，还是七颗，好召唤神龙。
龙珠好像是半透明球形，上面有五角形的星星图案，不同的龙珠上面的星星数量不一样。于是我开始连夜翻网络上的图片，寻找童年记忆中的龙珠。
圆滚滚的球，星星点缀，好像用CSS都不难实现。但是神龙却难住我了，挺复杂的。我也没什么绘画天分，但是我擅长制作彩蛋，这次也给好友一个小惊喜。
在线预览
在线预览平台，可查看完整代码，并体验效果。
功能实现
一颗龙珠
- 龙珠是半透明的，所以我给他加了一层糖果外壳；
- 龙珠的内芯上是五角形的星星，不同的龙珠，星星的数量是不同的，最大的数量是7颗星星；
- 龙珠的顶部，我给它打了一个高光，毕竟是能召唤神龙的珠子。
<divclass="ball ball7"><divclass="ball-light"></div><divclass="ball-star ball7-star1"><divclass="ball-star-top"></div></div><divclass="ball-star ball7-star2"><divclass="ball-star-top"></div></div><divclass="ball-star ball7-star3"><divclass="ball-star-top"></div></div><divclass="ball-star ball7-star4"><divclass="ball-star-top"></div></div><divclass="ball-star ball7-star5"><divclass="ball-star-top"></div></div><divclass="ball-star ball7-star6"><divclass="ball-star-top"></div></div><divclass="ball-star ball7-star7"><divclass="ball-star-top"></div></div><divclass="ball-core"></div><divclass="ball-inner"></div></div>
七颗龙珠
七颗都集齐的情况下
- 其中六颗形成了一个圆圈，环绕着中间的龙珠；
- 每颗龙珠都做了上下移动的效果，表示随时可以召唤神龙。
召唤功能
- 点击召唤按钮，外层的龙珠开始向中间的龙珠聚合；
- 龙珠聚合在一起，只展示一颗龙珠，然后呈现慢慢消失的效果；
- 龙珠消失之后，神龙就出现了。
// 召唤functioncall() { synthesis.style.display='none'; balls.classList.add('balls-active'); balls.classList.remove('balls-move'); setTimeout(function () { balls.classList.add('balls-move'); balls.classList.remove('balls-active'); balls.style.display='none'; dragon.style.display='block'; dragonTime.innerHTML=showTime; }, 4500); }
召唤效果
彩蛋时刻
虽然神龙不容易绘制，但是龙蛋不难，我给好友准备了一颗龙蛋，就说神龙还需自己孵化，而且为了避免好友让我帮她孵化龙蛋，我把孵化时间设置成了100年。今天也是被自己智慧折服的一天。
varbeBornTime='2122/07/31 00:00:00'; vardiffTime=newDate(beBornTime).getTime() -newTime; varshowTime=Math.floor(diffTime/1000/60/60); // 一百年
再说说这颗龙蛋，
- 这颗龙蛋的灵感来自「非人哉」的官网，大士手中托着一颗可以实现愿望的蛋，神奇又可爱；
- 龙蛋上的裂缝效果是通过不同的直线旋转一定的角度然后连接在一起形成的。
<divclass="egg-brokenline egg-brokenline1"></div><divclass="egg-brokenline egg-brokenline2"></div><divclass="egg-brokenline egg-brokenline3"></div><divclass="egg-brokenline egg-brokenline4"></div><divclass="egg-brokenline egg-brokenline5"></div><divclass="egg-brokenline egg-brokenline6"></div><divclass="egg-brokenline egg-brokenline7"></div><divclass="egg-brokenline egg-brokenline8"></div>
后续
好友得知我把龙珠画出来了，很是兴奋，开开心心打开我给她的链接，然后3分钟后，向我丢了几个怒火的表情。然后我告诉她，知足者常乐，不要在意细节。她说，我正在打车，待会见面，让你近距离感受一下什么叫知足者常乐。
我现在画龙好像来不及了，要不画个并蒂莲给她消消气？
