最近闲来无事，在网上看到有人写了个砸金蛋的效果，他是没有用到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. BZOJ 1062: [NOI2008]糖果雨(二维树状数组)

    首先嘛，这道题是非同一般的恶心= = 然后首先膜拜一下CDQ大神ORZ在考场上A了这道题ORZ 这道题看到的话，我是先想把云朵化成在0s时的位置，但很容易发现这样只能单点查询而不能查询整段 结果只能膜 ...

  2. TCP详解

    1. 数据进入协议栈的封装过程 2. TCP连接的三次握手 3. TCP连接的三次握手和关闭时的四次握手 各个状态的意义如下: LISTEN - 侦听来自远方TCP端口的连接请求: SYN-SENT ...

  3. 每天一个Linux命令（11）--nl命令

    nl命令在Linux系统中用来计算文件中行号.nl可以将输出的文件内容自动的加上行号,其默认的结果与cat -n 有点不太一样,nl可以将行号做比较多的显示设计,包括位数与是否自动不起0等等的功能. ...

  4. C++拷贝构造&操作符重载

    头文件 DString.h如下 #ifndef __DSTRING_H #define __DSTRING_H #endif #include <stddef.h> class DStri ...

  5. maven项目发布不成功的问题

    MyEclipes   里面有好多的项目,有些项目是插件有些是组件,  就是有些项目是被依赖的项目,有些事项目的主体,被依赖的项目需要打成jar 包放在maven的中央仓库里面,也是所说的maven的 ...

  6. javascript作用域和闭包之我见

    javascript作用域和闭包之我见 看了<你不知道的JavaScript(上卷)>的第一部分--作用域和闭包,感受颇深,遂写一篇读书笔记加深印象.路过的大牛欢迎指点,对这方面不懂的同学 ...

  7. 简单总结在51cto平台的两日学习

    许久未曾静下心写东西,希望这会是一个好习惯的开始. 一次偶然的机会,大概是160415在Applestore邂逅51cto,看了点评果断下载,着实是一款优秀的学习软件. 由于最近正在用python写自 ...

  8. C++ 11 学习2：空指针(nullptr) 和 基于范围的for循环(Range-based for loops)

    3.空指针(nullptr) 早在 1972 年,C语言诞生的初期,常数0带有常数及空指针的双重身分. C 使用 preprocessor macroNULL 表示空指针, 让 NULL 及 0 分别 ...

  9. 8个超炫酷的jQuery相册插件欣赏

    在网页中,相册应用十分常见,如果你经常逛一些社交网站,那么你应该会注意到很多各式各样的网页相册应用.今天我们要来分享一些最新收集的jQuery相册插件,这些精美的jQuery相册插件可以帮助你快速搭建 ...

  10. HttpServletRequest 各种方法总结

    HttpServletRequest HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,开发人员通过这个对象 ...