"贪吃蛇"-css3效果

clip 　  :  http://www.w3school.com.cn/cssref/pr_pos_clip.asp

姜糖水  :  http://www.cnphp6.com/archives/60496

 

Demo截图:

Demo:Demo

上代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .main {
 8           position: relative;
 9           width: 250px;
10           height: 250px;
11           margin: 100px auto;
12         }
13         .box,
14         .box::after,
15         .box::before {
16           display: block;
17           position: absolute;
18           top: 0;
19           bottom: 0;
20           left: 0;
21           right: 0;
22           color: #ccc;
23         }
24         .box {
25           width: 200px;
26           height: 200px;
27           margin: auto;
28           box-shadow: inset 0 0 0 2px;
29           text-align: center;
30           line-height: 200px;
31           font-size: 16px;
32         }
33         .box::after,
34         .box::before {
35           content: '';
36           box-shadow: inset 0 0 0 2px;
37           margin: -5%;
38           animation: clipMe 8s linear infinite;
39         }
40         .box::after {
41           animation-delay: -4s;
42         }
43         @-webkit-keyframes clipMe {
44           0%,
45           100% {
46             clip: rect(0px, 220px, 2px, 0px);
47           }
48           25% {
49             clip: rect(0px, 2px, 220px, 0px);
50           }
51           50% {
52             clip: rect(218px, 220px, 220px, 0px);
53           }
54           75% {
55             clip: rect(0px, 220px, 220px, 208px);
56           }
57         }
58     </style>
59 </head>
60 <body>
61     <div class="main">
62         <div class="box">
63              这效果叫啥名，贪吃蛇么
64         </div>
65     </div>
66 </body>
67 </html>
View Code

 

后记：

其实这个效果是扒的，所以我也不知道这效果叫啥名。

主要理解：css clip 剪裁图像  rect(top,right,bottom,left) 四个剪切值 

剪切出四条边 变成keyframes 四个关键动画帧值 运动就可以了。

 

 

rect (top, right, bottom, left)

posted @ 2015-11-05 15:24  uustoboy  阅读(717)  评论(0)  编辑  收藏  举报