最近闲来无事，在网上看到有人写了个砸金蛋的效果，他是没有用到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. ajax跨域请求时，sessionId不一样，导致无法记住登陆状态

    遇到这样一个场景,就是前端的域是dev,请求接口时,接口的域是beta,即使在服务端设置了cookie存放的域,'COOKIE_DOMAIN'   =>  '.roboming.com',虽然c ...

  2. UI培训自学能学好吗

    近年来UI设计师愈来愈红,成为行业热门,越来越多的人开始专注UI培训,也有一部分人在考虑,培训班一般价格不菲,我自学怎么样呢? UI设计是指人机交互过程中的一个界面设计,常用到的有 ps和ai两个工具 ...

  3. 使用GDI绘制文本

    /// <summary>        /// 定义一个绘制文本        /// </summary>        public void Texts()       ...

  4. .NET基础笔记（C#）

    闲着没事就把以前学习时的笔记拿出来整理了一下,个人感觉有点用,就想拿出来跟园友共享一下.有些基础性的内容比如基本概念.语法什么的就不发了. 内容:1.构造方法(函数) 2.继承   3.访问修饰符   ...

  5. 大数据系列之Hadoop分布式集群部署

    本节目的:搭建Hadoop分布式集群环境 环境准备 LZ用OS X系统 ,安装两台Linux虚拟机,Linux系统用的是CentOS6.5:Master Ip:10.211.55.3 ,Slave ...

  6. C#知识整理笔记

    这里简单介绍了一些常用的属性,以及一些术语的解释和举例说明,不太全面,希望读者多多补充. 1.重载:函数名相同,参数的个数或参数类型不同; public void MyDog(string s); p ...

  7. wemall app商城源码中基于JAVA的Android异步加载图片管理器代码

    wemall doraemon是Android客户端程序,服务端采用wemall微信商城,不对原商城做任何修改,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可随意定制修改.本文分享其中 ...

  8. SEO-长尾词与分词技术

        长尾关键词与分词技术 长尾关键词:网站非目标关键词,能给网站带来流量的关键词. 例如:主关键词是成都网站建设 那么,跟成都网站建设相关的词,就叫做长尾关键词. 比如:成都网站建设哪里好?成都网 ...

  9. python 接口自动化测试（一）

    一.测试需求描述 对服务后台一系列SOAP接口功能测试 参数传入:根据接口描述构造不同的参数输入值(Json格式) 二.程序设计 通过Excel配置具体的测试用例数据 保存参数为Json格式,预写入预 ...

  10. Mac下tomcat配置ssl

    最近在搞单点登录CAS,第一步就是需要给tomcat配置证书.但是,第一次配置就遇到了个问题排插了一下午.下面来存一份文档,以备以后遇到. 一.首先准备好环境 java环境:配置好环境变量,找到jdk ...