HTML5+CSS3 吃豆豆代码

吃豆豆

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>吃豆豆动画</title><style>body {background-color: #7c1c77be;margin: 0 auto;}.Imp {width: 200px;height:200px;  border-radius:50%;margin:200px;animation: peas 1s infinite linear;}.Top {width: 200px;height:100px;margin-left:200px;background:#ffcc66;     border-radius:100px 100px 0px 0px;animation: MouthTop 1s infinite; }.Bottom {width: 200px;height:100px;margin-left:200px;background:#ffcc66;border-radius:0px 0px 100px 100px;animation: MouthBottom 1s infinite;}@keyframes MouthTop{0%{transform:rotate(0deg);}50%{transform: rotate(-30deg);}100%{transform: rotate(0deg);}}@keyframes MouthBottom{0%{transform:rotate(0deg);}50%{transform: rotate(30deg);}100%{transform: rotate(0deg);}}@keyframes peas{0%{box-shadow: 400px 0px 0px -80px #467de4,600px 0px 0px -80px #467de4,800px 0px 0px -80px #467de4,1000px 0px 0px -80px #467de4;}100%{box-shadow: 200px 0px 0px -80px  #467de4,400px 0px 0px -80px  #467de4,600px 0px 0px -80px  #467de4,800px 0px 0px -80px  #467de4;}}</style>
</head>
<body><div class="Imp"><div class="Top"></div><div class="Bottom"></div></div></body>
</html>

效果图

CSS3 @keyframes 规则

通过 @keyframes 规则，可以创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%

0% 是动画的开始时间，100% 动画的结束时间

语法

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需，定义动画的名称
keyframes-selector	必需，动画时长的百分比
css-styles	必需，一个或多个合法的 CSS 样式属性

CSS3 transition（过渡）

transition:要过渡的属性 花费时间 运动曲线 何时开始;

1. 属性：想要变化的css属性，宽度高度北京颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all即可。
2. 花费时间：单位是秒（必须写单位）比如0.5s
3. 运动曲线：默认是ease（可以省略）
4. 何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是0s（可以省略）

CSS3 box-shadow 属性

语法

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色，请参阅 CSS 颜色值
inset	可选，将外部阴影 (outset) 改为内部阴影

CSS3 animation 属性

语法

animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

animation 属性是一个简写属性，用于设置六个动画属性：

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function	规定动画的速度曲线，默认是0
animation-delay	规定动画何时开始,默认是0
animation-iteration-count	规定动画播放的次数默认是1,可以infinite无限循环
animation-direction	规定动画在下一周期是否逆向播放,默认"normal","alternate"逆播放
animation-fill-mode	规定动画结束后的状态,保持forwards 回到起始backwards

每个值的一些参数可以自己查一下，这里不再逐个列举

HTML5+CSS3 吃豆豆代码相关推荐

8款最受欢迎的HTML5/CSS3应用及代码
新的一周开始,小编也将继续为大家分享精彩的HTML5应用,还有CSS3和jQuery方面的东西.今天给大家带来的是8款最受欢迎的HTML5/CSS3应用及代码,一起来看看吧. 1.基于HTML5 Ca ...
用html写出生日蛋糕,纯HTML5+CSS3制作生日蛋糕代码
.birthday .container{ width:600px; height:600px; margin:0px auto; background: #fafafa; border-radius ...
用python制作生日蛋糕_纯HTML5+CSS3制作生日蛋糕(代码易懂)
Happy Birthday 生日快乐
html吃豆豆代码,超萌css制作吃豆豆加载效果
web前端群,189394454,有视频.源码.学习方法等大量干货分享
HTML5吃豆豆游戏开发实战（一）使用Canvas绘制游戏主角
近期在学习HTML5.爱因斯坦曾说过,"最好的学习就是自己去经历". 于是.我想在学习HTML5的同一时候.做一款简单的小游戏,这样学习起来也会非常有趣的.我想做的是曾经小时候玩儿 ...
css3制作吃豆豆动画
制作思路: 利用两个盒子反向旋转来制作嘴巴动画,然后为大盒子设置圆角属性使其超出隐藏,制作出头的效果,之后用边框阴影制作多个小球,然后依次进入嘴巴. 需要用到的知识点: transform-origi ...
【附全部代码+图片】使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记
文章目录页面展示技术要点代码实现 html代码 CSS代码用到的图片页面展示本项目将使用HTML5+CSS3绘制出HTML5的logo,页面效果如下所示. 技术要点 HTML5新特性 HT ...
html5按钮样式具有子项目,如何使用HTML5+css3制作出12种常用的按钮开关样式（附完整代码）...
现如今前端网页的开发越来越注重设计感,这些设计感更体现在细节处,今天向大家具体介绍一下各式各样的开关按钮是如何使用HTML5+css3制作出来的,希望可以帮到大家. 使用HTML5+css3制作按钮开 ...
html音乐播放器代码自动,html5 css3音乐播放器代码
特效描述:html5 css3 音乐播放器代码.html5 css3音乐播放器代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码标题歌手 00:00/00:00 var music ...