话不多说,直接上代码:(作为一个初学者写的代码,多么0基础都能看的懂吧。)
HTML部分
1 <!DOCTYPE html>
2 <html lang=en>
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1.0">
6 <meta name="keywords" content=" " > <!-- 设置一个网站的搜索关键字-->
7 <meta name="description" content=" "> <!--网站的描述内容-->
8 <title>网页有些延迟时候的动画效果</title>
9 <link rel="shortcut icon" href="../images/loading.jpg" type="image/jpg"> <!--设置网站小图标-->
10 <link rel="stylesheet" href="../css/myStyle.css" type="text/css">
11 </head>
12 <body>
13 <div class="eat-wrap">
14 </div>
15 <h2> Loading.... </h2>
16 </body>
17 </html>
CSS部分
1 *{
2 padding: 0;
3 margin: 0; /* 外边距:0; */
4 }
5 html,body{ /*这个不写也不影响我们的结果*/
6 width: 100%;
7 height: 1000px;
8 overflow: hidden; /*CSS属性:溢出*/
9 }
10 .eat-wrap{
11 width: 200px;
12 height: 200px;
13 margin-top: 100px;
14 background-color: white; /*这里的颜色设置成黑色是为了跟背景色融合,来使之前的圆消失,因为背景颜色默认是白色的,所以设置成白色,而如果设置了背景颜色的话,这里也要跟着变*/
15 /* 盒子的影子:(四个值的表示:) 水平方向移动大小 垂直方向 影子的模糊程度 影子的大小 颜色*/
16 box-shadow: 300px 0 0 -80px wheat, /*这里设置的颜色不能决定豆豆的颜色*/
17 450px 0 0 -80px wheat,
18 600px 0 0 -80px wheat,
19 750px 0 0 -80px wheat;
20 border-radius: 100px; /* 四个值都一样的时候,可以只写一个;或者用百分数表示也行(一般要想是正方形变成圆形,直接用50%就行) */
21 animation: move 1s infinite; /* 执行动画 */ /* infinite:无限循环下去 */
22 }
23 .eat-wrap::before{ /* 伪元素 */ /* !!写这一行代码是注意冒号的中英文,双冒号前没有空格 !!*/
24 content: ""; /* 激活伪元素 */
25 display: block; /* 内联-> 块 */
26 width: 200px;
27 height: 100px;
28 margin-left: 100px; /* 把大嘴往右移动,使能够产生吃豆豆到嘴里的效果 */
29 border-radius: 100px 100px 0 0; /* 标签的四个角 从左上顺时针 */
30 background-color: navajowhite;
31 transform: rotate(-30deg); /* css动画——2D转换 */ /* 变换:角度(单位) */
32 /*-webkit-transform: rotate(-30deg); /* 如今都支持了!这里可以省去
33 webkit来支持Chrome 和safari浏览器
34 -ms-transform:XXX(XXX,XXX……); 支持的是IE浏览器(360)
35 -o-transform:xxx(xxx,xxx……); 支持的是Opera
36 -moz-transform:xxx(); 支持firefox浏览器
37 */
38 animation: top_run 1s infinite; /* 动画的引入 */ /* infinite:无限循环下去 */
39 }
40
41 .eat-wrap::after{ /* 伪元素 */
42 content: ""; /* 激活伪元素 */
43 display: block; /* 内联-> 块 */
44 width: 200px;
45 height: 100px;
46 margin-left: 100px; /* 把大嘴往有移动,使能够产生吃豆豆到嘴里的效果 */
47 border-radius: 0 0 100px 100px ; /* 标签的四个角 从左上顺时针 */
48 background-color:navajowhite;
49 transform: rotate(30deg); /* 变换:角度(单位) */
50 /*-webkit-transform: rotate(30deg);*/
51 animation: bottom_run 1s infinite; /* 动画的引入 */
52 }
53
54 /* 关键动画帧 -> 0% 开始 50% 中间 100% 结束 */
55 @keyframes top_run {
56 0%,100%{
57 transform: rotate(-0deg);
58 }
59 50%{
60 transform: rotate(-30deg);
61 }
62 }
63 @keyframes bottom_run {
64 0%,100%{
65 transform: rotate(0deg);
66 }
67 50%{
68 transform: rotate(30deg);
69 }
70 }
71 @keyframes move { /*嘴里豆豆的颜色由这里设置的决定*/
72 0%{
73 box-shadow: 300px 0 0 -80px antiquewhite,
74 450px 0 0 -80px antiquewhite,
75 600px 0 0 -80px antiquewhite,
76 750px 0 0 -80px antiquewhite;
77 }
78 100%{
79 box-shadow: 150px 0 0 -80px antiquewhite,
80 300px 0 0 -80px antiquewhite,
81 450px 0 0 -80px antiquewhite,
82 600px 0 0 -80px antiquewhite;
83 }
84 }
85 /* 立体文字的效果 */
86 h2{
87 font-size: 110px;
88 color: white;
89 margin-left: 50px;
90 margin-top: 100px;
91 /* x,y,阴影距离,颜色 */
92 text-shadow:
93 0 0 0 black,
94 1px -1px 0 black,
95 2px -2px 0 black,
96 3px -3px 0 black,
97 4px -4px 0 black,
98 5px -5px 0 black,
99 6px -6px 0 black,
100 7px -7px 0 black,
101 8px -8px 0 black;
102 }
注:头部用到的图片可以不添加,不影响最后展示的效果。
宜将剩勇追穷寇,不可沽名学霸王。