css动画实现吃豆豆
话不多说，直接上代码：（作为一个初学者写的代码，多么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动画实现吃豆豆的更多相关文章
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
- 你所不知道的 CSS 动画技巧与细节
怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...
- 盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
- React Transition css动画案例解析
实现React Transition Css动画效果 首先在项目工程中引入react-transition-group: npm install react-transition-group --sa ...
- Css 动画的回调
在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...
- 【译】css动画里的steps()用法详解
原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...
- css动画属性性能
性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...
- Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
随机推荐
- Jupyter PPT
安装 pip install jupyter pip install RISE jupyter-nbextension install rise --py --sys-prefix jupyter-n ...
- Python3 连接 Oracle 数据库
Python3 连接 Oracle 数据库 需要导出一些稍微复杂的数据,用Python处理很方便 环境 Win10 Python 3.7.0 Oracle 11g 安装依赖 安装 cx_Oracle ...
- java目前常用的几种定时任务
java目前常用的几种定时任务 JDK自带的Timer spring的Task Quartz elastic-job分布式定时任务 一.JDK自带的Timer Timer是jdk中提供的一个定时器工具 ...
- Mysql Column 'xxxxx' in field list is ambiguous"
使用了关联查询,两张表有相同的字段,所以说取值含糊不清: 使用别名.列名解决: 如 a.description
- java List接口一
一 List接口概述 查阅API,看List的介绍.有序的 collection(也称为序列).此接口的用户可以对列表中每个元素的 插入位置进行精确地控制.用户可以根据元素的整数索引(在列表中的位置) ...
- JavaScript package.json里添加git-cz
git-cz官网 0.目的 => 替代git commit, 丰富提交的内容 1.安装包 npm install commitizen cz-conventional-changelog --s ...
- Vue 使用$set动态给数据设置属性
在实际的开发过程中,给表单元素绑定model的时候,绑定的元素的属性是根据后台数据动态生成的.如果使用常规的赋值方式,是无法更新视图的 需要使用, this.$set(dataName,keyName ...
- HTML基础-04
定位 定位:通过定位可以将元素摆放在页面中任意位置 语法:position属性设置元素的定位 可选值:static:默认值,开启定位 relative开启相对定位 absolute开启绝对定位 fix ...
- 运用sklearn进行主成分分析(PCA)代码实现
基于sklearn的主成分分析代码实现 一.前言及回顾 二.sklearn的PCA类介绍 三.分类结果区域可视化函数 四.10行代码完成葡萄酒数据集分类 五.完整代码 六.总结 基于sklearn的主 ...
- JVM的方法执行引擎-模板表
Java的模板解析执行需要模板表与转发表的支持,而这2个表中的数据在HotSpot虚拟机启动时就会初始化.这一篇首先介绍模板表. 在启动虚拟机阶段会调用init_globals()方法初始化全局模块, ...