最近闲来无事，在网上看到有人写了个砸金蛋的效果，他是没有用到css3的，当时我就感觉没什么动态效果

感觉体验不是很好，所有我就想用css3来改下，于是也来试着写写。

本来想弄个视频给你们看看效果的，但是不知道怎么上传视频，就只有给你们看看效果的图片，还有就是图片是我自己弄得

不怎么会p图，不要见笑啊！

好了，为了不让我们成为键盘侠，我就不贴代码了，大部分地方我都写注释了，所以就不多介绍了，有点基础的都可以看懂。

首先建立index.html

然后建立css文件

最后是核心部分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 点击后水波纹扩散效果 兼容移动端

PHP概率算法---砸金蛋示例

这是一个很经典的概率算法: function get_rand($proArr) { $result = ''; //概率数组的总概率精度 $proSum = array_sum($proArr); ...

9种纯CSS3人物信息卡片动态展示效果

随机推荐

Sina 新浪Ip归属地Api 很好用的，使用get请求

前言 这几天做了一个客服管理系统,需要根据游客的Ip获取他的归属地,刚开始使用了,www.ip138.com 抓取ip归属地,用这还可以,但是不显示国家:于是是找了这个新浪的Api,很不错啊 用法 1 ...

innodb buffer pool

add page to flush list buffer pool中的page,有三种状态: l  free:      当前page未被使用 l  clean:    当前page被使用,对应于数 ...

photoshop 常用快捷键大全

一.文件新建 CTRL+N打开 CTRL+O 打开为 ALT+CTRL+O关闭 CTRL+W保存 CTRL+S 另存为 CTRL+SHIFT+S另存为网页格式 CTRL+ALT+S打印设置 CTRL+ ...

十分钟了解MVVMLight

十分钟了解MVVMLight   前言: 最近看了看开源框架MVVMLight,一直想写一点笔记,但是文笔欠佳,索性就放弃了.那就来翻译一点文章吧. 由于英文水平和技术水平有限,凡是不妥之处,请大家指 ...

Yii2.0中场景的使用小记

熟悉Yii框架的人都知道,灵活的使用场景可以达到事半功倍的效果! 比如普通的数据的新增.修改,新增需要验证其中两个字段,而修改只需要验证其中一个字段:还有种情况,也是我们现在用到的,同一张表(同一个m ...

Mycat 分片规则详解--自然月分片

实现方式:按照月份列分片,每个自然月一个分片 优点:使数据按照每月来进行分时存储 缺点:由于数据是连续的,所以该方案不能有效的利用资源 配置示例: