编程 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压缩混淆工具

May 16 Javascript

页面中body onload 和 window.onload 冲突的问题的解决

Jul 01 Javascript

使用jquery与图片美化checkbox和radio控件的代码(打包下载)

Nov 11 Javascript

extjs之去除s.gif的影响

Dec 25 Javascript

学习js在线html(富文本,所见即所得)编辑器

Dec 18 Javascript

JQueryEasyUI datagrid框架的基本使用

Apr 08 Javascript

js数组常见操作及数组与字符串相互转化实例详解

Nov 10 Javascript

微信小程序 form组件详解

Oct 25 Javascript

Canvas 制作动态进度加载水球详解及实例代码

Dec 09 Javascript

使用live-server快速搭建本地服务器+自动刷新的方法

Mar 09 Javascript

Vue项目中添加锁屏功能实现思路

Jun 29 Javascript

详解element-ui中el-select的默认选择项问题

Aug 02 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

优化WordPress中文章与评论的时间显示

2016/01/12 PHP

PHP实现的多文件上传类及用法示例

2016/05/06 PHP

PHP中spl_autoload_register()函数用法实例详解

2016/07/18 PHP

Jquery Ajax.ashx 高效分页实现代码

2009/10/20 Javascript

jQuery中创建实例与原型继承揭秘

2011/12/21 Javascript

JS打开层/关闭层/移动层动画效果的实例代码

2013/05/11 Javascript

Javascript前端UI框架Kit使用指南之Kitjs简介

2014/11/28 Javascript

jQuery实现自动与手动切换的滚动新闻特效代码分享

2015/08/27 Javascript

浅谈JS使用[ ]来访问对象属性

2016/09/21 Javascript

jQuery Pagination分页插件使用方法详解

2017/02/28 Javascript

Bootstrap一款超好用的前端框架

2017/09/25 Javascript

ES6使用Set数据结构实现数组的交集、并集、差集功能示例

2017/10/31 Javascript

网页爬虫之cookie自动获取及过期自动更新的实现方法

2018/03/06 Javascript

详解ajax的data参数错误导致页面崩溃

2018/04/30 Javascript

JavaScript中join()、splice()、slice()和split()函数用法示例

2018/08/24 Javascript

在Angular中使用JWT认证方法示例

2018/09/10 Javascript

对angularJs中自定义指令replace的属性详解

2018/10/09 Javascript

p5.js实现简单货车运动动画

2019/10/23 Javascript

ZK中使用JS读取客户端txt文件内容问题

2019/11/07 Javascript

js实现视图和数据双向绑定的方法分析

2020/02/05 Javascript

在python中安装basemap的教程

2018/09/20 Python

【python】matplotlib动态显示详解

2019/04/11 Python

python实现扫描局域网指定网段ip的方法

2019/04/16 Python

PyCharm-错误-找不到指定文件python.exe的解决方法

2019/07/01 Python

python的常见矩阵运算(小结)

2019/08/07 Python

使用Tensorflow实现可视化中间层和卷积层

2020/01/24 Python

通过Canvas及File API缩放并上传图片完整示例

2013/08/08 HTML / CSS

使用HTML5做的导航条详细步骤

2020/10/19 HTML / CSS

Python面试题集

2012/03/08 面试题

怎样写好自荐信和推荐信

2013/12/26 职场文书

大学生学习自我评价

2014/01/13 职场文书

思想作风整顿个人剖析材料

2014/10/06 职场文书

2014年社区矫正工作总结

2014/11/18 职场文书

2014年优秀党员材料

2014/12/18 职场文书

先进个人申报材料

2014/12/30 职场文书

MySQL面试题讲解之如何设置Hash索引

2021/11/01 MySQL