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

 }

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

css动画实现吃豆豆的更多相关文章

  1. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  2. 你所不知道的 CSS 动画技巧与细节

    怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...

  3. 盒子端 CSS 动画性能提升研究

    不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...

  4. React Transition css动画案例解析

    实现React Transition Css动画效果 首先在项目工程中引入react-transition-group: npm install react-transition-group --sa ...

  5. Css 动画的回调

    在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...

  6. 【译】css动画里的steps()用法详解

    原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...

  7. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  8. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  9. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

随机推荐

  1. NIO(三)：Selector选择器

    一.堵塞式与非堵塞式 在传统IO中,将数据由当前线程从客户端传入服务端,由服务端的内核进行判断传过来的数据是否合法,内核中是否存在数据. 如果不存在数据 ,并且数据并不合法,当前线程将会堵塞等待.当前 ...

  2. C#LeetCode刷题-脑筋急转弯

    脑筋急转弯篇 # 题名 刷题 通过率 难度 292 Nim游戏   62.5% 简单 319 灯泡开关   31.8% 中等 777 在LR字符串中交换相邻字符   21.9% 中等

  3. C#算法设计排序篇之07-希尔排序（附带动画演示程序）

    希尔排序(Shell's Sort) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/687 访问. 希尔排序是插入排序的 ...

  4. .net 跨平台桌面程序 avalonia：从项目创建到打包部署linux-64系统deepin 或 ubuntu。

    介绍: 目前微软还没有跨平台桌面程序的开发框架.github上有一个团队开始自行研发跨平台桌面框架,其中一款叫avalonia.avalonia 采用 Xaml+C#,类似于wpf,可运行于.netf ...

  5. STM32 重启之后程序丢失

    1 BOOT1 BOOT0都已经接10K接地,晶振波形正常 2 在主程序最开始运行的地方加入5秒的延时,程序不会丢失.原因可能为单片机其它外设没有准备好 int main(void) { delay_ ...

  6. PYTHON-错误-函数有返回值未接收导致替换不成功

    #1.有返回值,没有赋值,替换不成功 cxj = 'guapi' cxj.replace(cxj,'2b') print(cxj) #2.有返回值,赋值,替换成功 cxj = 'guapi' cxj ...

  7. Uni-app从入门到实战

    前言 uni-app是一个使用vue.js开发跨平台应用的前端框架,开发者只需要编写一套代码,便可以发布到IOS.Android和微信小程序等多个平台.所以我打算学习下这个框架,快速浏览了一遍官网之后 ...

  8. 【Gin-API系列】Gin中间件之日志模块（四）

    日志是程序开发中必不可少的模块,同时也是日常运维定位故障的最重要环节之一.一般日志类的操作包括日志采集,日志查询,日志监控.日志统计等等.本文,我们将介绍日志模块在Gin中的使用. Golang如何打 ...

  9. myBatis源码解析-配置文件解析（6）

    前言 本来打算此次写一篇关于SqlSession的解析,但发现SqlSession涉及的知识太多.所以先结合mybatis配置文件(我们项目中常写的如mybatisConfig.xml),来分析下my ...

  10. 无锁机制----比较交换CAS Compare And Swap

    一.锁与共享变量 加锁是一种悲观的策略,它总是认为每次访问共享资源的时候,总会发生冲突,所以宁愿牺牲性能(时间)来保证数据安全. 无锁是一种乐观的策略,它假设线程访问共享资源不会发生冲突,所以不需要加 ...