首页
所有分类
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 相关文章推荐
一段批量给页面上的控件赋值js
Jun 19 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
JavaScript中的继承之类继承
May 01 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 Javascript
Angular.JS中的this指向详解
May 17 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 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
linux(15) pycharm(6) pygame(3) pyqt5(3) JSON(10) MapReduce(1) DFA(1) Slice(1) css3 (2) Qlabel(1)
You might like
php中的一些数组排序方法分享
2012/07/20 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
二级域名转向类
2006/11/09 Javascript
Prototype Object对象 学习
2009/07/12 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
详细分析JS函数去抖和节流
2017/12/05 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
python logging设置level失败的解决方法
2020/02/19 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
法学毕业生自荐信
2013/11/13 职场文书
电子商务应届生自我鉴定
2014/01/13 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
行政申诉状范文
2015/05/20 职场文书
校园之声广播稿
2015/08/18 职场文书
教师个人教学反思
2016/02/23 职场文书
2019最新婚庆对联集锦！
2019/07/10 职场文书
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技