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. 关于react上线系列问题及解决方案

    近使用react做了一个音乐播放器小项目,在线下开发完成后,测试一切都没有问题,于是打算打包上线.首先注册了一个新浪云账号,然后创建了一个SAE应用实例,再然后就照着新浪云给出的远程仓库进行push. ...

  2. Redis 高可用分布式集群

    一,高可用 高可用(High Availability),是当一台服务器停止服务后,对于业务及用户毫无影响. 停止服务的原因可能由于网卡.路由器.机房.CPU负载过高.内存溢出.自然灾害等不可预期的原 ...

  3. PhotoshopCC2018安装流程以及破解

    2018版增加了不少功能,也对优化PS软件进行了不少的优化,界面更加简洁美观 这里以64位为主. 1.首先下载好PhotoshopCC安装包和破解包,分别解压 2.解压完毕后,在安装包里面双击Setu ...

  4. 804. Unique Morse Code Words

    Description International Morse Code defines a standard encoding where each letter is mapped to a se ...

  5. JS创建对象之构造函数模式

    function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = f ...

  6. orcle查看表空间数据文件使用情况

    -- 查看表空间数据文件使用情况select a.*, round(a.usedgb/a.maxgb*100) || '%' usedPer from (select t.TABLESPACE_NAM ...

  7. Docker 添加环境系统文件配置

    在 docker 启动文件添加默认环境系统配置 " /etc/default/docker ": 添加  Environment File 配置: # vi /usr/lib/sy ...

  8. [C++]Linux之进程间通信小结【待完善】

    [此博文,待日后完善] 进程通信方式: 1.管道通信(匿名管道/命名管道) 2.消息队列 3.共享内存 4.信号量 1.管道通信 无名管道用于具有亲缘关系进程间的通信管道是半双工的,数据只能单向流动( ...

  9. visual studio属性管理器

    位于 视图->其它窗口 项目配置属性,这个项目的属性别的项目也需要的时候可以把属性页复制到新项目. 以及配置单个项目的不同构建方案

  10. 迅为4412开发板QtE系统源码-屏幕横竖屏切换修改方法

    迅为4412开发板QtE系统源码-屏幕横竖屏切换修改方法 详情了解:http://topeetboard.com 更多了解:https://arm-board.taobao.com/ 用户在开发板上运 ...