编程 Javascript

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

Posted in Javascript onDecember 25, 2015

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

具体代码：

<!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实现简单加载随机色方块

- Author -

微宇宙

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript concat数组累加示例

Sep 03 Javascript

js null undefined 空区别说明

Jun 13 Javascript

JQuery对class属性的操作实现按钮开关效果

Oct 11 Javascript

JS小功能(offsetLeft实现图片滚动效果)实例代码

Nov 28 Javascript

可自定义速度的js图片无缝滚动示例分享

Jan 20 Javascript

Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结

Apr 15 Javascript

JS实现“隐藏与显示”功能(多种方法)

Nov 24 Javascript

获取IE浏览器Cookie信息的方法

Jan 23 Javascript

随机生成10个不重复的0-100的数字(实例讲解)

Aug 16 Javascript

在vue中实现简单页面逆传值的方法

Nov 27 Javascript

Vue 中对图片地址进行拼接的方法

Sep 03 Javascript

vue-cli 2.*中导入公共less文件的方法步骤

Nov 22 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

php中unlink()、mkdir()、rmdir()等方法的使用介绍

2012/12/21 PHP

php生成excel列序号代码实例

2013/12/24 PHP

PHP采集类Snoopy抓取图片实例

2014/06/19 PHP

PHP单链表的实现代码

2016/07/05 PHP

thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法

2016/09/30 PHP

PHP实现网页内容html标签补全和过滤的方法小结【2种方法】

2017/04/27 PHP

Laravel 登录后清空COOKIE的操作方法

2019/10/14 PHP

建议大家看下JavaScript重要知识更新

2007/07/08 Javascript

JSDoc 介绍使用规范JsDoc的使用介绍

2011/02/12 Javascript

js模仿php中strtotime()与date()函数实现方法

2015/08/11 Javascript

jQuery使用$.ajax进行即时验证的方法

2015/12/08 Javascript

js编写贪吃蛇的小游戏

2020/08/24 Javascript

jQuery ready()和onload的加载耗时分析

2016/09/08 Javascript

详解利用exif.js解决ios手机上传竖拍照片旋转90度问题

2016/11/04 Javascript

JS弹性运动实现方法分析

2016/12/15 Javascript

vue+vue-validator 表单验证功能的实现代码

2017/11/13 Javascript

判断div滑动到底部的scroll实例代码

2017/11/15 Javascript

微信小程序开发之路由切换页面重定向问题

2018/09/18 Javascript

JS实现图片切换效果

2018/11/17 Javascript

JavaScript实现拖拽盒子效果

2020/02/06 Javascript

vue中使用router全局守卫实现页面拦截的示例

2020/10/23 Javascript

使用python编写简单的小程序编译成exe跑在win10上

2018/01/15 Python

Python编程深度学习计算库之numpy

2018/12/28 Python

docker django无法访问redis容器的解决方法

2019/08/21 Python

Python利用PyPDF2库获取PDF文件总页码实例

2020/04/03 Python

Python新手学习标准库模块命名

2020/05/29 Python

PyTorch实现重写/改写Dataset并载入Dataloader

2020/07/14 Python

PyCharm 2020.2 安装详细教程

2020/09/25 Python

字中字效果的实现【html5实例】

2016/05/03 HTML / CSS

智能旅行箱：Horizn Studios

2018/04/30 全球购物

澳大利亚百货商店中销量第一的商务衬衫品牌：Van Heusen

2018/07/26 全球购物

用C或者C++语言实现SOCKET通信

2015/02/24 面试题

法律顾问服务方案

2014/05/15 职场文书

幼儿园清明节活动总结

2014/07/04 职场文书

财务会计个人原因辞职信

2019/06/21 职场文书

mysql查找连续出现n次以上的数字

2022/05/11 MySQL