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

更新时间：2015年12月25日 09:15:06 作者：微宇宙

这篇文章主要介绍了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的面向对象，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
JavaScript生成GUID的多种算法小结
这篇文章介绍了GUID的几种生成算法，有需要的朋友可以参考一下
2013-08-08
基于JS实现一个可拖拽的容器布局组件
这篇文章主要为大家详细介绍了如何基于JavaScript实现一个可拖拽的容器布局组件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2023-12-12
前端使用minio传输文件的代码及拓展
MinIO是一款基于Go语言的高性能对象存储服务,非常适合于存储大容量非结构化的数据,例如图片、视频、日志文件、备份数据和容器/虚拟机镜像等,这篇文章主要给大家介绍了关于前端使用minio传输文件的相关资料,需要的朋友可以参考下
2024-07-07
详解ES6中的Map与Set集合
这篇文章主要介绍了详解ES6中的Map与Set集合，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
echarts饼图指示器文字颜色设置不同实例详解
在默认的饼状图里面,图例legend颜色是黑色的,有时候根据ui需要,根据不同的背景色,需要将图例文字调成白色或者其他颜色,下面这篇文章主要给大家介绍了关于echarts饼图指示器文字颜色设置不同的相关资料,需要的朋友可以参考下
2022-07-07
CSS代码格式化和压缩的方法与技巧
下面脚本之家编辑就将一些css的格式化与压缩技巧简单的介绍下，一把情况需要尽量的缩写样式，减少体积，然后用工具进行压缩，然后再测试网页。
2007-06-06
元素绑定click点击事件方法
当点击元素时，会发生 click 事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。
2015-06-06
解析使用JS 清空File控件的路径值
本篇文章是对使用JS清空File控件的路径值的方法进行了详细的分析介绍，需要的朋友参考下
2013-07-07
JavaScript 事件记录使用说明
JavaScript 事件记录使用说明需要的朋友可以参考下。
2009-10-10

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具