HTML（1）吃豆豆网页代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>吃豆豆</title><style>body{margin: 0;}.main{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: movetop 1s infinite;}.bottom{width: 200px;height:100px;margin-left:200px;background:#ffcc66;border-radius:0px 0px 100px 100px;animation: movebottom 1s infinite;}@keyframes movetop{0%{transform:rotate(0deg);}50%{transform: rotate(-30deg);}100%{transform: rotate(0deg);}}@keyframes movebottom{0%{transform:rotate(0deg);}50%{transform: rotate(30deg);}100%{transform: rotate(0deg);}}@keyframes peas{0%{box-shadow: 400px 0px 0px -80px #00cc00,600px 0px 0px -80px #00cc00,800px 0px 0px -80px #00cc00,1000px 0px 0px -80px #00cc00;}100%{box-shadow: 200px 0px 0px -80px #00cc00,400px 0px 0px -80px #00cc00,600px 0px 0px -80px #00cc00,800px 0px 0px -80px #00cc00;}}</style></head><body><div class="main"> <div class="top"></div><div class="bottom"></div></div></body>
</html>

照着视频做出来的第一个html。我用的是EditPlus。Ctrl+B打开浏览器：

HTML（1）吃豆豆网页代码相关推荐

HTML5+CSS3 吃豆豆代码
吃豆豆 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF ...
HTML5吃豆豆游戏开发实战（一）使用Canvas绘制游戏主角
近期在学习HTML5.爱因斯坦曾说过,"最好的学习就是自己去经历". 于是.我想在学习HTML5的同一时候.做一款简单的小游戏,这样学习起来也会非常有趣的.我想做的是曾经小时候玩儿 ...
css动画--吃豆豆
完全不用js也能写出很好看的css动画重点用到的就是**@keyframes和animation**这两个让他们动起来盒子阴影box-shadow: 300px 0px 0px -80px whi ...
Python游戏开发，Python实现贪吃蛇小游戏与吃豆豆附带源码
开发工具 Python版本: 3.6.4 相关模块: pygame模块: 以及一些Python自带的模块. 环境搭建安装Python并添加到环境变量,pip安装需要的相关模块即可. 原理简介贪吃蛇 ...
css3制作吃豆豆动画
制作思路: 利用两个盒子反向旋转来制作嘴巴动画,然后为大盒子设置圆角属性使其超出隐藏,制作出头的效果,之后用边框阴影制作多个小球,然后依次进入嘴巴. 需要用到的知识点: transform-origi ...
HTML + CSS + JS 10 分钟实现一个吃豆豆小游戏（给女朋友玩）
今天江哥手把手带大家实现一个吃豆豆游戏关注江哥不迷路,带你编程上高速知识点 HTML + CSS + JS 实现思路:类似贪吃蛇游戏玩法,W A S D,控制方向,实现吃豆豆废话不多说,直接上 ...
【Python游戏】Python各大游戏合集（3）：飞翔的小鸟、俄罗斯方块、24点小游戏、吃豆豆小游、扫雷 | 附带源码
相关文件关注小编,私信小编领取哟! 当然别忘了一件三连哟~~ 公众号:Python日志可以关注小编公众号,会不定时的发布一下Python小技巧,还有很多资源可以免费领取哟!! 源码领取:加Pyth ...
[SHOI2003]吃豆豆(dp+拓扑排序)
[SHOI2003]吃豆豆蒟蒻的第一篇blog,请各位大犇多多指正题目描述两个PACMAN吃豆豆.一开始的时候,PACMAN都在坐标原点的左下方,豆豆都在右上方.PACMAN走到豆豆处就会吃掉 ...
[SHOI2003]吃豆豆
题目描述两个PACMAN吃豆豆.一开始的时候,PACMAN都在坐标原点的左下方,豆豆都在右上方.PACMAN走到豆豆处就会吃掉它.PACMAN行走的路线很奇怪,只能向右走或者向上走,他们行走的路线不 ...

HTML（1）吃豆豆网页代码

HTML（1）吃豆豆网页代码相关推荐

最新文章

热门文章