一. 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. HTML中使用Vue+Dhtmlxgantt制作任务进度图

    HTML中使用Vue+Dhtmlxgantt制作任务进度图 Dhtmlxgantt官网: https://dhtmlx.com/docs/products/dhtmlxGantt/ 参考文章 甘特图配 ...

  2. JAVA中常用的异常处理方法

    1.在Java项目中经常遇到的异常情况 算术异常类:ArithmeticExecption 空指针异常类:NullPointerException 类型强制转换异常:ClassCastExceptio ...

  3. P1559 运动员最佳匹配问题 by hyl 天梦

    #include<iostream> using namespace std; int n; int maxx[21][21]; int lie[21]; int aa[21]; int ...

  4. Django SQLite3的使用

    https://blog.csdn.net/qq_34485436/article/details/72805908

  5. Tesseract-OCR-v5.0中文识别,训练自定义字库,提高图片的识别效果

    1,下载安装Tesseract-OCR 安装,链接地址https://digi.bib.uni-mannheim.de/tesseract/ ​ 2,安装成功 tesseract -v 注意:安装后, ...

  6. mysql使用唯一索引避免插入重复数据

    使用MySQL 索引防止一个表中的一列或者多列产生重复值 一:介绍MYSQL唯一索引 如果要强烈使一列或多列具有唯一性,通常使用PRIMARY KEY约束. 但是,每个表只能有一个主键. 因此,如果使 ...

  7. rabbitmq 实现延迟队列的两种方式

    原文地址:https://blog.csdn.net/u014308482/article/details/53036770 ps: 文章里面延迟队列=延时队列 什么是延迟队列 延迟队列存储的对象肯定 ...

  8. 《编写高质量代码:改善C#程序的157个建议》是C#程序员进阶修炼的必读之作

  9. Kindle Unlimited 上线的最热书单

    Kindle 也给出了一份,到现在为止,在 Kindle Unlimited 上线的最热书单: 1.岛上书店2.一个人的朝圣3.自控力4.嫌疑人 X 的献身5.沉默的大多数(王小波文集)6.跟任何人都 ...

  10. 异想家Ubuntu安装的软件

    [替换国内源] https://developer.aliyun.com/mirror/ubuntu 我提供一个下载,方便第一次安装懒得敲命令: https://jfz.me/16.04/source ...