https://codepen.io/yourmaster/pen/VbNgdq <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3d刷新数据</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">l <style type="text/css"> html { height: 100%; } body { font-family: 'Roboto',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; color: #444; background-color: #663b7d; background-image: linear-gradient(110deg, #663b7d 0%, #92aacf 100%); } .wrap { background-color: #e5e5e5; position: relative; display: block; height: 610px; width: 365px; margin: 10px auto; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.3); overflow: hidden; /*border-radius: 5px;*/ } .wrap.loading .content { margin-top: 30px; } .wrap.loading .loader { display: block; } .wrap.loading .headbar button { animation: rotate .8s linear infinite; } .bar { height: 20px; background-color: #222; } .headbar { height: 60px; background-color: #444; color: #fff; } .headbar button { float: right; margin: 12px; border: none; background: transparent; outline: none; font-size: 26px; color: #fff; cursor: pointer; } .headbar h3 { margin: 0; padding: 12px 15px; font-size: 22px; font-weight: 400; } .headbar h3 i { margin-right: 10px; } .content { position: relative; height: calc(100% - 90px); margin-top: 5px; margin-left: 5px; width: 100%; transition: margin-top 0.4s ease-in-out; } .tile { display: inline-block; width: 126.3px; height: 175.5px; padding: 0; margin: 0; perspective: 1000px; margin-left: -6px; margin-top: -4px; } .tile:nth-child(2n+1) .tile-wrap > div { opacity: .89; } .tile-wrap { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.8s ease-in-out; } .tile-wrap > div { margin: 0; position: absolute; /*top: 5px;*/ left: 3px; width: calc(100% - 6px); height: 100%; backface-visibility: hidden; } .tile-wrap > div:nth-child(1) { transform: rotateY(0deg) translateZ(58px); } .tile-wrap > div:nth-child(2) { transform: rotateY(90deg) translateZ(58px); } .tile-wrap > div:nth-child(3) { transform: rotateY(180deg) translateZ(58px); } .tile-wrap > div:nth-child(4) { transform: rotateY(270deg) translateZ(58px); } .tile:nth-child(4) .tile-wrap > div, .tile:nth-child(2) .tile-wrap > div { background-color: #FFC107 } .tile:nth-child(8) .tile-wrap > div, .tile:nth-child(1) .tile-wrap > div { background-color: #b73662 } .tile:nth-child(3) .tile-wrap > div { background-color: #673AB7 } .tile:nth-child(9) .tile-wrap > div, .tile:nth-child(5) .tile-wrap > div { background-color: #616fbf } .tile:nth-child(7) .tile-wrap > div, .tile:nth-child(6) .tile-wrap > div { background-color: #fd784e } .content[data-pos="0"] .tile-wrap { -webkit-transform: translateZ(-58px) rotateY(0deg); transform: translateZ(-58px) rotateY(0deg); } .content[data-pos="1"] .tile-wrap { -webkit-transform: translateZ(-58px) rotateY(90deg); transform: translateZ(-58px) rotateY(90deg); } .content[data-pos="2"] .tile-wrap { -webkit-transform: translateZ(-58px) rotateY(180deg); transform: translateZ(-58px) rotateY(180deg); } .content[data-pos="3"] .tile-wrap { -webkit-transform: translateZ(-58px) rotateY(270deg); transform: translateZ(-58px) rotateY(270deg); } .tile header { height: 120px; background-size: 120px; z-index: 10; } .tile section { height: 36px; background-color: rgba(0,0,0,.2); padding: 10px 5px } .tile section span, .tile section small { display: block; } .tile section span { font-weight: 500; font-size: 16px; } .tile small { font-size: 11px; } /** Loader **/ .loader, .loader:before, .loader:after { border-radius: 50%; width: 1.8em; height: 1.8em; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation: load7 1.8s infinite ease-in-out; animation: load7 1.8s infinite ease-in-out; top: -15px; } .loader { display: none; color: #444; font-size: 10px; margin: 5px auto; position: relative; text-indent: -9999em; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } .loader:before, .loader:after { content: ''; position: absolute; top: 0; } .loader:before { left: -3.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .loader:after { left: 3.5em; } @-webkit-keyframes load7 { 0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em; } 40% { box-shadow: 0 2.5em 0 0; } } @keyframes load7 { 0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em; } 40% { box-shadow: 0 2.5em 0 0; } } @keyframes rotate { 0%{ transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="wrap"> <div class="bar"></div> <div class="headbar"> <button onclick="refershTiles()"> <i class="zmdi zmdi-refresh"></i> </button> <h3> <i class="zmdi zmdi-menu"></i> Shuffle </h3> </div> <div class="loader">Loading...</div> <div class="content" data-pos="0"></div> </div> </body> <script type="text/javascript"> "use strict"; "object" != typeof window.CP && (window.CP = {}), window.CP.PenTimer = { programNoLongerBeingMonitored: !1, timeOfFirstCallToShouldStopLoop: 0, _loopExits: {}, _loopTimers: {}, START_MONITORING_AFTER: 2e3, STOP_ALL_MONITORING_TIMEOUT: 5e3, MAX_TIME_IN_LOOP_WO_EXIT: 2200, exitedLoop: function(o) { this._loopExits[o] = !0 }, shouldStopLoop: function(o) { if(this.programKilledSoStopMonitoring) return !0; if(this.programNoLongerBeingMonitored) return !1; if(this._loopExits[o]) return !1; var t = this._getTime(); if(0 === this.timeOfFirstCallToShouldStopLoop) return this.timeOfFirstCallToShouldStopLoop = t, !1; var i = t - this.timeOfFirstCallToShouldStopLoop; if(i < this.START_MONITORING_AFTER) return !1; if(i > this.STOP_ALL_MONITORING_TIMEOUT) return this.programNoLongerBeingMonitored = !0, !1; try { this._checkOnInfiniteLoop(o, t) } catch(o) { return this._sendErrorMessageToEditor(), this.programKilledSoStopMonitoring = !0, !0 } return !1 }, _sendErrorMessageToEditor: function() { try { if(this._shouldPostMessage()) { var o = { action: "infinite-loop", line: this._findAroundLineNumber() }; parent.postMessage(JSON.stringify(o), "*") } else this._throwAnErrorToStopPen() } catch(o) { this._throwAnErrorToStopPen() } }, _shouldPostMessage: function() { return document.location.href.match(/boomerang/) }, _throwAnErrorToStopPen: function() { throw "We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact support@codepen.io." }, _findAroundLineNumber: function() { var o = new Error, t = 0; if(o.stack) { var i = o.stack.match(/boomerang\S+:(\d+):\d+/); i && (t = i[1]) } return t }, _checkOnInfiniteLoop: function(o, t) { if(!this._loopTimers[o]) return this._loopTimers[o] = t, !1; var i = t - this._loopTimers[o]; if(i > this.MAX_TIME_IN_LOOP_WO_EXIT) throw "Infinite Loop found on loop: " + o }, _getTime: function() { return +new Date } }, window.CP.shouldStopExecution = function(o) { var t = window.CP.PenTimer.shouldStopLoop(o); return t === !0 && console.warn("[CodePen]: An infinite loop (or a loop taking too long) was detected, so we stopped its execution. Sorry!"), t }, window.CP.exitedLoop = function(o) { window.CP.PenTimer.exitedLoop(o) }; </script> <script type="text/javascript"> 'use strict'; /** Press the refresh button --> **/ var tiles = []; for (var i = 0; i < 9; i++) {if (window.CP.shouldStopExecution(1)){break;} var _getTracks$i = getTracks()[i]; var bg = _getTracks$i.bg; var name = _getTracks$i.name; var artist = _getTracks$i.artist; var url = _getTracks$i.url; var d2 = getTracks()[i + 8]; var d3 = getTracks()[16 - i]; var d4 = getTracks()[9 - i]; var tile = '<div class="tile">\n\t\t\t<div class="tile-wrap" style="transition-delay:' + 70 * i + 'ms;">\n\t\t\t\t<div style="background-color: ' + bg + '; color: ' + contrastYIQ(bg) + '">\n\t\t\t\t\t<header style="background-image:url(' + url + ')"></header>\n\t\t\t\t\t<section><span>' + name + '</span><small>' + artist + '</small></section>\n\t\t\t\t</div>\n\t\t\t\t<div style="background-color: ' + d2.bg + '; color: ' + contrastYIQ(d2.bg) + '">\n\t\t\t\t\t<header style="background-image:url(' + d2.url + ')"></header>\n\t\t\t\t\t<section><span>' + d2.name + '</span><small>' + d2.artist + '</small></section>\n\t\t\t\t</div>\n\t\t\t\t<div style="background-color: ' + d3.bg + '; color: ' + contrastYIQ(d3.bg) + '">\n\t\t\t\t\t<header style="background-image:url(' + d3.url + ')"></header>\n\t\t\t\t\t<section><span>' + d3.name + '</span><small>' + d3.artist + '</small></section>\n\t\t\t\t</div>\n\t\t\t\t<div style="background-color: ' + d4.bg + '; color: ' + contrastYIQ(d4.bg) + '">\n\t\t\t\t\t<header style="background-image:url(' + d4.url + ')"></header>\n\t\t\t\t\t<section><span>' + d4.name + '</span><small>' + d4.artist + '</small></section>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>'; tiles.push(tile); } window.CP.exitedLoop(1); var $content = document.querySelector('.content'); $content.innerHTML = tiles.join(''); function refershTiles() { var $wrap = document.querySelector('.wrap'), pos = parseInt($content.getAttribute('data-pos')), next = pos + 1 > 3 ? 0 : pos + 1; $wrap.classList.add('loading'); setTimeout(function () { $wrap.classList.remove('loading'); $content.setAttribute('data-pos', next); }, 2400); } // gets the contrast color for the bg function contrastYIQ(hexcolor, tol) { var r = parseInt(hexcolor.substr(1, 2), 16), g = parseInt(hexcolor.substr(3, 2), 16), b = parseInt(hexcolor.substr(5, 2), 16), yiq = (r * 299 + g * 587 + b * 114) / 1000; var tolerance = tol || 192; return yiq >= tolerance ? '#333' : '#fff'; } function getTracks() { return [{ "bg": "#404040", "name": "Paradise ", "artist": "Laibert", "url": "https://i.scdn.co/image/193848dcb37c12a0ad4ca6ae31c8b9d4c1065772" }, { "bg": "#01cfc2", "name": "Talking About", "artist": "Conor Maynard", "url": "https://i.scdn.co/image/8b55305041224b9fb2c18cc15f9347ed9b1ce086" }, { "bg": "#292b5d", "name": "Make A Move ", "artist": "Torro Torro", "url": "https://i.scdn.co/image/0d4f8e15aedb1f13a9484b0cd3118262d40e9ded" }, { "bg": "#eda6a2", "name": "Baby Love", "artist": "Petite Meller", "url": "https://i.scdn.co/image/d76c53ae04569ed716276a93284a726d0044fc14" }, { "bg": "#a0363b", "name": "Another You ", "artist": "Armin van Buuren", "url": "https://i.scdn.co/image/37bdc21b6ca671bda9107deb3ac31fc6dbe3252e" }, { "bg": "#f8f9f9", "name": "Adore", "artist": "Jasmine Thompson", "url": "https://i.scdn.co/image/cbfcdcc4987a4d3128d687e0003a82d9f1557a2e" }, { "bg": "#ebcc78", "name": "Yellow", "artist": "Robin Schulz", "url": "https://i.scdn.co/image/53fea48ae7ad87d8dea8fbf28ba2573b8a332a11" }, { "bg": "#fcfae5", "name": "Changes", "artist": "Faul & Wad Ad", "url": "https://i.scdn.co/image/a812334ca7d99e77874afa8e4da21731a99ed926" }, { "bg": "#2d312e", "name": "Seve ", "artist": "Tez Cadey", "url": "https://i.scdn.co/image/3b37b2b7f33763a908ba28c7c7a5ed6ca7412f56" }, { "bg": "#ece1e7", "name": "Heartbeat", "artist": "Claptone", "url": "https://i.scdn.co/image/d764c3fab0b5d00bc1945951d833e6c5ac4c7446" }, { "bg": "#5c1d3d", "name": "Waves ", "artist": "Mr. Probz", "url": "https://i.scdn.co/image/e00d3d496e07740c6699d39112b64c9e5095305a" }, { "bg": "#ffbb6e", "name": "Escape ", "artist": "Zimmer", "url": "https://i.scdn.co/image/3a9f94fa54119f4261ab91362a0752ef5f0f560d" }, { "bg": "#5674aa", "name": "All In You ", "artist": "Synapson", "url": "https://i.scdn.co/image/2006fb5e23f726c682bc8566ea59632fc3267809" }, { "bg": "#fde082", "name": "Reality ", "artist": "Lost Frequencies", "url": "https://i.scdn.co/image/f37504845d674ddec5f9eb432f9618e89fb2f557" }, { "bg": "#aab6d1", "name": "Casanova", "artist": "Palm Trees", "url": "https://i.scdn.co/image/9173aebe6e2f072f4e5b60eb7524820cde315313" }, { "bg": "#45a59a", "name": "Coming Over ", "artist": "James Hersey", "url": "https://i.scdn.co/image/aacc74fda5c2d26b44d573fa031e405e5f8c877a" }, { "bg": "#f8f9f9", "name": "Adore", "artist": "Jasmine Thompson", "url": "https://i.scdn.co/image/b6a06e762891896b7c8146f8daef15d2fae75a9e" }, { "bg": "#a0363b", "name": "Something About You", "artist": "Hayden James", "url": "https://i.scdn.co/image/979273b4bbb5792436dfd9a62e62a8603d86309c" }]; } </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 3d刷新数据 喜欢 (0)or分享 (0)
