亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

javascript實(shí)現(xiàn)簡單加載隨機(jī)色方塊

 更新時(shí)間：2015年12月25日 09:15:06   作者：微宇宙  
這篇文章主要介紹了javascript實(shí)現(xiàn)簡單加載隨機(jī)色方塊的相關(guān)資料，感興趣的小伙伴們可以參考一下

用碎片加載小方塊實(shí)現(xiàn)簡單的隨機(jī)色塊，直接上代碼：
效果圖：

具體代碼：

<!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)

希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • JS數(shù)字精度丟失的原因及解決方案

    JS數(shù)字精度丟失的原因及解決方案

    JS的數(shù)字類型一旦數(shù)字超過限值,JS將會丟失精度,導(dǎo)致前后端的值出現(xiàn)不一致,這篇文章主要給大家介紹了關(guān)于JS數(shù)字精度丟失的原因分析及解決方法,需要的朋友可以參考下
    2022-04-04
  • JS解決ie6下png透明的方法實(shí)例

    JS解決ie6下png透明的方法實(shí)例

    解決ie6下png透明的問題想必前端都比較清楚，雖然有很多方法，但是我覺得用JS還是最省事的方法，不管是圖片還是背景圖片都OK。
    2013-08-08
  • webpack實(shí)現(xiàn)一個(gè)行內(nèi)樣式px轉(zhuǎn)vw的loader示例

    webpack實(shí)現(xiàn)一個(gè)行內(nèi)樣式px轉(zhuǎn)vw的loader示例

    這篇文章主要介紹了webpack實(shí)現(xiàn)一個(gè)行內(nèi)樣式px轉(zhuǎn)vw的loader示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-09-09
  • uniapp實(shí)現(xiàn)微信H5掃碼功能的完整步驟

    uniapp實(shí)現(xiàn)微信H5掃碼功能的完整步驟

    在uni-app官網(wǎng)上發(fā)現(xiàn)uni-app不支持H5掃碼功能,但是下面的提示說明可以通過微信的JS-SDK實(shí)現(xiàn)掃碼功能,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)微信H5掃碼功能的完整步驟,需要的朋友可以參考下
    2022-11-11
  • 微信小程序?qū)崿F(xiàn)雙層嵌套菜單欄

    微信小程序?qū)崿F(xiàn)雙層嵌套菜單欄

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)雙層嵌套菜單欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • 微信小程序開發(fā)之實(shí)現(xiàn)一個(gè)跑步小程序

    微信小程序開發(fā)之實(shí)現(xiàn)一個(gè)跑步小程序

    本文將開發(fā)一個(gè)簡易的微信跑步小程序，用到的方法是wx.onLocationChange，可以監(jiān)聽實(shí)時(shí)地理位置變化事件，感興趣的小伙伴可以了解一下
    2022-08-08
  • JS判斷對象屬性是否存在的五種方案分享

    JS判斷對象屬性是否存在的五種方案分享

    編寫JS的過程中,我們經(jīng)常用到對象,也會用到對象中的屬性,下面這篇文章主要給大家介紹了關(guān)于JS判斷對象屬性是否存在的五種方案,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-01-01
  • Javascript原型鏈及instanceof原理詳解

    Javascript原型鏈及instanceof原理詳解

    這篇文章主要介紹了Javascript原型鏈及instanceof原理詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-05-05
  • JavaScript 類型轉(zhuǎn)換的詳細(xì)實(shí)現(xiàn)

    JavaScript 類型轉(zhuǎn)換的詳細(xì)實(shí)現(xiàn)

    本文主要介紹了JavaScript 類型轉(zhuǎn)換的詳細(xì)實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-02-02
  • 原生JS發(fā)送異步數(shù)據(jù)請求

    原生JS發(fā)送異步數(shù)據(jù)請求

    這篇文章主要為大家詳細(xì)介紹了原生JS發(fā)送異步數(shù)據(jù)請求的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-06-06

最新評論