首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

- Author -

微宇宙

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

Javascript 相关文章推荐
jQuery技巧总结
Jan 01 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
如何写好一个vue组件,老夫的一年经验全在这了（推荐）
May 18 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
Spring-Retry(1) IDEA(2) Sqlite(2) 安卓(1) OpenLayer(1) Spring Boot(5) 多线程(6) 多维数组(1) android studio(3) 移动开发(2)
You might like
MySQL相关说明
2007/01/15 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
PHP时间函数使用详解
2019/03/21 PHP
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
js实现日期级联效果
2014/01/23 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解（17）
2016/12/18 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
python中使用序列的方法
2015/08/03 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
印尼在线精品店：Berrybenka.com
2016/10/22 全球购物
Java中实现多态的机制是什么？
2014/12/07 面试题
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
股权转让协议书范本
2014/04/12 职场文书
解除劳动合同证明书
2014/09/26 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL