<!doctype html>
<hrml><html lang="zh-CN"><head><meta charset="utf-8"><title style="color:rgb(12, 22, 31)"> ## 吃豆子动画 ##</title><style>body{background-color:black;}.bean{height: 200px;width: 200px;background-color:black;border-radius:150px 150px 150px 150px;box-shadow: 150px  -250px 0px -80px green,300px  -250px 0px -80px green,450px  -250px 0px -80px green,600px  -250px 0px -80px green;animation: bea-move 1.5s infinite;}@keyframes bea-move{0% {box-shadow: 150px  -250px 0px -80px green,300px  -250px 0px -80px green,450px  -250px 0px -80px green,600px  -250px 0px -80px green;}100% {box-shadow: 0px  -250px 0px -80px green,150px  -250px 0px -80px green,300px  -250px 0px -80px green,450px  -250px 0px -80px green;}}.a1-circle{height: 150px;width: 300px;margin-top:15px;background-color: aqua;border-radius:150px 150px 0 0;transform:rotate(0deg);animation: top  1.5s infinite;}@keyframes top{0% {transform:rotate(0deg);}50% {transform:rotate(-30deg);}100% {transform:rotate(0deg);}}.a2-circle{height: 150px;width: 300px;background-color:aqua;border-radius: 0 0 150px 150px;transform: rotate(30deg);animation: bottom 1.5s infinite;}@keyframes bottom{0% {transform:rotate(0deg);}50% {transform:rotate(30deg);}100% {transform:rotate(0deg);}}</style></head><body><h1 style="color: beige;"> 吃豆子动画</h1><p style="color: beige;"> 测试动画</p><hr><div class="a1-circle"> </div><div class="a2-circle"></div><div class="bean"> </div><script type="text/javascript"></script></body></html>

效果图

# 3 网页实现吃豆子动画相关推荐

C++小项目-吃豆子游戏
GMap.h #pragma once //保证头文件只被编译一次#include "stdafx.h"#define MAP_LEN 19 //逻辑地图大小 (逻辑地图由行.列各 ...
C++项目实战（二）——简化版 “吃豆子游戏---pacman” 实现
本项目通过使用 windows 窗口应用程序实现一个简化版的吃豆子游戏,主要涉及的知识点包含有:面向对象编程思想.windows 消息循环的工作原理.windows 窗口应用程序实现.父类与子类的 ...
c#吃豆子游戏，模仿百度在线应用吃豆子
这是一款模仿百度在线吃豆子的应用,本人对于C#小游戏制作的理解不是很深.CSDN里面用c#做的吃豆子也实在是太少,有的也太过于简单,于是萌生了一个念头,做一款C#吃豆子游戏,希望互相学习. csdn下 ...
吃豆豆游戏的C语言程序码,C++实现基于控制台界面的吃豆子游戏
本文实例讲述了C++实现基于控制台界面的吃豆子游戏.分享给大家供大家参考.具体分析如下: 程序运行界面如下所示: ESC键可退出游戏. main.cpp源文件如下: #include "li ...
html和css如何制作小球,[网页设计]使用CSS3动画模拟实现小球自由落体效果
[网页设计]使用CSS3动画模拟实现小球自由落体效果 0 2015-07-20 14:00:03 使用纯CSS代码模拟实现小球自由落体效果: html代码如下:1 2 CSS样式代码:/*ball样式 ...
HTML小案例-使用CSS3实现网页加载loding动画
HTML小案例-使用CSS3实现网页加载loding动画话不多说先看效果 ** 以下为源代码 ** <!DOCTYPE html> <html lang="zh-CN&q ...
手把手教学MFC吃豆子教程
手把手教学MFC吃豆子教程本教程适用于零基础学员制作C++课程设计编程工具:VC++6.0. 本次教学主要知识点: 1.控件消息响应. 2.CDC类函数的使用. 下面开始教学: 吃豆子的基本思想: ...
html如何做交互效果,12个创新的网页界面交互和动画效果
产品的用户体验是否被用户所接受,很大一部分取决于交互界面的设计,交互界面设计是整个产品设计中的核心,对于产品品质有着决定性的影响.这里集合了12个来自 Codrops 的创新的界面交互和动画效果,值得 ...
淄博市计算机培训动画制作,网页制作与电脑动画制作培训
<网页制作与电脑动画制作培训>由会员分享,可在线阅读,更多相关<网页制作与电脑动画制作培训(28页珍藏版)>请在人人文库网上搜索. 1.网页设计与电脑动画制作指导,长郡梅溪湖中 ...
网页无法显示GIF动画图片解决办法
在给客户实施项目时,服务器装的是windows2003, IE安全级别较高,发现网页无法显示GIF动画图片. 解决办法 IE->菜单栏--->工具---> InterNet选项--- ...

# 3 网页实现吃豆子动画

效果图

# 3 网页实现吃豆子动画相关推荐

最新文章

热门文章