"贪吃蛇"-css3效果

最新推荐文章于 2023-04-20 14:56:22 发布

weixin_30617561

最新推荐文章于 2023-04-20 14:56:22 发布

阅读量176

点赞数

原文链接：http://www.cnblogs.com/auok/p/4939660.html

版权

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)

转载于:https://www.cnblogs.com/auok/p/4939660.html

weixin_30617561

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
"贪吃蛇"-css3效果

clip 　 : http://www.w3school.com.cn/cssref/pr_pos_clip.asp姜糖水 : http://www.cnphp6.com/archives/60496Demo截图:Demo:Demo上代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 &...
复制链接

扫一扫