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效果的更多相关文章

  1. unity像素贪吃蛇

    [ 星 辰 · 别 礼 ] 设计过程: 首先,在之前玩坏控制台做的那个c#贪吃蛇之后,我以为做unity会很简单,但事实比较不如人意...拖了好几天.因为过程中遇到一些问题 蛇身的移动,还是用列表,将 ...

  2. iOS补位动画、沙漏效果、移动UITableViewCell、模拟贪吃蛇、拖拽进度等源码

    iOS精选源码 JHAlertView - 一款黑白配色的HUD之沙漏效果 继承UIButton的自定义按钮SPButton 用递归算法实现iOS补位动画 iOS 长按移动UITableViewCel ...

  3. Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录

    一.项目简介 贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...

  4. HTML 5 背离贪吃蛇 写成了类似于屏幕校准

    中间写了改 改了写 还是没做出自己满意的效果 ,看来自己的确不是一个走前端的料子.当然h5还是学一点好一点 具体说来 就是 在canvas 的画布中 鼠标点击后画上一个圆形 然后就有随机的在画布上面出 ...

  5. 贪吃蛇的java代码分析（二）

    代码剖析 贪吃蛇是一款十分经典的小游戏,对初入coding的朋友来说,拿贪吃蛇这样一个案例来练手十分合适,并不高的难度和成功后的成就感都是学习所必须的.下面我将依照我当时的思路,来逐步分析实现的整个过 ...

  6. 以小时候玩的贪吃蛇为例，对于Java图像界面的学习感悟

    简介 正文 01.JFrame是啥? 02.JPanel 03. KeyListener 04.Runnable 05.游戏Running 06.游戏初始类编写 07.main 简介: 一直以来用代码 ...

  7. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  8. WebGL实现HTML5贪吃蛇3D游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

  9. WebGL实现HTML5的3D贪吃蛇游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

随机推荐

  1. Doker安装日志，留个记录而已

    tianye@ubuntu:/usr/share$ wget -qO- https://get.docker.com/ | sh # Executing docker install script, ...

  2. python-虚拟环境搭建

    虚拟环境 需求:        --公司之有一台服务器        -目前运行这一个5年前开发的Django项目,基于1.5        -现在要基于Django2.0开发一套程序         ...

  3. 用Google Brain的机器学习项目：Magenta，教神经网络学抖音小姐姐作曲。

    先上我们要学习的小姐姐 的美照.. 一.配置环境 1.自己配置环境:python,tensorflow,bazel(编译),java.然后下载magenta(https://github.com/te ...

  4. DataTabe使用Linq实现 Group

    DataTable dt = dataSet.Tables[]; var query = from t in dt.AsEnumerable() group t by new { t1 = t.Fie ...

  5. Nginx不支持Post数据中带有"."

    如果提交的数据中带有.,nginx会把数据过滤掉,会导致后台收不到数据.下面是一个错误示例及解决办法

  6. Mono.Cecil

    Mono Cecil十分强大,强大到可以静态注入程序集(注入后生成新的程序集)和动态注入程序集(注入后不改变目标程序集,只在运行时改变程序集行为),它甚至可以用来调试PDB MDB调试符号格式文件. ...

  7. Spring 快速开始 配置Spring Framework

    [配置Spring Framework] 1.XML配置依赖关系 bean是由Springframework管理,我们自己编写bean,Spring也内建了bean,比如ApplicationCont ...

  8. Oracle DbHelper

    wind8 系统选择项目时生成目标平台选择为X86 报错 “System.Exception”类型的未经处理的异常在 WindowsFormsApplication1.exe 中发生 其他信息: 尝试 ...

  9. Nginx 关闭日志生成文件

    nginx 关闭日志:其实一种方法就是写入/dev/null 文件 或者设置关闭: nginx 日志有两个类型  access.log  http 记录访问日志. error.log   server ...

  10. Python之进程 1 - 基本概念

    一 背景知识 顾名思义,进程即正在执行的一个过程.进程是对正在运行程序的一个抽象. 进程的概念起源于操作系统,是操作系统最核心的概念,也是操作系统提供的最古老也是最重要的抽象概念之一.操作系统的其他所 ...