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

叶一一

发布于 2023-03-31 15:18:34

26800

代码可运行

文章被收录于专栏：趣学前端趣学前端

运行总次数：0

代码可运行

灵感来源

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

之前有部动画，里面的角色形象都很可爱，而且有很多不同颜色的角色，就很适合做换装功能，这部动画也有个可爱的名字叫《果宝特攻》。这里面的角色大多是果冻的形象，所以用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');

总结

框架代码写多了，所以最近返璞归真，写原生写的比较多，还挺有意思的。

好像回到了刚工作那会。反反复复，无数的样式实现一个效果，很有成就；修修改改，写一大段代码实现一个小功能，快乐半天。

好友也很开心，她玩的不亦乐乎，好像暂时忘记了龙珠的事情，我赶紧去想下一个小创意了。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-10-13，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度