css画皮卡丘

26 篇文章 0 订阅
9 篇文章 0 订阅

目录

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

一、前言

学习前端有一段时间了,最近复习了一下 CSS,还有 MVC 模式。发现还是有很多不足的地方。想着,就简单的使用 CSS 画个东西吧。再简单的使用 MVC 实现一个播放器 player

不知道有没有机会做你的皮卡丘,举高高,要抱抱~

这才是猛男该看的东西(doge

二、效果预览

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

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值