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>
后记：
其实这个效果是扒的，所以我也不知道这效果叫啥名。
主要理解：css clip 剪裁图像 rect(top,right,bottom,left) 四个剪切值
剪切出四条边 变成keyframes 四个关键动画帧值 运动就可以了。
rect (top, right, bottom, left)