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

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

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

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

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

首先建立index.html

然后建立css文件

最后是核心部分js

好了大致就是这样，如果你们觉得有什么不足之处，可以提出来讨论。

css3+js 实现砸金蛋效果的更多相关文章

  1. Codrops 教程：基于 CSS3 的精美模态窗口效果

    Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...

  2. [JS,NodeJs]个人网站效果代码集合

    上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...

  3. jQuery+PHP实现的砸金蛋中奖程序

    准备 我们需要准备道具(素材),即相关图片,包括金蛋图片.蛋砸碎后的图片.砸碎后的碎花图片.以及锤子图片. HTML 我们页面上要展现的是一个砸金蛋的台子,台上放了编号为1,2,3的三个金蛋,以及一把 ...

  4. 砸金蛋：jQuery+PHP实现的砸金蛋中奖程序

    原文 砸金蛋:jQuery+PHP实现的砸金蛋中奖程序 砸金蛋被广泛应用于庆典活动.商家促销.电视娱乐等场合,它的趣味.悬念能迅速活跃现场气氛.同样,我们也可以将砸金蛋应用到WEB网站上,用于开展线上 ...

  5. html5 +css3 点击后水波纹扩散效果 兼容移动端

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

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

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

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

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  8. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  9. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 【Zookeeper】源码分析之请求处理链（三）

    一.前言 在分析了PrepRequestProcessor处理器后,接着来分析SyncRequestProcessor,该处理器将请求存入磁盘,其将请求批量的存入磁盘以提高效率,请求在写入磁盘之前是不 ...

  2. Pin学习笔记--安装及一些基本知识

    具体请见用户手册Pin 3.2 User Guide https://software.intel.com/sites/landingpage/pintool/docs/81205/Pin/html/ ...

  3. 【转】svn cleanup failed–previous operation has not finished; run cleanup if it was interrupted

    svn提交遇到恶心的问题,可能是因为上次cleanup中断后,进入死循环了. 错误如下 解决方法:清空svn的队列 1.下载sqlite3.exe 2.找到你项目的.svn文件,查看是否存在wc.db ...

  4. Html5与CSS3权威指南 百度云下载

    Html5与CSS3权威指南 百度云下载 链接:http://pan.baidu.com/s/1hq6Dlvm 密码:php3

  5. 了解 : angular ng-messages

    ng-messages="form['positionTitle' + languageVersion.typeEnum].$error ng-messages="form.pos ...

  6. Android SDK教程

    Android SDK 网络问题解析 Android 客户端网络不稳定,会导致App 有时候无法及时收到 Push 消息. 很多开发者认为这是因为 JPush 推送不稳定.延迟,甚至有时候认为 JPu ...

  7. 消除input，button之间的间距

    代码: 效果: 问题: input,button标签之间出现了间距,这并不是我们所期望的. 解决方法: 1.在父级元素上设置属性:font-size:0px; 将input父级字体(font-size ...

  8. 转：关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法

    1. JSON.parse(jsonString): 在一个字符串中解析出JSON对象 ? 1 2 3 var str = '[{"href":"baidu.com&qu ...

  9. JAVA基础：自己构造一个按递增排列的数组，用户输入一个数，插入适当位置

  10. SEO-百度推出新算法如何应对

    > 如何知道百度推出新算法百度推出算法的趋势> 学SEO目的做排名,长流量,赚钱> 最近一年百度搜索变动1> 2012年6月:6/22, 6/28事件,百度地震,4.5%网站被 ...