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 ...
随机推荐
- AAPT: error: resource android:attr/dialogCornerRadius not found. Android resource linking failed
打开android\app\build.gradle 修改 compileSdkVersion 和 targetSdkVersion
- 2020-05-24：ZK分布式锁有几种实现方式？各自的优缺点是什么？
福哥答案2020-05-24: Zk分布式锁有两种实现方式一种比较简单,应对并发量不是很大的情况.获得锁:创建一个临时节点,比如/lock,如果成功获得锁,如果失败没获得锁,返回false释放锁:删除 ...
- C#算法设计之知识储备
前言 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/669 访问. 算法的讨论具有一定的规则,其中也包含一些不成文的约定 ...
- HTML基础-03
盒子模型 盒子模型(框模型 box model) - 浏览器在渲染页面时,它会将页面中的每一个元素都想象成是一个矩形的盒子. - 想象成盒子以后,对于页面的布局就变成了如何摆放盒子 - 每一个盒子从内 ...
- day7 地址 名片管理系统
1 无限循环 (while True) break 退出 人为设计的 ,并且有退除的出口 死循环 bug 错误 2.引用 数字型
- 根据pid获得路径 2006-10-25 19:28
这是编写kill process时用到的 BOOL GetProcessModule(DWORD dwPID, DWORD dwModuleID, LPMODULEENTRY32 lpMe32, DW ...
- Java引用类型之软引用（2）
下面接着上一篇介绍第2阶段和第3阶段的处理逻辑. 2.process_phase2() 第2个阶段移除所有的referent还存活的Reference,也就是从refs_list中移除Referenc ...
- hive命令大全
1.等值比较: =语法:A=B操作类型:所有基本类型描述: 如果表达式A与表达式B相等,则为TRUE:否则为FALSEhive> select 1 from iteblog where 1=1; ...
- 使用Kali中的Metasploit生成木马控制Windows系统
一.概念:Kali基于debin的数字取证系统,上面集成了很多渗透测试工具,其前身是BT5 R3(BtackTrack). 其中Metasploit是一个综合利用工具,极大的提高了攻击者的渗透效率,使 ...
- linux修改最大的文件描述符（max file descriptors）
用xshell登录linux系统之后,用命令>ulimit -a 注意到系统模式是1024个 使用>ulimit -n 数量,可临时更改,生效范围为当前会话 永久修改的方法: > v ...