话不多说，直接上代码：（作为一个初学者写的代码，多么0基础都能看的懂吧。）
HTML部分
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="keywords" content=" " > <!-- 设置一个网站的搜索关键字-->
<meta name="description" content=" "> <!--网站的描述内容-->
<title>网页有些延迟时候的动画效果</title>
<link rel="shortcut icon" href="../images/loading.jpg" type="image/jpg"> <!--设置网站小图标-->
<link rel="stylesheet" href="../css/myStyle.css" type="text/css">
</head>
<body>
<div class="eat-wrap">
</div>
<h2> Loading.... </h2>
</body>
</html>
CSS部分
*{
padding:;
margin:; /* 外边距：0; */
}
html,body{ /*这个不写也不影响我们的结果*/
width: 100%;
height: 1000px;
overflow: hidden; /*CSS属性：溢出*/
}
.eat-wrap{
width: 200px;
height: 200px;
margin-top: 100px;
background-color: white; /*这里的颜色设置成黑色是为了跟背景色融合，来使之前的圆消失,因为背景颜色默认是白色的,所以设置成白色,而如果设置了背景颜色的话,这里也要跟着变*/
/* 盒子的影子:(四个值的表示：) 水平方向移动大小 垂直方向 影子的模糊程度 影子的大小 颜色*/
box-shadow: 300px 0 0 -80px wheat, /*这里设置的颜色不能决定豆豆的颜色*/
450px 0 0 -80px wheat,
600px 0 0 -80px wheat,
750px 0 0 -80px wheat;
border-radius: 100px; /* 四个值都一样的时候，可以只写一个；或者用百分数表示也行（一般要想是正方形变成圆形，直接用50%就行） */
animation: move 1s infinite; /* 执行动画 */ /* infinite：无限循环下去 */
}
.eat-wrap::before{ /* 伪元素 */ /* !!写这一行代码是注意冒号的中英文，双冒号前没有空格 !!*/
content: ""; /* 激活伪元素 */
display: block; /* 内联-> 块 */
width: 200px;
height: 100px;
margin-left: 100px; /* 把大嘴往右移动，使能够产生吃豆豆到嘴里的效果 */
border-radius: 100px 100px 0 0; /* 标签的四个角 从左上顺时针 */
background-color: navajowhite;
transform: rotate(-30deg); /* css动画——2D转换 */ /* 变换：角度（单位） */
/*-webkit-transform: rotate(-30deg); /* 如今都支持了！这里可以省去
webkit来支持Chrome 和safari浏览器
-ms-transform:XXX(XXX,XXX……); 支持的是IE浏览器（360）
-o-transform:xxx(xxx,xxx……); 支持的是Opera
-moz-transform:xxx(); 支持firefox浏览器
*/
animation: top_run 1s infinite; /* 动画的引入 */ /* infinite：无限循环下去 */
}
.eat-wrap::after{ /* 伪元素 */
content: ""; /* 激活伪元素 */
display: block; /* 内联-> 块 */
width: 200px;
height: 100px;
margin-left: 100px; /* 把大嘴往有移动，使能够产生吃豆豆到嘴里的效果 */
border-radius: 0 0 100px 100px ; /* 标签的四个角 从左上顺时针 */
background-color:navajowhite;
transform: rotate(30deg); /* 变换：角度（单位） */
/*-webkit-transform: rotate(30deg);*/
animation: bottom_run 1s infinite; /* 动画的引入 */
}
/* 关键动画帧 -> 0% 开始 50% 中间 100% 结束 */
@keyframes top_run {
0%,100%{
transform: rotate(-0deg);
}
50%{
transform: rotate(-30deg);
}
}
@keyframes bottom_run {
0%,100%{
transform: rotate(0deg);
}
50%{
transform: rotate(30deg);
}
}
@keyframes move { /*嘴里豆豆的颜色由这里设置的决定*/
0%{
box-shadow: 300px 0 0 -80px antiquewhite,
450px 0 0 -80px antiquewhite,
600px 0 0 -80px antiquewhite,
750px 0 0 -80px antiquewhite;
}
100%{
box-shadow: 150px 0 0 -80px antiquewhite,
300px 0 0 -80px antiquewhite,
450px 0 0 -80px antiquewhite,
600px 0 0 -80px antiquewhite;
}
}
/* 立体文字的效果 */
h2{
font-size: 110px;
color: white;
margin-left: 50px;
margin-top: 100px;
/* x,y,阴影距离，颜色 */
text-shadow:
0 0 0 black,
1px -1px 0 black,
2px -2px 0 black,
3px -3px 0 black,
4px -4px 0 black,
5px -5px 0 black,
6px -6px 0 black,
7px -7px 0 black,
8px -8px 0 black;
}
注：头部用到的图片可以不添加，不影响最后展示的效果。