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 ...
随机推荐
- 11、Java 日期时间 日期工具类
一.简介 在Java8之前,日期时间API一直被开发者诟病,包括:java.util.Date是可变类型,SimpleDateFormat非线程安全等问题.故此,Java8引入了一套全新的日期时间处理 ...
- Docker 搭建 RabbitMQ
Docker RabbitMQ RabbitMQ 安装非常繁琐,使用 Docker 快速搭建一个 RabbitMQ 开发环境 步骤 拉取镜像 docker pull rabbitmq 启动容器 端口会 ...
- 百度小程序中swan.setPageInfo的用法
现在百度智能小程序是百度最新的流量入口,现在很多做SEO优化.小程序开发的企业为了获取更多的流量不得不开发了,很多的技术人员不了解百度小程序的标题和关键词.描述等信息不知道在哪里设置. 以下是小编给你 ...
- 痞子衡嵌入式：利用i.MXRT1060,1010上新增的FlexSPI地址重映射(Remap)功能可安全OTA
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRT部分型号上新增的FlexSPI Remap功能. OTA升级设计几乎是每个量产客户都绕不开的话题,产品发布后免不了要做固件( ...
- 使用Axure设计基于中继器的左侧导航菜单
实现效果: 使用组件: 设计详解: 一.设计外层菜单 1.拖一个矩形,在属性栏中命名cd1,设置宽高为200*45,背景色#393D49,双击设置按钮名称为“默认展开”,字体大小16,字体颜色#C2C ...
- vob文件转mkv
下载了一部片子,是所谓的dvd原盘,就是用软件将dvd碟片rip下来,视频文件是一堆vob文件.觉得这片子没必要看原盘,想压缩成mkv以减小体积,同时保持合适的清晰度. 首先想到用handbrake这 ...
- dotnet cli
前言 dotnet cli (Command-Line Interface) .net 源代码和二进制文件管理工具.需要安装 .NET Core SDK. 终端执行 dotnet --info 可以打 ...
- linux 安装sftp
1.定义sftp的数据目录 mkdir -p /data/sftp 2.将目录归到root用户,否则无法chroot chown root. -R /data/sftp/或者chown root:ro ...
- yum安装软件时，提示No package netstat available.的解决方法
1. 序言 如笔者在本机上运行netstat时,提示没有这个命令,向来简单粗暴,直接yum -y install netstat,显然是不能正常安装的. [root@hadoop-103 ~]# yu ...
- 10.oracle分页
oracle的分页一共有三种方式 方法一 根据rowid来分 SELECT * FROM EMP WHERE ROWID IN (SELECT RID FROM (SELECT ROWNUM RN, ...