用代码画皮卡丘,
本篇文章给大家介绍一下CSS JavaScript制作皮卡丘动画的方法，会一步步给大家介绍使用钢性铸铁如何绘制皮卡丘，如何使用射流研究…实现动态效果，让皮卡丘动起来。
简单记录一下思路，有非常多可以优化的地方
画鼻子（一个扇形）
利用透明的画出合适的三角形。鼻子{
位置：绝对；
边框：10px纯黑；
边框颜色：黑色透明透明；
边框-底部：无；
左：50%;
顶配：145像素
左边距：-10px；
}再画出三角形上面的半圆共同组成扇形。元{
位置：绝对；
高度：8px
宽度：20px
top:-18px；
左：-10px；
border-radius:8px 8px 0 0；
背景色：黑色；
}
画左右两个黑眼睛
.眼睛{
位置：绝对；
边框：2px固体# 000000
宽度：64px
身高：64px
左：50%;
top:100px；
左边距：-32px；
边界半径：50%;
背景色：# 2e2e2e
}。左眼{
transform:平移x(-118 px)；
}。eye.right {
transform:平移x(118 px)；
}再画出黑眼睛里面的白眼睛。eye:after {
内容："";
显示：块；
位置：绝对；
边框：2px纯黑；
背景：# ffffff
宽度：30px
高度：30px
边界半径：50%;
左：10px
}
画嘴唇
制作左边嘴唇。嘴巴。上嘴唇左{
边框：3px纯黑；
宽度：86px
高度：24px
边框半径：0 0 0 50像素
边框-顶部-颜色：透明；
边框-右边-颜色：透明；
位置：相对；
变换：旋转(-15度);
位置：绝对；
左：50%;
左边距：-50%;
}
然后用伪元素遮住鼻子下方的黑色竖线。嘴巴上嘴唇左：之前{
内容："";
显示：块；
宽度：5px
高度：30px
位置：绝对；
右：-4px；
底部：0px
背景色：# ffdb00
}同样原理制作右嘴唇。嘴巴。上嘴唇右{
边框：3px纯黑；
宽度：86px
高度：24px
边框半径：0 0 50px 0
边框-顶部-颜色：透明；
边框-左侧-颜色：透明；
位置：相对；
变换：旋转(15度);
位置：绝对；
右：50%;
右边距：-50%;
}.嘴巴上嘴唇右：之前{
内容："";
显示：块；
宽度：5px
高度：30px
位置：绝对；
左：-4px；
底部：0px
背景色：# ffdb00
}
制作下嘴唇。嘴巴。向下{
边框：1px纯红；
高度：166像素
宽度：100%;
位置：相对；
溢出：隐藏；
}。嘴巴。向下。元1 {
边框：1px纯黑；
位置：绝对；
宽度：124px
高度：1000像素
左：50%;
左边距：-62px；
底部：0;
边框半径：85px/280 px；
背景：# 9b000a
}
然后在。嘴巴。向上。嘴唇中加入和身体一样的背景
然后画里面的部分和红脸颊。嘴巴。降。元1 .元2 {
边框：1px纯红；
位置：绝对；
宽度：150像素
高度：300像素
背景：# fa595b
左：50%;
左边距：-75px；
底部：-165 px；
边框半径：100像素；
}。脸{
边框：3px纯黑；
位置：绝对；
宽度：88px
高度：88px
左：50%;
左边距：-44px；
顶配：210 px
}。向左{
transform:平移x(-166 px)；
边界半径：50%;
背景：# ff0000
}。face.right {
transform:平移x(166 px)；
边界半径：50%;
背景：# ff0000
}
添加动画效果
给鼻子添加动画效果
@关键帧波动{
0% {
变换：旋转(0);
}
33% {
变换：旋转(6度);
}
66% {
变换：旋转(-6度);
}
100% {
变换：旋转(0);
}
}。机头：悬停{
变换-原点：中心底部；
动画：波形220毫秒无限线性；
}
动态展示
让一个数字自动一直加一
新建一个test.html和测试。射流研究…在test.html中写一个编号为演示的div设n=1；
演示。innerhtml=n；
setInterval(()={
n=1；
演示。innerhtml=n；
}, 1000);下面就可以写一段话，一个字一个字的出现
const string=大家好，我是你们的老朋友；
设n=1；
demo.innerHTML=string.substr(0，n)；
setInterval(()={
n=1；
demo.innerHTML=string.substr(0，n)；
}, 300);但是上面代码还存在bug，打出n，会发现当字显示完了之后，n还是一直增加，我们只需要在显示完字之后取消计时器即可，取消计时器方法如下
const string=大家好，我是你们的老朋友；
设n=1；
demo.innerHTML=string.substr(0，n)；
设id=setInterval(()={
n=1；
if (n string.length) {
窗户。清除间隔(id)；
返回；
}
demo.innerHTML=string.substr(0，n)；
}, 300);知道了一个字一个字显示的原理，接下来显示我们的CSS。
test.html中准备两个div，一个用来写半铸钢钢性铸铁(铸造半钢)标签，一个用来将半铸钢钢性铸铁(铸造半钢)内容显示在页面上。
但是，这样之后还是有一个有问题，显示的动画被文字顶下去了。
如图所示
在test.html中加入下面代码
风格
#html {
位置：绝对；
底部：0;
左：0;
宽度：100%;
身高：50vh
}
/风格我们解决了如何让动画的问题，又出现了代码看不见的问题，接下来解决怎么让滚动条自动往下滚，并且动画固定不动
超文本标记语言的内容是不需要被用户看见的，可以直接隐藏
风格
#演示2 {
显示：无；
}
#演示{
位置：固定；
身高：50vh
top:0；
左：0;
宽度：100%;
溢出-y:自动；
}
#html {
位置：绝对；
底部：0;
左：0;
宽度：100%;
身高：50vh
}
/风格在测试。射流研究…更新代码，让滚动条自动往下滚
设id=setInterval(()={
n=1；
if (n string.length) {
窗户。清除间隔(id)；
返回；
}
demo.innerText=string.substr(0，n)；
演示2。innerhtml=string。substr(0，n)；
演示。滚动顶部=演示。滚动高度；//更新了这里
}, 0);隐藏滚动条之后，用户依然可以滚动内容
#演示：-网络工具包-滚动条{
显示：无；
}
实现慢速、中速、快速播放功能
添加播放、暂停、慢速、中速、快速按钮
刷新后，发现按钮先变大再复原，这是因为半铸钢钢性铸铁(Cast Semi-Steel)重置影响到按钮，在测试，js中更新代码
将样式分为两块，互不影响。皮肤* {
边距：0;
填充：0;
框大小：边框-框；
}。皮肤*:之前，
* *在{
框大小：边框-框；
}。皮肤{
背景：# ffdb00
最小高度：50vh
位置：相对；
}
3.思路
暂停：清除计时器（闹钟)播放：运行计时器慢速：砸了闹钟，重新设一个，时间更慢
代码优化
btnSlow.onclick=()={
窗户。清除间隔(id)；
时间=300;
id=setInterval(()={
run()；
},时间);
};
//等价于
btnSlow.onclick=()={
窗户。清除间隔(id)；
时间=300;
id=setInterval(运行，时间);
};完整优化如下
暂停；
btnPause.onclick=()={
窗户。清除间隔(id)；
};
播放；
btnPlay.onclick=()={
id=setInterval(()={
run()；
},时间);
};
慢速；
btnSlow.onclick=()={
窗户。清除间隔(id)；
时间=300;
id=setInterval(()={
run()；
},时间);
};
中速；
btnNormal.onclick=()={
窗户。清除间隔(id)；
时间=50;
id=setInterval(()={
run()；
},时间);
};
快速；
btnFast.onclick=()={
窗户。清除间隔(id)；
时间=0;
id=setInterval(()={
run()；
},时间);
};上面代码优化结果如下
const run=()={
n=1；
if (n string.length) {
窗户。清除间隔(id)；
返回；
}
demo.innerText=string.substr(0，n)；
演示2。innerhtml=string。substr(0，n)；
演示。滚动顶部=演示。滚动高度；
};
const play=()={
返回设置间隔(运行，时间);
};
让id=play()；
常量暂停=()={
窗户。清除间隔(id)；
};
//暂停
btnPause.onclick=()={
pause()；
};
//播放
btnPlay.onclick=()={
id=play()；
};
//慢速
btnSlow.onclick=()={
pause()；
时间=300;
id=play()；
};
//中速
btnNormal.onclick=()={
pause()；
时间=50;
id=play()；
};
//快速
btnFast.onclick=()={
pause()；
时间=0;
id=play()；
};
如果一个函数什么都没干，只是调用另外一个函数，那么外面的函数可以直接省略
例如
btnSlow.onclick=()={
slow()；
};
//等价
btnslow . onclick=slow
把几个函数阻止在一起，面向一个对象
const play=()={
返回设置间隔(运行，时间);
};
让id=play()；
常量暂停=()={
窗户。清除间隔(id)；
};
常数慢=()={
pause()；
时间=300;
id=play()；
};
const normal=()={
pause()；
时间=50;
id=play()；
};
const fast=()={
pause()；
时间=0;
id=play()；
};常量播放器={
run: ()={
n=1；
if (n string.length) {
窗户。清除间隔(id)；
返回；
}
demo.innerText=string.substr(0，n)；
演示2。innerhtml=string。substr(0，n)；
演示。滚动顶部=演示。滚动高度；
},
播放：()={
返回setInterval(player.run，time)；
},
暂停：()={
窗户。清除间隔(id)；
},
慢速：()={
玩家。pause()；
时间=300;
id=玩家。play()；
},
正常：()={
玩家。pause()；
时间=50;
id=玩家。play()；
},
快速：()={
玩家。pause()；
时间=0;
id=玩家。play()；
},
};
bindEvents: ()={
文档。查询选择器(“# BTN暂停”).onclick=player.pause
文档。查询选择器(“BTN播放”).onclick=player.play
文档。查询选择器(“# btnSlow”).onclick=player.slow
文档。查询选择器(“# BTN标准”).onclick=player.normal
文档。查询选择器(“BTN快速”).onclick=player.fast
}
//
模块化
把一堆代码放到一个文件里导出，在导入
更多编程相关知识，请访问：编程视频！以上就是CSS JS如何制作皮卡丘动画（代码分析)的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。