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 ...
随机推荐
- 用Python玩连连看是什么效果？
1.前言 Python实现的qq连连看辅助, 仅用于学习, 请在练习模式下使用, 请不要拿去伤害玩家们... 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道 ...
- 薪资高，福利好，会Python的人就是这么豪横！
很多人可能会有这样的疑问,数据分析Excel挺强大的,会Excel就行,为什么还要去学python? 是的,Excel和python对于数据分析而言,这两者都只是不同的工具而已. 很多人学习pytho ...
- lombok的基本使用方法
在java刚开始学习的时候,首先就会学习封装.继承和多态,就拿封装来说,封装就是为了保护数据安全而将实体类内部数据保持为私有状态,如果外部程序想要访问里面的数据就必须调用此实体类提供的相关数据接口,这 ...
- IndexFlatL2、IndexIVFFlat、IndexIVFPQ三种索引方式示例
上文针对Faiss安装和一些原理做了简单说明,本文针对标题所列三种索引方式进行编码验证. 首先生成数据集,这里采用100万条数据,每条50维,生成数据做本地化保存,代码如下: import numpy ...
- 字节跳动：[编程题]万万没想到之聪明的编辑 Java
时间限制:1秒 空间限制:32768K 我叫王大锤,是一家出版社的编辑.我负责校对投稿来的英文稿件,这份工作非常烦人,因为每天都要去修正无数的拼写错误.但是,优秀的人总能在平凡的工作中发现真理.我发现 ...
- 基于 Docker 搭建 Consul 多数据中心集群
本文介绍了在 Windows 10 上基于 Docker 搭建 Consul 多数据中心集群的步骤,包括 Consul 镜像的拉取和容器的创建,每个数据中心对应服务端节点和客户节点的创建,节点之间相互 ...
- Linux学习笔记 一 第一章 Linux 系统简介
Linux简介 一.UNIX与Linux发展史
- mysql无法远程连接问题（ERROR 1045 (28000): Access denied for user 'root'）
mysql版本 : 8.0.21 使用mysql 作为nextcloud的数据库.之前使用挺正常的,因为被黑客勒索过一次,重新启动了一个mysql的docker镜像. 结果数据库配置老是失败,next ...
- 你们要的MyCat实现MySQL分库分表来了
❝ 借助MyCat来实现MySQL的分库分表落地,没有实现过的,或者没了解过的可以看看 ❞ 前言 在之前写过一篇关于mysql分库分表的文章,那篇文章只是给大家提供了一个思路,但是回复下面有很多说是细 ...
- hive命令大全
1.等值比较: =语法:A=B操作类型:所有基本类型描述: 如果表达式A与表达式B相等,则为TRUE:否则为FALSEhive> select 1 from iteblog where 1=1; ...