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. 各种loading加载中gif图标

    点击这里打包下载更多样式

  2. HDU 1046(最短路径 **)

    题意是要在一个矩形点阵中求能从一点出发遍历所有点再回到起始点的最短路径长度. 不需要用到搜索什么的,可以走一个“梳子型”即可完成最短路径,而情况可以被分成如下两种: 一.矩形的长或宽中有偶数,则可以走 ...

  3. 【关键字】c++关键字

    1. alignas (c++11) 设置类和struct的字节对齐方式 默认取值是:  2n : 0, 1, 2, 4 , 6, 8..... 2. alignof 区分sizeof(), alig ...

  4. system.net.webexception远程服务器返回了错误: NotFound。

    Not Found类的错误主要是由于网络服务访问出错.所以需要分析是由哪个网络服务访问失败而导致的. DataAccessSilverlight.PowerDataServiceReference.G ...

  5. vim学习之改头换面（基础配置）

    还记得在线有个维护博客园的学长说过,这网站的前端做的贼丑,今日一看果真如此.其实我想说毕竟干货多,没有那么多花花肠子.下面开始进入正题. 在入坑了sublime.vscode.atom.notepad ...

  6. VisualStuido C# Files 的值“<<<<<<< .mine”无效。路径中具有非法字符。

    直接在项目中搜是搜不到<<<<<<.mine,可以直接删除obj文件夹.

  7. 20155324 2016-2017-2 《Java程序设计》第8周学习总结

    20155324 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 通用API -** 日志API** 1.~java.util.logging~包提供了日志功 ...

  8. influxdb

    1.安装Centos# wget https://dl.influxdata.com/influxdb/releases/influxdb-1.1.0.x86_64.rpm# rpm -ivh inf ...

  9. Kafka如何保证消息不丢失不重复

    首先需要思考下边几个问题: 消息丢失是什么造成的,从生产端和消费端两个角度来考虑 消息重复是什么造成的,从生产端和消费端两个角度来考虑 如何保证消息有序 如果保证消息不重不漏,损失的是什么 大概总结下 ...

  10. Angular4

    1.安装node.js 官网下载安装 npm会跟着被自动安装 2.安装Angular工具(AngularCli) 1.使用npm安装 npm install -g @angular/cli 2使用cn ...