"贪吃蛇"-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的++类型, ...
随机推荐
- 如何转换cdr文件
You will need to copy the type library from corelDRAW: C:\Program Files (x86)\Corel\CorelDRAW Graphi ...
- 029、限制容器的block IO（2019-01-24 周四）
参考https://www.cnblogs.com/CloudMan6/p/7016050.html Block IO ,是另一种可以限制容器使用的资源,block IO 指的是磁盘的读写,doc ...
- Python 连接MongoDB并比较两个字符串相似度的简单示例
本文介绍一个示例:使用 pymongo 连接 MongoDB,查询MongoDB中的 字符串 记录,并比较字符串之间的相似度. 一,Python连接MongoDB 大致步骤:创建MongoClient ...
- Java入门系列 Lambda表达式
https://blog.csdn.net/bitcarmanlee/article/details/70195403
- Sqlserver远程过程调用失败
这种情况一般是由于有高版本的SqlServer导致的,网上有删除Loaldb之类的建议,这样其实不太好,回头用高版本数据库的话还得装回来.其实可以通过计算机管理->服务和应用程序进行设置,用下面 ...
- 关于公众平台接口不再支持HTTP方式调用的公告
为保证数据传输安全,提高业务安全性,公众平台将不再支持HTTP方式调用.避免影响正常使用中含有HTTP方式调用的服务,请开发者尽快调整,将现有通过HTTP方式调用的切换成HTTPS调用,平台将于201 ...
- Hyperic-Sigar简介——检测与监控
http://blog.csdn.net/liyong199012/article/details/20302761 Hyperic-Sigar是一个收集系统各项底层信息的工具集.他有如下特点: 1. ...
- Windows代替touch命令
Windows 代替Linux中的touch命令: echo >
- [C++]2-4 子序列的和
/* 子序列的和(subsequence) 输入两个整数n<m<10^6,输出1/(n^2) + 1/((n+1)^2) + 1/((n+2)^2) 1/((n+3)^2) + ... + ...
- DAO层设计
一.类图分析 二.参考文档 ( JavaBean中DAO设计模式介绍)(附:设计源码) 三.类图设计文件 百度云盘:https://pan.baidu.com/s/1i5xaS8P[Power Des ...