css动画实现吃豆豆

话不多说，直接上代码：（作为一个初学者写的代码，多么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 }

注：头部用到的图片可以不添加，不影响最后展示的效果。

 

posted @ 2020-06-25 19:15  闫佳杰  阅读(501)  评论(0)    收藏  举报