一. 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. .net生成荣誉证书

    参考:https://blog.csdn.net/ljk126wy/article/details/84299373 采用生成pdf 方式  效果如下: 用adobe acrobat 制作一个模板  ...

  2. Centos 7.2 Jenkins+Ansible+Gitlab 基础配置

    注意:首先准备jenkins服务器  如何搭建jenkins 由于上篇文章中jenkins是采用war并部署在tomcat中来完成的安装,所以这里隆重介绍下启动tomcat的用户:tomcat,下面会 ...

  3. Ndarry对象

    创建一个 ndarray 只需调用 NumPy 的 array 函数即可: numpy.array(object, dtype = None, copy = True, order = None, s ...

  4. Oracle v_$和v$的解释

    以v_$mystat和v$mystat具体说明 grant语句中使用的v_$mystat和test用户访问的v$mystat不一样 这里说一下 v$mystat 和 v_$mystat 的区别 初始状 ...

  5. 西柚考勤系统——alpha2

    这个作业属于哪个课程 http://edu.cnblogs.com/campus/xnsy/GeographicInformationScience 这个作业的要求在哪里 https://www.cn ...

  6. docker-Gitlab、GitLab Runner安装

    以下操作均在CentOs下操作 1.Gitlab install ① 启动gitlab docker run --detach \ --hostname 115.30.149.35 \ --publi ...

  7. 光流法draw_flow()函数报错

    光流法draw_flow()函数报错 import cv2 from scipy import * def draw_flow(im, flow, step=16): ""&quo ...

  8. zabbix3.4源码安装步骤

    zabbix3.4源码安装步骤1.安装环境: 安装机器:22.224.9.227 以下简称监控机: 操作系统信息:内核版本: Linux version 2.6.18-194.1.AXS3 (pack ...

  9. Nginx核心模块

    error_log 语法:error_log file [ debug | info | notice | warn | error | crit ]默认值:${prefix}/logs/error. ...

  10. docker swoft

    docker swoft 安装并运行docker docker run -d -p 80:80 --name swoft swoft/swoft docker ps 查看正在运行的容器 docker ...