CSS畅想 | 好友说她想要七龙珠，我帮她召唤了神龙
【摘要】 前端技术从业者与非技术好友互动，好友说她想要七龙珠，我帮她召唤了神龙。
灵感来源
前面的「解答之书」挽回了我和好友的友谊，好友趁热打铁的提出了新要求，说她想要龙珠，还是七颗，好召唤神龙。
龙珠好像是半透明球形，上面有五角形的星星图案，不同的龙珠上面的星星数量不一样。于是我开始连夜翻网络上的图片，寻找童年记忆中的龙珠。
圆滚滚的球，星星点缀，好像用CSS都不难实现。但是神龙却难住我了，挺复杂的。我也没什么绘画天分，但是我擅长制作彩蛋，这次也给好友一个小惊喜。
在线预览
在线预览平台，可查看完整代码，并体验效果。
功能实现
一颗龙珠
- 龙珠是半透明的，所以我给他加了一层糖果外壳；
- 龙珠的内芯上是五角形的星星，不同的龙珠，星星的数量是不同的，最大的数量是7颗星星；
- 龙珠的顶部，我给它打了一个高光，毕竟是能召唤神龙的珠子。
<div class="ball ball7">
<div class="ball-light"></div>
<div class="ball-star ball7-star1">
<div class="ball-star-top"></div>
</div>
<div class="ball-star ball7-star2">
<div class="ball-star-top"></div>
</div>
<div class="ball-star ball7-star3">
<div class="ball-star-top"></div>
</div>
<div class="ball-star ball7-star4">
<div class="ball-star-top"></div>
</div>
<div class="ball-star ball7-star5">
<div class="ball-star-top"></div>
</div>
<div class="ball-star ball7-star6">
<div class="ball-star-top"></div>
</div>
<div class="ball-star ball7-star7">
<div class="ball-star-top"></div>
</div>
<div class="ball-core"></div>
<div class="ball-inner"></div>
</div>七颗龙珠
七颗都集齐的情况下
- 其中六颗形成了一个圆圈，环绕着中间的龙珠；
- 每颗龙珠都做了上下移动的效果，表示随时可以召唤神龙。
召唤功能
- 点击召唤按钮，外层的龙珠开始向中间的龙珠聚合；
- 龙珠聚合在一起，只展示一颗龙珠，然后呈现慢慢消失的效果；
- 龙珠消失之后，神龙就出现了。
// 召唤
function call() {
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年。今天也是被自己智慧折服的一天。
var beBornTime = '2122/07/31 00:00:00';
var diffTime = new Date(beBornTime).getTime() - newTime;
var showTime = Math.floor(diffTime / 1000 / 60 / 60); // 一百年再说说这颗龙蛋，
- 这颗龙蛋的灵感来自「非人哉」的官网，大士手中托着一颗可以实现愿望的蛋，神奇又可爱；
- 龙蛋上的裂缝效果是通过不同的直线旋转一定的角度然后连接在一起形成的。
<div class="egg-brokenline egg-brokenline1"></div>
<div class="egg-brokenline egg-brokenline2"></div>
<div class="egg-brokenline egg-brokenline3"></div>
<div class="egg-brokenline egg-brokenline4"></div>
<div class="egg-brokenline egg-brokenline5"></div>
<div class="egg-brokenline egg-brokenline6"></div>
<div class="egg-brokenline egg-brokenline7"></div>
<div class="egg-brokenline egg-brokenline8"></div>后续
好友得知我把龙珠画出来了，很是兴奋，开开心心打开我给她的链接，然后3分钟后，向我丢了几个怒火的表情。然后我告诉她，知足者常乐，不要在意细节。她说，我正在打车，待会见面，让你近距离感受一下什么叫知足者常乐。
我现在画龙好像来不及了，要不画个并蒂莲给她消消气？
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）