皮卡丘项目技术点总结

链接

https://supernovay.github.io/Pikachu/dist/

技术栈

HTML+CSS+parcel

HTML部分

    <div class="skin"><div class="eye left"></div><div class="eye right"></div><div class="nose"><div class="yuan"></div></div><div class="face left"><img src="./images/3.gif" alt=""></div><div class="face right"><img src="./images/3.gif" alt=""></div><div class="mouth"><div class="up"><div class="lip left"></div><div class="lip right"></div><div class="down"><div class="yuan1"><div class="yuan2"></div></div></div></div></div>

CSS部分

.nose:hover //鼠标移入移出事件
@keyframes wave//关键帧 通过0~100% 控制animation
animation: wave 200ms infinite linear // 动画通过时间控制频率
.eye::before //伪类，在eye后插入元素
.mouth .up .lip // 选择mouth下的up下的lip
.mouth .up .lip::before // 选择mouth下的up下的lip的伪类
.face:hover > img //
.face.left > img // 选择face和left下的img// 以下代码为通过设置一个face让left和right都得到相同的圆形，减少了代码
<div class="face left">
<div class="face right">
.face{border: 2px solid black;background: red;position: absolute;width: 82px;height: 82px;left: 50%;top: 270px;border-radius: 50%;
}
.face.left{transform: translateX(-200px);
}
.face.right{transform: translateX(148px);
}

parcel

通过以下代码打包完后，发布到github

parcel build src/xxx.html --no-minify --public-url ./

皮卡丘项目技术点总结相关推荐

画一个皮卡丘项目小结（4）
前言继续总结过程中学到的新知识,这是第4部分,也是最后一部分. 主要是实现页面变速展示的效果一.创建button按钮 1 HTML结构 <div class="action&q ...
Facebook的AI识菜谱，把皮卡丘认成了煎蛋……|技术前沿洞察
硅谷Live / 实地探访 / 热点探秘 / 深度探讨大家好,一周技术前沿洞察又来啦!不少小伙伴说很喜欢这个栏目,小探们在找的时候也觉得,不仅有趣,而且实实在在地促进科技进步. 这周有啥技术进展呢: ...
用 TensorFlow 目标检测 API 发现皮卡丘！
在 TensorFlow 众多功能和工具中,有一个名为 TensorFlow 目标检测 API 的组件.这个库的功能正如它的名字,是用来训练神经网络检测视频帧中目标的能力,比如,一副图像. 需要查看我 ...
2022不一样的分享--行走的皮卡丘
CSDN博客:https://wusiyuan.blog.csdn.net 个人经验分享:http://wusiyuan.top/book 个人网站:http://wusiyuan.top 个人博客: ...
教程 | 使用Tensorflow从视频中揪出皮卡丘！
作者 | Juan De Dios Santos 译者 | Zhiyong Liu 编辑 | Natalie,Debra AI 前线导读:图像分类和目标检测是计算机视觉两大模块.相比于图像分类,目标检 ...
第一次拿到学校的星星 -- 行走的皮卡丘
♥★第一次拿到学校的星星☆★☆ -- 行走的皮卡丘★♥※ 我相信个人简介问题问答 1.师兄平时是怎么平衡实验室学习和常规课程学习的,如何合理进行时间分配? 2.师兄,你们在学习技术的过程中,有没有 ...
用python画皮卡丘源代码-实现童年宝可梦，教你用Python画一只属于自己的皮卡丘...
原标题:实现童年宝可梦,教你用Python画一只属于自己的皮卡丘大数据文摘出品作者:李雷.蒋宝尚还记得小时候疯狂收集和交换神奇宝贝卡片的经历吗? 还记得和小伙伴拿着精灵球,一起召唤小精灵的中二模 ...
python简单代码画皮卡丘-实现童年宝可梦，教你用Python画一只属于自己的皮卡丘...
原标题:实现童年宝可梦,教你用Python画一只属于自己的皮卡丘大数据文摘出品作者:李雷.蒋宝尚还记得小时候疯狂收集和交换神奇宝贝卡片的经历吗? 还记得和小伙伴拿着精灵球,一起召唤小精灵的中二模 ...
用python画皮卡丘画法-实现童年宝可梦，教你用Python画一只属于自己的皮卡丘
皮卡丘脸颊两边有着小小的电力袋,因此他独有的能力就是可以放电.在动画片中,小智的皮卡丘性格十分害羞,稍有不满就乱放电电人. 小时候也想拥有一只会放电的皮卡丘,长大后渐渐明白,这种高度智能会放电的&qu ...

皮卡丘项目技术点总结

链接

技术栈

HTML部分

CSS部分

parcel

皮卡丘项目技术点总结相关推荐

最新文章

热门文章