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. [JVM-1]Java运行时数据区域

    Java虚拟机(JVM)内部定义了程序在运行时需要使用到的内存区域 这些区域都有自己的用途,以及创建和销毁的时间.有些区域随着虚拟机进程的启动而存在,有的区域则依赖用户线程的启动和结束而销毁和建立. ...

  2. callback hell (回调地狱)

    callback hell (回调地狱) callback(回调) 如何修复 callback hell callback 回调只是存放一些即将要处理的代码. 回调的执行顺序不是从上到下的,而是根据事 ...

  3. 23.Secondary Index

    一. Secondary Index(二级索引)1.1. Secondary Index 介绍 • Clustered Index(聚集索引) ◦ 叶子节点存储所有记录(all row data) • ...

  4. talk命令帮助文档(ubuntu 18.04)

    TALK() BSD General Commands Manual TALK() NAME talk — talk to another user SYNOPSIS talk person [tty ...

  5. 符号执行-基于python的二进制分析框架angr

    转载:All Right 符号执行概述 在学习这个框架之前首先要知道符号执行.符号执行技术使用符号值代替数字值执行程序,得到的变量的值是由输入变 量的符号值和常量组成的表达式.符号执行技术首先由Kin ...

  6. 用Windows Media Service打造的流媒体点播

    所谓流媒体是指采用流式传输的方式在Internet播放的媒体格式.和需要将整个视频文件全部下载之后才能观看的传统方式相比,流媒体技术是通过将视频文件经过特殊的压缩方式分成一个个的小数据包,由视频服务器 ...

  7. 虚拟环境jupyter notebook使用【virtualenv环境】

    一.进入虚拟环境 source tf1/bin/activate 二.安装 IPykernel python2版本: pip install ipykernel python3版本: pip3 ins ...

  8. 电脑丢失api-ms-win-core-libraryloader-|1-1-1.dll怎么办

    电脑从win7升级到win10,到98%的时候提示说丢失.dll,如图,我是64位系统,怎么解决这个问题呢?在脚本之家下载了 放到system32中也没有用,在线等,谢谢! 用C:\Windows\S ...

  9. 第26月第7天 mac如何matplotlib中文乱码问题

    1.mac如何matplotlib中文乱码问题 先查看 ~/.matplotlib/fontList.json 添加SimHei字体(simhei.ttf文件)到 /Library/Framework ...

  10. python的sys.args使用

    一.sys 模块 sys是Python的一个「标准库」,也就是官方出的「模块」,是「System」的简写,封装了一些系统的信息和接口. 官方的文档参考:https://docs.python.org/ ...