css吃豆人动画
一. 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吃豆人动画的更多相关文章
- 利用纯css写三角形,弧度箭头,吃豆人,气泡。放大镜,标签的源码
1. 向上三角形
- 用python的turtle作图(二)动画吃豆人
本文是用python的turtle作图的第二篇,通过这个例子可以了解动画的原理,用python自带的turtle库制作一些小动画. 1.问题描述 在上一篇"用python的turtle作图( ...
- Unity项目 - 吃豆人Pacman
项目展示 Github项目地址:Pacman 涉及知识 切片制作 Animations 状态机设置,any state切换,重写状态机 按键读取进行整数距离的刚体移动 用射线检测碰撞性 渲染顺序问题 ...
- Fzu2124 - 吃豆人 BFS
Description 吃豆人是一款非常经典的游戏,游戏中玩家控制吃豆人在地图上吃光所有豆子,并且避免被怪物抓住. 这道题没有怪物,将游戏的画面分成n*m的格子,每格地形可能为空地或者障碍物,吃豆人可 ...
- TurnipBit开发板DIY呼吸的吃豆人教程实例
转载请以链接形式注明文章来源(MicroPythonQQ技术交流群:157816561,公众号:MicroPython玩家汇) 0x00前言 吃豆人是耳熟能详的可爱形象,如今我们的TurnipBit也 ...
- [代码]解析nodejs的require,吃豆人的故事
最近在项目中需要对nodejs的require关键字做解析,并且替换require里的路径.一开始我希望nodejs既然作为脚本语言,内核提供一个官方的parser库应该是一个稳定可靠又灵活的渠道,然 ...
- FZU 2124 吃豆人 bfs
题目链接:吃豆人 比赛的时候写的bfs,纠结要不要有vis数组设置已被访问,没有的话死循环,有的话就不一定是最优解了.[此时先到的不一定就是时间最短的.]于是换dfs,WA. 赛后写了个炒鸡聪明的df ...
- FZU 2124 FOJ 2124 吃豆人【BFS】
Problem 2124 吃豆人 Accept: 134 Submit: 575 Time Limit: 1000 mSec Memory Limit : 32768 KB Probl ...
- Pac-Man 吃豆人
发售年份 1980 平台 街机 开发商 南梦宫(Namco) 类型 迷宫 https://www.youtube.com/watch?v=dScq4P5gn4A
随机推荐
- HTML中使用Vue+Dhtmlxgantt制作任务进度图
HTML中使用Vue+Dhtmlxgantt制作任务进度图 Dhtmlxgantt官网: https://dhtmlx.com/docs/products/dhtmlxGantt/ 参考文章 甘特图配 ...
- JAVA中常用的异常处理方法
1.在Java项目中经常遇到的异常情况 算术异常类:ArithmeticExecption 空指针异常类:NullPointerException 类型强制转换异常:ClassCastExceptio ...
- P1559 运动员最佳匹配问题 by hyl 天梦
#include<iostream> using namespace std; int n; int maxx[21][21]; int lie[21]; int aa[21]; int ...
- Django SQLite3的使用
https://blog.csdn.net/qq_34485436/article/details/72805908
- Tesseract-OCR-v5.0中文识别,训练自定义字库,提高图片的识别效果
1,下载安装Tesseract-OCR 安装,链接地址https://digi.bib.uni-mannheim.de/tesseract/ 2,安装成功 tesseract -v 注意:安装后, ...
- mysql使用唯一索引避免插入重复数据
使用MySQL 索引防止一个表中的一列或者多列产生重复值 一:介绍MYSQL唯一索引 如果要强烈使一列或多列具有唯一性,通常使用PRIMARY KEY约束. 但是,每个表只能有一个主键. 因此,如果使 ...
- rabbitmq 实现延迟队列的两种方式
原文地址:https://blog.csdn.net/u014308482/article/details/53036770 ps: 文章里面延迟队列=延时队列 什么是延迟队列 延迟队列存储的对象肯定 ...
- 《编写高质量代码:改善C#程序的157个建议》是C#程序员进阶修炼的必读之作
- Kindle Unlimited 上线的最热书单
Kindle 也给出了一份,到现在为止,在 Kindle Unlimited 上线的最热书单: 1.岛上书店2.一个人的朝圣3.自控力4.嫌疑人 X 的献身5.沉默的大多数(王小波文集)6.跟任何人都 ...
- 异想家Ubuntu安装的软件
[替换国内源] https://developer.aliyun.com/mirror/ubuntu 我提供一个下载,方便第一次安装懒得敲命令: https://jfz.me/16.04/source ...