Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Shuffle
Loading...
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); } }
JavaScript
/** Press the refresh button --> **/ var tiles = []; for (var i = 0; i < 9; i++) { var {bg, name, artist, url} = getTracks()[i]; var d2 = getTracks()[i+8]; var d3 = getTracks()[16-i]; var d4 = getTracks()[9-i]; var tile = `
${name}
${artist}
${d2.name}
${d2.artist}
${d3.name}
${d3.artist}
${d4.name}
${d4.artist}
`; tiles.push(tile); } 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(() => { $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"}]; }
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>3D移动端刷新-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号