css画皮卡丘

目录

• 前言
• 效果预览
• 素材来源
• 踩坑记录+技巧总结（MVC）
• 源码奉上

一、前言

二、效果预览

Gitee 预览

温馨提示：点击皮卡丘的鼻子可以动的

• PC 端

• 手机端

三、素材来源

CodePen

搜索 pikachu

四、踩坑记录和技巧总结（MVC）

其实画皮卡丘整体是十分简单的，用到的 JS 很少，最多的还是 CSS 代码。虽然在源码中没有 CSS 文件，但是字符串中全是 CSS 的代码。JS 只是用 MVC 模式实现了一个播放器 player。

1、border-radius

可以实现弯曲的胡须，并且使用伪元素覆盖颜色。在画皮卡丘的过程中，最难的应该就是弯曲的胡须的那一部分了。

.mouth .up .lip.left {
  transform: rotate(-20deg);
  border-bottom-left-radius: 40px 50px;
}

.mouth .up .lip::after {
  content: "";
  display: block;
  width: 50px;
  height: 30px;
  position: absolute;
  top: -5px;
  left: 70px;
  background-color: #ffe600;
}

.mouth .up .lip.right {
  top: -30px;
  left: 100px;
  border-bottom-right-radius: 40px 50px;
  transform: rotate(20deg);
}

.mouth .up .lip.right::after {
  top: -5px;
  left: -30px;
}

2、播放器player

在 JS 写一个播放器 player 时，使用 MVC 模式来思考去优化代码。 其中运用到的技巧：

• 表驱动编程绑定事件

events: {
	'.pause':'pauseevent',
	'.play':'playevent',
	'.replay': 'replayevent',
	'.slow':'slowevent',
	'.middle': 'middleevent',
	'.fast':'fastevent'
    },
bindevets: () => {
	for (let key in player.events) {
		if (player.events.hasOwnProperty(key)) {
			document.querySelector(key).addEventListener('click', player[player.events[key]]);
		}
	}
},

• 页面自动出现代码--定时器

playStart:() => {
	player.id = setInterval(() => {
		if(player.i>string.length) {
			clearInterval(player.id);
		}
		else {
			player.ui.demo2.innerText=string.substring(0,player.i);
			player.ui.demo1.innerHTML = string.substring(0,player.i);
			player.ui.demo2.scrollTop=player.ui.demo2.scrollHeight;
			player.i++;
		}
	},player.setTime)
},

五、源码奉上

Gitee

github