javascript实现简单加载随机色方块


Posted in Javascript onDecember 25, 2015

用碎片加载小方块实现简单的随机色块,直接上代码:
效果图:

javascript实现简单加载随机色方块

具体代码:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta charset="utf-8">
 <title>koringz</title>
 <link rel="stylesheet" href="css/demo.css">
</head>
<body>
 <div class="container">
  <div class="main">
   <div class="colorful"></div>
  </div>
 </div>
</body>
</html>

css代码:

* {
 -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
   box-sizing: border-box;
}
html {
 font-size: 10px;
 -webkit-tap-highlight-color: transparent;
}
body {
 margin: 0;
 padding: 0;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size: 14px;
 line-height: 1.42857143;
 color: #333;
 background-color: rgba(211,232,132,0.8);
}
.container {
 overflow: visible;
}
.main {
 position: relative;
 width: 90%;
 height:200px;
 margin:auto;
}
.colorful {
 overflow: visible;
 width: 100%;
 height: 100%;
}

.colorful > a {
 float: left;
 display: block;
 width: 50px;
 height: 50px;
 zoom:2;
}

.colorful > a:hover {
 -webkit-animation:infinite 2s ease-in-out start-roll;
 -moz-animation:infinite 2s ease-in-out start-roll;
   animation:infinite 2s ease-in-out start-roll;
}
@-webkit-keyframes start-roll{
 0% {
  -webkit-transform: rotate(0deg); /*chrome*/
  -moz-transform: rotate(0deg); /*火狐*/
  -ms-transform: rotate(0deg); /*IE*/
  transform: rotate(0deg);
  -webkit-transition: opacity .3s linear;
  transition: opacity .3s linear;
  opacity: .5;
  filter: alpha(opacity=50);
  zoom:1;
 }
 50% {
  -webkit-transform: rotate(180deg); /*chrome*/
  -moz-transform: rotate(180deg); /*火狐*/
  -ms-transform: rotate(180deg); /*IE*/
  transform: rotate(180deg);
  -webkit-transition: opacity 1s linear;
  transition: opacity 1s linear;
  opacity: 1;
  filter: alpha(opacity=100);
   zoom:2;
 }
 100% {
  -webkit-transform: rotate(360deg); /*chrome*/
  -moz-transform: rotate(360deg); /*火狐*/
  -ms-transform: rotate(360deg); /*IE*/
  transform: rotate(360deg);
  -webkit-transition: opacity .3s linear;
  transition: opacity .3s linear;
  opacity: .5;
  filter: alpha(opacity=50);
  zoom:1;
 }
}
@-moz-keyframes start-roll{
 0% {
  -webkit-transform: rotate(0deg); /*chrome*/
  -moz-transform: rotate(0deg); /*火狐*/
  -ms-transform: rotate(0deg); /*IE*/
  transform: rotate(0deg);
  -webkit-transition: opacity .3s linear;
  transition: opacity .3s linear;
  opacity: .5;
  filter: alpha(opacity=50);
 }
 50% {
  -webkit-transform: rotate(180deg); /*chrome*/
  -moz-transform: rotate(180deg); /*火狐*/
  -ms-transform: rotate(180deg); /*IE*/
  transform: rotate(180deg);
  -webkit-transition: opacity 1s linear;
  transition: opacity 1s linear;
  opacity: .5;
  filter: alpha(opacity=50);
 }
 100% {
  -webkit-transform: rotate(360deg); /*chrome*/
  -moz-transform: rotate(360deg); /*火狐*/
  -ms-transform: rotate(360deg); /*IE*/
  transform: rotate(360deg);
  -webkit-transition: opacity .3s linear;
  transition: opacity .3s linear;
  opacity: .5;
  filter: alpha(opacity=50);
 }
}
@keyframes start-roll{
 0% {
  -webkit-transform: rotate(0deg); /*chrome*/
  -moz-transform: rotate(0deg); /*火狐*/
  -ms-transform: rotate(0deg); /*IE*/
  transform: rotate(0deg);
  -webkit-transition: opacity .3s linear;
  transition: opacity .3s linear;
  opacity: .5;
  filter: alpha(opacity=50);
 }
 50% {
  -webkit-transform: rotate(180deg); /*chrome*/
  -moz-transform: rotate(180deg); /*火狐*/
  -ms-transform: rotate(180deg); /*IE*/
  transform: rotate(180deg);
  -webkit-transition: opacity 1s linear;
  transition: opacity 1s linear;
  opacity: .5;
  filter: alpha(opacity=50);
 }
 100% {
  -webkit-transform: rotate(360deg); /*chrome*/
  -moz-transform: rotate(360deg); /*火狐*/
  -ms-transform: rotate(360deg); /*IE*/
  transform: rotate(360deg);
  -webkit-transition: opacity .3s linear;
  transition: opacity .3s linear;
  opacity: .5;
  filter: alpha(opacity=50);
 }
}

js代码:

(function (window) {
 var document = window.document;
 function on(elem, evtnm, eventhd) {
  var onevtnm = 'on' + evtnm;
  elem[onevtnm] = eventhd;
 }
 function grc() {
  var val = [], i = 0;
  while (++i <= 3) {
   val.push(Math.floor(Math.random() * 255));
  }
  return 'rgb(' + val.join() + ')';
 }
 function fbc() {
  var el = document.querySelectorAll('.colorful')[0],
   total = Math.floor(el.offsetWidth / 50) * Math.floor(el.offsetHeight / 50),
   df = document.createDocumentFragment(),
   a;
  while (total-- > 0) {
   a = document.createElement('a');
   a.style.backgroundColor = grc();
   df.appendChild(a);
  }
  el.appendChild(df);
 }
 on(window, 'load', function () {
  fbc();
 });
})(window)

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
Javascript 面向对象 对象(Object)
May 13 Javascript
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 Javascript
学习JavaScript鼠标响应事件
Dec 25 #Javascript
理解javascript中DOM事件
Dec 25 #Javascript
理解JavaScript中worker事件api
Dec 25 #Javascript
基于jquery实现省市区三级联动效果
Dec 25 #Javascript
js实现文本框输入文字个数限制代码
Dec 25 #Javascript
js实现简单的验证码
Dec 25 #Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 #Javascript
You might like
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
Python实现批量下载图片的方法
2015/07/08 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
python爬虫实现获取下一页代码
2020/03/13 Python
如何把python项目部署到linux服务器
2020/08/26 Python
python GUI计算器的实现
2020/10/09 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
应届生煤化工求职信
2013/10/21 职场文书
2014自荐信的写作技巧
2014/01/28 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
五年级上册复习计划
2015/01/19 职场文书
会计工作态度自我评价
2015/03/06 职场文书
办公室规章制度范本
2015/08/04 职场文书
高二英语教学反思
2016/03/03 职场文书
七年级作文之冬景
2019/11/07 职场文书
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL