灵感来源

昨天在群里回忆了一波童年动画，挺欢乐的。龙珠暂时没有画出来，好友说她想回忆童年，我可以找个别的动画先画着。

之前有部动画，里面的角色形象都很可爱，而且有很多不同颜色的角色，就很适合做换装功能，这部动画也有个可爱的名字叫《果宝特攻》。这里面的角色大多是果冻的形象，所以用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畅想」好友想回忆童年，安排~为她做了一个果宝特攻的换装相关推荐

「CSS畅想」何以解忧，美食足矣，用技术给好友开发了一个零食盲盒小游戏
灵感来源天气冷了,办公室零食准备起来.最近一直忙着工作,有点忽视了好友.看着网友分享的零食图片,我头顶的灵感之光亮了. 正所谓,何以解忧,美食足矣.我准备给好友写一个零食盲盒的小游戏,能看不能吃的那 ...
Navidrome - 开源音乐服务器【打造属于自己的音乐播放器】「端口映射」随时随地想听就听
转载自cpolar极点云文章:Navidrome - 开源音乐服务器[打造属于自己的音乐播放器]「端口映射」随时随地想听就听 1. 前言不知从何时开始,我们能用的音乐软件越来越少,笔者使用小米手机很 ...
看到「财富自由」就想吐
这些年,网上关于财富自由的人生故事,可以说是数不胜数. 不过,其中 70% 像是真假参半的凡尔赛炫耀帖,剩下的那 30% 则更像是兜售某些产品的广告. 比如前几天很火的腾讯 35 岁员工准备退休的帖子 ...
腾讯云技术复盘「数据丢失事件」，为什么业务上云还要再做云备份？
众多惨痛的云事故告诉了我们一个几乎无法规避的现实,那就是云也会宕机,也会丢失数据-. [CSDN 编者按]近两日,因腾讯云损坏了北京一家创业公司的文件系统元数据,导致后者的业务经营.甚至融资进程,都受 ...
「懒人」LeCun想让计算机自己编程？网友：还差10个 GPT-3
点击上方"视学算法",选择加"星标"或"置顶" 重磅干货,第一时间送达来源丨新智元编辑丨极市平台导读代码能自己写吗?如果未来有一天, ...
「css基础」关于字体相关的基础知识（一）
常言道网页设计的好坏,95%取决于字体的排版.尽管现在抖音.小视频和游戏的盛行,其占据了我们大部分的业余时间,但是还是有大部分人在网络上进行阅读,比如查阅资料,阅读小说.看新闻.知识学习之类. 舒适的 ...
「建议收藏」我想进阿里，我该怎么做？
阿里巴巴,作为一家知名的互联网公司,是我们程序员心仪公司之一,想得到一份阿里的offer,得通过层层关卡在这里我想分享一些我的经验,送给那些跟我一样,没大厂背景,但是想进阿里(或其他大厂,比如我面过 ...
光纤中的多种光学模式芯径_「涨知识」你想知道的光纤常识都在这里了，看不看随你...
光纤已经成为远距离有线信号传输的主要手段,安装.维护光纤也是弱电人的基本功.光纤中涉及的理论知识.组件和铺设要点都很多,我们在这里作了一些梳理. 三种光不是所有的光都能用于光纤中信号传播.光线中主要 ...
「应用架构」六边型架构：三个原则和一个实现示例
Hexagonal Architecture于2005年由Alistair Cockburn撰写,是一个具有许多优势的软件架构,自2015年以来又重新引起了人们的兴趣. 六角架构的初衷是: 允许应用程 ...
由生至死，众安「步步鸡」将鸡的一生安排得明明白白
一只步步鸡50元,你会买吗? 文 | 秦晓峰编辑 | 梁辰出品 | Odaily星球日报(ID:o-daily) (步步鸡养殖基地) 3 月 30 日,国家互联网信息办公室公开发布第一批共 1 ...

「CSS畅想」好友想回忆童年，安排~为她做了一个果宝特攻的换装