编程 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 脚本将当地时间转换成其它时区

Mar 19 Javascript

将光标定位于输入框最右侧实现代码

Dec 04 Javascript

用JS在浏览器中创建下载文件

Mar 05 Javascript

javascript监听鼠标滚轮事件浅析

Jun 05 Javascript

js实现屏幕自适应局部代码分享

Jan 30 Javascript

JavaScript返回网页中锚点数目的方法

Apr 03 Javascript

jQuery 中的 DOM 操作

Apr 26 Javascript

Bootstrap的基本应用要点浅析

Dec 19 Javascript

JS定时检测任务任务完成后执行下一步的解决办法

Dec 22 Javascript

vue项目实现github在线预览功能

Jun 20 Javascript

webstorm+vue初始化项目的方法

Oct 18 Javascript

JQuery animate动画应用示例

May 14 jQuery

学习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

如何在Ubuntu下启动Apache的Rewrite功能

2013/07/05 PHP

浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题

2013/08/06 PHP

PHP读取txt文本文件并分页显示的方法

2015/03/11 PHP

thinkphp autoload 命名空间自定义 namespace

2015/07/17 PHP

PHP中list()函数用法实例简析

2016/01/08 PHP

PHP数组实例详解

2016/06/26 PHP

php进程(线程)通信基础之System V共享内存简单实例分析

2019/11/09 PHP

js如何实现设计模式中的模板方法

2013/07/23 Javascript

JavaScript实现的图像模糊算法代码分享

2014/04/22 Javascript

jQuery 中国省市两级联动选择附图

2014/05/14 Javascript

js用typeof方法判断undefined类型

2014/07/15 Javascript

jQuery on方法传递参数示例

2014/12/09 Javascript

详解iframe与frame的区别

2016/01/13 Javascript

javascript的 {} 语句块详解

2016/02/27 Javascript

分享jQuery封装好的一些常用操作

2016/07/28 Javascript

Bootstrap模态框调用功能实现方法

2016/09/19 Javascript

详解使用vuex进行菜单管理

2017/12/21 Javascript

Vue项目使用CDN优化首屏加载问题

2018/04/01 Javascript

在Vue项目中使用d3.js的实例代码

2018/05/01 Javascript

javascript实现文本框标签验证的实例代码

2018/10/14 Javascript

[01:59]DOTA2首部纪录片《Free to play》预告片

2014/03/12 DOTA

python实现定时播放mp3

2015/03/29 Python

Python 创建子进程模块subprocess详解

2015/04/08 Python

python编写爬虫小程序

2015/05/14 Python

python打包生成的exe文件运行时提示缺少模块的解决方法

2018/10/31 Python

Python产生Gnuplot绘图数据的方法

2018/11/09 Python

Django框架视图层URL映射与反向解析实例分析

2019/07/29 Python

Python数据可视化:顶级绘图库plotly详解

2019/12/07 Python

Hanky Panky官方网站：内衣和睡衣

2019/07/25 全球购物

党风廉政建设责任书

2014/04/14 职场文书

任命书格式

2014/06/05 职场文书

文化产业实施方案

2014/06/07 职场文书

2015年九一八事变纪念活动实施方案

2015/05/06 职场文书

解决hive中导入text文件遇到的坑

2021/04/07 Python

opencv 分类白天与夜景视频的方法

2021/06/05 Python

Pygame Time时间控制的具体使用详解

2021/11/17 Python