CSS畅想 | 好友想回忆童年，安排~为她做了一个果宝特攻的换装
【摘要】 前端技术从业者与非技术好友互动，好友想回忆童年，我为她用CSS技术做了一个果宝特攻的换装
灵感来源
昨天在群里回忆了一波童年动画，挺欢乐的。龙珠暂时没有画出来，好友说她想回忆童年，我可以找个别的动画先画着。
之前有部动画，里面的角色形象都很可爱，而且有很多不同颜色的角色，就很适合做换装功能，这部动画也有个可爱的名字叫《果宝特攻》。这里面的角色大多是果冻的形象，所以用CSS实现难度也不是很大，之前我用CSS绘制过冰墩墩，所以也算驾轻就熟。
我和好友都挺喜欢小游戏的，我相信这个功能应该能给她一个小惊喜。
在线预览
在线预览平台，可查看完整代码，并体验效果。
功能设计
通过按钮操作，更换果宝的果冻颜色。
- 一共有橙、黄、绿、红、粉、紫这六种颜色，对应六个按钮，位置在页面左侧；
- 果宝的位置在按钮右侧，默认为红色；
- 切换代表不同颜色的按钮，果宝的颜色对应更换，同时展示对应颜色的果宝的名字。
功能实现
果宝的结构
果宝主要由叶子、头、身体、四肢这四个部分组成。
- 头顶的叶子为绿色，像一片呆毛，为果宝增添一分呆萌；
- 头部，包括眼睛、鼻子、嘴巴，粉扑扑的那一片便是鼻子，为果宝增添一分可爱；
- 身体是连起来的，符合果冻的特点；
- 四肢中，手臂圆滚滚的，为了增加立体感，我打了白色的光效。小短腿是萌物的标配。
颜色切换
果宝的名字
颜色区分不同的果宝
橙：橙留香
黄：菠萝吹雪
绿：陆小果
红：上官子怡
粉：梨花诗
紫：花如意
实现方式是通定义一个包含全部果宝的数组对象，每个元素都包含按钮Id、果宝名字、按钮高亮的样式名称、身体颜色的样式名称四个变量。点击切换按钮时，通过按钮对应的颜色type值，取到相应的数组中元素即可。
var list = [
{
type: 'orangeBtn',
btn: orangeBtn,
flag: orangeBtnFlag,
rightVal: 'orange',
title: '橙留香',
},
{
type: 'yellowBtn',
btn: yellowBtn,
flag: yellowBtnFlag,
rightVal: 'yellow',
title: '菠萝吹雪',
},
{
type: 'greenBtn',
btn: greenBtn,
flag: greenBtnFlag,
rightVal: 'green',
title: '陆小果',
},
{
type: 'redBtn',
btn: redBtn,
flag: redBtnFlag,
rightVal: 'red',
title: '上官子怡',
},
{
type: 'pinkBtn',
btn: pinkBtn,
flag: pinkBtnFlag,
rightVal: 'pink',
title: '梨花诗',
},
{
type: 'purpleBtn',
btn: purpleBtn,
flag: purpleBtnFlag,
rightVal: 'purple',
title: '花如意',
},
];实现切换功能
- 每个按钮操作调用重置颜色的方法，传入对应颜色的type值；
- 将果宝数组进行循环操作，避免一个一个处理的繁琐方式；；
- 当前点击按钮置为高亮，其他按钮移除高亮的样式名；
- 当前切换的颜色为身体容器添加颜色样式，其他则移除颜色样式，同时当前颜色操作按钮变为不可操作，避免重复添加样式名。
// 重置颜色
function resetColor(type) {
list.forEach((item, index) => {
if (type === item.type) {
console.log(type);
item.btn.classList.toggle('active');
item.flag = true;
right.classList.add(item.rightVal);
rightTitle.innerHTML = item.title;
} else {
item.btn.classList.remove('active');
right.classList.remove(item.rightVal);
}
});
}设置默认颜色
默认展示橙色的果宝-橙留香，直接调用重置颜色的方法，并传入type值为'orangeBtn'
// 默认橙色
resetColor('orangeBtn');总结
框架代码写多了，所以最近返璞归真，写原生写的比较多，还挺有意思的。
好像回到了刚工作那会。反反复复，无数的样式实现一个效果，很有成就；修修改改，写一大段代码实现一个小功能，快乐半天。
好友也很开心，她玩的不亦乐乎，好像暂时忘记了龙珠的事情，我赶紧去想下一个小创意了。
作者：非职业「传道授业解惑」的开发者叶一一
简介：「趣学前端」、「CSS畅想」系列作者，华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
如果看完文章有所收获，欢迎点赞👍 | 收藏⭐️ | 留言📝。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）