首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

做个PC端打字小游戏

看完这篇文章,你会学会如何整活~ 小时候我记得有个软件叫做金山打字通,里面有个打字的飞机大战不知道有没有小伙伴玩过,当然我整不来他那么优秀,我只能做一个较为简单的(「低配版」),低的好像还真挺低。...接下来我们来写我们的js逻辑处理。...结合我们的小游戏,选择了zoomIn与shake两个动画,一个作为英文字母的出现伴随动画,另一个作为错误的时候提示用户的动画。...1 okCount ++; //当按键正确时,重新显示新的字符 show(); //添加正确的动画 通过js...clearAnimated(){ //负责清除动画 charBox.className=''; } 到此为止,我们今日的整活就结束啦~ 最后 希望大家快乐起来呀,老想着如何去实现产品经理给的需求会十分疲惫

1.2K20
您找到你想要的搜索结果了吗?
是的
没有找到

纯css实现模拟打字效果

模拟打字效果 前沿 看到上面的打字效果,相信大家第一时间想到的就是使用typed.js,其强大的功能,相信大家在使用的时候肯定得到了不少好处。...但是如果说我只是想用一下打字效果,额外引入一个js库肯定会带来额外的负担,而且本身在功能并不繁琐的情况下,也会带来相应的成本。...当然,第三方的库自然有其对应的好处因为其更加强大,用typed.js举例,其中对于你出现的字的速度,开始结束的点,以及各种你能想到的操作都是OK的。...对于这个不做过多的介绍,有兴趣的可以参考 typed.js实例 效果实现 对于上面的模拟打字效果来说,只用css如何实现?...分为两部,第一个是实现文字的动画部分 // Html // 新增一个对应的容器以及容器内需要打字效果的内容 <div class="typing-demo

1.1K30

打字机效果的实现与应用

前言 在 web 应用中,模拟编辑器或者模拟输入框中文字啪啦啪啦输入的效果,往往能够吸引人们的眼球,让用户的注意力聚焦在输入的内容上,其实使用的是 web 动画模拟打字机效果,本文将和大家探讨打字机效果的实现方式以及应用...可以看到其实现原理很简单,打字效果其实就是改变容器的宽度实现的。...js 实现 setInterval 实现 /* 产生光标闪烁的效果 */ #content::after { content: '|'; color: #000;...typed.js 实现 那如果想在商用项目上免费使用,可以使用 typed.js ,采用 MIT 开源协议,与 TypeIt 类似的 api var typed = new Typed...打字机效果应用 程序讲究的输入和输出,虽然我们在页面上实现了动态输入的效果,若能够同步实现输出,岂不是实现了编译器的效果?

2.4K20
领券