一. Css吃豆人动画

1. 上半圆：两个div，内部一个圆div，外部设置宽高截取半圆

外部div动画：animation: 动画样式 1s(时长) ease(动画先低速后快速) infinite(动画无限播放)

动画样式：@keyframes：设置50%转45度，100%转0度

transform-origin: 50% 100%：定义旋转基点位置，左上角为0% 0%

2. 下半圆：改变旋转动画和基点位置，截取下半圆令外部div向下移动50%：translateY(-50%)

3. 豆子（设置三个）：使用绝对定位div，背景和圆角设置其left为起点位置

动画：.选择器: nth-of-type(3){...}：设置3个同class豆子不同样式动画，表示此节点的父节点下第三个元素

animation:三个豆子动画时长1.5秒，规定liner动画速度相同，设定延时0.5秒和1秒

动画样式：@keyframes：0% opacity:1（透明度）100% left: 15px opacity 0.4（设置终点和透明度）

css吃豆人动画的更多相关文章

  1. 利用纯css写三角形，弧度箭头，吃豆人，气泡。放大镜，标签的源码

    1. 向上三角形

  2. 用python的turtle作图（二）动画吃豆人

    本文是用python的turtle作图的第二篇,通过这个例子可以了解动画的原理,用python自带的turtle库制作一些小动画. 1.问题描述 在上一篇"用python的turtle作图( ...

  3. Unity项目 - 吃豆人Pacman

    项目展示 Github项目地址:Pacman 涉及知识 切片制作 Animations 状态机设置,any state切换,重写状态机 按键读取进行整数距离的刚体移动 用射线检测碰撞性 渲染顺序问题 ...

  4. Fzu2124 - 吃豆人 BFS

    Description 吃豆人是一款非常经典的游戏,游戏中玩家控制吃豆人在地图上吃光所有豆子,并且避免被怪物抓住. 这道题没有怪物,将游戏的画面分成n*m的格子,每格地形可能为空地或者障碍物,吃豆人可 ...

  5. TurnipBit开发板DIY呼吸的吃豆人教程实例

    转载请以链接形式注明文章来源(MicroPythonQQ技术交流群:157816561,公众号:MicroPython玩家汇) 0x00前言 吃豆人是耳熟能详的可爱形象,如今我们的TurnipBit也 ...

  6. [代码]解析nodejs的require，吃豆人的故事

    最近在项目中需要对nodejs的require关键字做解析,并且替换require里的路径.一开始我希望nodejs既然作为脚本语言,内核提供一个官方的parser库应该是一个稳定可靠又灵活的渠道,然 ...

  7. FZU 2124 吃豆人 bfs

    题目链接:吃豆人 比赛的时候写的bfs,纠结要不要有vis数组设置已被访问,没有的话死循环,有的话就不一定是最优解了.[此时先到的不一定就是时间最短的.]于是换dfs,WA. 赛后写了个炒鸡聪明的df ...

  8. FZU 2124 FOJ 2124 吃豆人【BFS】

     Problem 2124 吃豆人 Accept: 134    Submit: 575 Time Limit: 1000 mSec    Memory Limit : 32768 KB  Probl ...

  9. Pac-Man 吃豆人

    发售年份 1980 平台 街机 开发商 南梦宫(Namco) 类型 迷宫 https://www.youtube.com/watch?v=dScq4P5gn4A

随机推荐

  1. Flutter兼容AndroidX

    参考官方文档:https://flutter.dev/docs/development/packages-and-plugins/androidx-compatibility 第一步 distribu ...

  2. PageHelper踩坑

    刚开始死活分不了页,只显示默认的前 10条.搞了一下午,打了无数个断点都试不出毛病在哪. 下班又死磕到快8点,就在我已经绝望的时候,最后终于试出来了,把page.getTotal()给传到前端就好了. ...

  3. python 进程事件

    1.作用 通过信号量,控制全部进程进入阻塞状态,也可以通过控制信号量,解除全部进程的阻塞 注意:定义的事件对象,默认状态是阻塞 2.常用方法 """ 对象.set() 作 ...

  4. javaweb-codereview 学习记录-2

    1.Java 文件名空字节截断漏洞(%00 Null Bytes) 受空字节截断影响的JDK版本范围:JDK<1.7.40 实际上修复就是检查文件名中是否包含\u0000,包含则为非法路径 fi ...

  5. linux操作系统运行学习总结

    https://www.cnblogs.com/f-ck-need-u/p/10481466.html 操作系统学习总结 1.linux上面cpu通过上下文切换达到进程的不断切换,通过动态计算切换执行 ...

  6. AutoIT测试实例

     AutoIT是一款非常强大的免费功能自动化测试工具,使用它可以轻松实现web和winform的自动化测试.其脚本语言AU3语法类似于VB语言和vbs脚本语言,对于经常使用QTP的童鞋来说,非常容易上 ...

  7. NOI2.5 8783:单词接龙

    描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的"龙"(每个单词都最多在"龙"中 ...

  8. php--->把json传来的stdClass Object类型转array

    php把json传来的stdClass Object类型转array 1.Php中stdClass.object.array的概念 stdClass是PHP的一个基类,即一个空白的类,所有的类几乎都继 ...

  9. 从头学pytorch(二十二):全连接网络dense net

    DenseNet 论文传送门,这篇论文是CVPR 2017的最佳论文. resnet一文里说了,resnet是具有里程碑意义的.densenet就是受resnet的启发提出的模型. resnet中是把 ...

  10. SSH(二)

    SSH框架整合的系统架构,Action.Service.Dao.SessionFactory.DataSource都可以作为Spring的Bean组件管理 使用HibernateDaoSupport基 ...