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 写类方式之七
Jul 05 Javascript
将jQuery应用于login页面的问题及解决
Oct 17 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 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
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
JavaScript 应用类库代码
2008/06/02 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
js模拟微博发布消息
2017/02/23 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
基于Python实现签到脚本过程解析
2019/10/25 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
职业生涯规划怎么写
2013/12/29 职场文书
植树节活动总结
2014/04/30 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
SQL中的三种去重方法小结
2021/11/01 SQL Server
Java8中Stream的一些神操作
2021/11/02 Java/Android