最近闲来无事,在网上看到有人写了个砸金蛋的效果,他是没有用到css3的,当时我就感觉没什么动态效果
感觉体验不是很好,所有我就想用css3来改下,于是也来试着写写。
本来想弄个视频给你们看看效果的,但是不知道怎么上传视频,就只有给你们看看效果的图片,还有就是图片是我自己弄得
不怎么会p图,不要见笑啊!
好了,为了不让我们成为键盘侠,我就不贴代码了,大部分地方我都写注释了,所以就不多介绍了,有点基础的都可以看懂。
首先建立index.html
然后建立css文件
最后是核心部分js
好了大致就是这样,如果你们觉得有什么不足之处,可以提出来讨论。
css3+js 实现砸金蛋效果的更多相关文章
-
Codrops 教程:基于 CSS3 的精美模态窗口效果
Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...
-
[JS,NodeJs]个人网站效果代码集合
上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...
-
jQuery+PHP实现的砸金蛋中奖程序
准备 我们需要准备道具(素材),即相关图片,包括金蛋图片.蛋砸碎后的图片.砸碎后的碎花图片.以及锤子图片. HTML 我们页面上要展现的是一个砸金蛋的台子,台上放了编号为1,2,3的三个金蛋,以及一把 ...
-
砸金蛋:jQuery+PHP实现的砸金蛋中奖程序
原文 砸金蛋:jQuery+PHP实现的砸金蛋中奖程序 砸金蛋被广泛应用于庆典活动.商家促销.电视娱乐等场合,它的趣味.悬念能迅速活跃现场气氛.同样,我们也可以将砸金蛋应用到WEB网站上,用于开展线上 ...
-
html5 +css3 点击后水波纹扩散效果 兼容移动端
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
-
PHP概率算法---砸金蛋示例
这是一个很经典的概率算法: function get_rand($proArr) { $result = ''; //概率数组的总概率精度 $proSum = array_sum($proArr); ...
-
9种纯CSS3人物信息卡片动态展示效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
-
原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
-
JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
-
Lind.DDD~实体属性变更追踪器的实现
回到目录 看着这个标题很复杂,大叔把它拆开说一下,实体属性-变更-追踪器,把它拆成三部分大家看起来就容易懂一些了,实体属性:领域实体里有自己的属性,属性有getter,setter块,用来返回和设置属 ...
-
select 选择的制作
我说的select选择是指 手机端的话,一般考虑元素 + 伪类制作 .checkbox{ border:1px solid #987;width:16px;height:16px; } .checkb ...
-
php大力力 [048节] php一点支付开发资料,很散
https://beecloud.cn/activity/jsbutton/?index=4&t=1441261629019 https://beecloud.cn/download/ php ...
-
nodejs中全局变量
1.global 类似于客户端javascript运行环境中的window module1.js: module.exports={}; //耻辱的使用了全局变量 global.varA = &quo ...
-
UIScrollViewDelegate
一.执行顺序:(scrollView加后面的)willBeginDragging // 将要开始拖拽,手指已经放在view上并准备拖动的那一刻 DidScroll ...
-
C# App.config 详解
读语句: String str = ConfigurationManager.AppSettings["DemoKey"]; 写语句: Configuration cfa = ...
-
javascript基金会——鼠标事件,系统对话框,等等。
1.鼠标事件 (1).onclick:用户点击鼠标左键,并且当焦点处于button准时,按用户Enter关键,发生onclick事件 (2).ondblclick:当用户双击鼠标左键.发生ondblc ...
-
Error C1189: #error: Please use the /MD switch for _AFXDLL builds
在VS 2013中编译程序时出现错误: 错误提示1: error C1189: #error : Building MFC application with /MD[d] (CRT dll versi ...
-
Spring MVC多动作控制器
以下示例演示如何使用Spring Web MVC框架的多动作控制器. MultiActionController类用于在单个控制器中分别映射多个URL到对应的方法. 所下所示配置 - package ...
-
vscode &; code snippets
code snippets vscode & code snippets https://github.com/xgqfrms/FEIQA/tree/master/000-xyz/templa ...