"贪吃蛇"-css3效果
clip : http://www.w3school.com.cn/cssref/pr_pos_clip.asp
姜糖水 : http://www.cnphp6.com/archives/60496
Demo截图:
Demo:Demo
上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.main {
position: relative;
width: 250px;
height: 250px;
margin: 100px auto;
}
.box,
.box::after,
.box::before {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #ccc;
}
.box {
width: 200px;
height: 200px;
margin: auto;
box-shadow: inset 0 0 0 2px;
text-align: center;
line-height: 200px;
font-size: 16px;
}
.box::after,
.box::before {
content: '';
box-shadow: inset 0 0 0 2px;
margin: -5%;
animation: clipMe 8s linear infinite;
}
.box::after {
animation-delay: -4s;
}
@-webkit-keyframes clipMe {
0%,
100% {
clip: rect(0px, 220px, 2px, 0px);
}
25% {
clip: rect(0px, 2px, 220px, 0px);
}
50% {
clip: rect(218px, 220px, 220px, 0px);
}
75% {
clip: rect(0px, 220px, 220px, 208px);
}
}
</style>
</head>
<body>
<div class="main">
<div class="box">
这效果叫啥名，贪吃蛇么
</div>
</div>
</body>
</html>
后记：
其实这个效果是扒的，所以我也不知道这效果叫啥名。
主要理解：css clip 剪裁图像 rect(top,right,bottom,left) 四个剪切值
剪切出四条边 变成keyframes 四个关键动画帧值 运动就可以了。
rect (top, right, bottom, left)
"贪吃蛇"-css3效果的更多相关文章
- unity像素贪吃蛇
[ 星 辰 · 别 礼 ] 设计过程: 首先,在之前玩坏控制台做的那个c#贪吃蛇之后,我以为做unity会很简单,但事实比较不如人意...拖了好几天.因为过程中遇到一些问题 蛇身的移动,还是用列表,将 ...
- iOS补位动画、沙漏效果、移动UITableViewCell、模拟贪吃蛇、拖拽进度等源码
iOS精选源码 JHAlertView - 一款黑白配色的HUD之沙漏效果 继承UIButton的自定义按钮SPButton 用递归算法实现iOS补位动画 iOS 长按移动UITableViewCel ...
- Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录
一.项目简介 贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...
- HTML 5 背离贪吃蛇 写成了类似于屏幕校准
中间写了改 改了写 还是没做出自己满意的效果 ,看来自己的确不是一个走前端的料子.当然h5还是学一点好一点 具体说来 就是 在canvas 的画布中 鼠标点击后画上一个圆形 然后就有随机的在画布上面出 ...
- 贪吃蛇的java代码分析（二）
代码剖析 贪吃蛇是一款十分经典的小游戏,对初入coding的朋友来说,拿贪吃蛇这样一个案例来练手十分合适,并不高的难度和成功后的成就感都是学习所必须的.下面我将依照我当时的思路,来逐步分析实现的整个过 ...
- 以小时候玩的贪吃蛇为例，对于Java图像界面的学习感悟
简介 正文 01.JFrame是啥? 02.JPanel 03. KeyListener 04.Runnable 05.游戏Running 06.游戏初始类编写 07.main 简介: 一直以来用代码 ...
- 原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
- WebGL实现HTML5贪吃蛇3D游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
- WebGL实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
随机推荐
- HDU 1011(星河战队 树形DP)
题意是说在一个洞穴中有许多房间,每个房间中有一些虫子和大脑,这些房间之间用隧道相连形成一棵树,士兵们杀虫子的能力有限,也可以直接杀死虫子而不消耗士兵战斗力,但这样就无法得到房间中的大脑,士兵们不能走回 ...
- MyBatis SQL语句操作Mysql
本文记录使用Mybatis操作数据库时碰到的一些语句,供以后参考. 一,多条件查询 示意SQL语句:SELECT t_field1, t_field2 FROM table_name WHERE t_ ...
- Groovy 设计模式 -- proxy & delegate
Proxy https://en.m.wikipedia.org/wiki/Proxy 代理人 与 被代理人 是 一对一的关系. A proxy is an agent or substitute a ...
- 【bzoj 2588】Spoj 10628. Count on a tree
Description 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始 ...
- 【51nod 1288】汽油补给
Description 有(N+1)个城市,0是起点N是终点,开车从0 -> 1 - > 2...... -> N,车每走1个单位距离消耗1个单位的汽油,油箱的容量是T.给出每个城市 ...
- Matconvnet环境配置一些坑
1.先安装VS再安装matlab否则安装失败 2.cuda7.5支持MATLABR2016a/b,支持VS2013但是不支持VS2015 3.cuda8.0支持MABTLABR2017a,对应编译需V ...
- Java SE之正则表达式二：匹配
package demo.regex; import java.util.regex.Pattern; /* 正则表达式:匹配 */ public class RegexMatchesDemo { / ...
- Java EE之Request部分方法使用示例
Description: ApplicationProjectName:MedicineMs login.jsp[action:login|method:get] to loginServlet Ou ...
- flash 概要分析器
这个东东 调试用.会每毫秒一次记录正在运行的函数 及相关数据 只在调试版flash player才能用. startSampling 开始记录 getSamples 获取记录 Sample ...
- 登录mysql时的一些命令
清屏: cls 只要输入cls然后回车运行命令,可以清屏. 查看版本号: mysql -V 注意:V一定要大写,如果不大写就错了... 登录: mysql -u用户名 -p密码 -P端口号 -h数据库 ...