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. VirtualBox下安装Ubuntu Server 16.04

    安装环境: Windows:确保磁盘空间足够,一般需要8个G左右. 所需文件: 首先在Ubuntu的官网上下载.iso的镜像文件,链接是:http://www.ubuntu.org.cn/server ...

  2. 关于Mui严格模式下的报错解决方案

    前言:作为一名程序员遇到Bug总是在所难免的,但是记住"不二过",今天在Vue开发中遇到了一个报错让我纠结了许久,找了许久, 报错的原因是使用了mui导入其js文件导致的. 报错信 ...

  3. golang命令行参数

    os.Args获取命令行参数 os.Args是一个srting的切片,用来存储所有的命令行参数 package main import ( "fmt" "os" ...

  4. java中变量关系

  5. Spring MVC整合Mybatis 入门

    本文记录使用Intellij创建Maven Web工程搭建Spring MVC + Mybatis 的一个非常简单的示例.关于Mybatis的入门使用可参考这篇文章,本文在该文的基础上,引入了Spri ...

  6. Python下Tesseract Ocr引擎及安装介绍

    1.Tesseract介绍 tesseract 是一个google支持的开源ocr项目,其项目地址:https://github.com/tesseract-ocr/tesseract,目前最新的源码 ...

  7. python3.x与2.x区别

    1.性能 Py3.0运行 pystone benchmark的速度比Py2.5慢30%.Guido认为Py3.0有极大的优化空间,在字符串和整形操作上可 以取得很好的优化结果. Py3.1性能比Py2 ...

  8. 割点判断+luogu 3469 POI2008 BLO

    1.根节点,有2棵及以上子树 2.非根节点,有子节点dfn[u]<=low[v] #include <bits/stdc++.h> #define N 1000050 using n ...

  9. Web Of Science

  10. 初识生成器与生成器表达式 Day12

    一.生成器 1,生成器基本概念 生成器的实质是迭代器 迭代器:Iterator 内部同时包含了__iter__()和__next__()函数 可迭代对象:Iterable 内部包含__iter__() ...