一款JavaScript+CSS的移动端3D翻转刷新特效,点击刷新的按钮,按钮会有一个旋转的动画特效,同时页面的内容下移后显示一个加载的动画效果,最后所有图文内容3D翻转刷新为新的内容,整体的动画特效比较连贯和流畅,喜欢的童鞋请收下吧。
页面的head部分先引入一个CSS文件,用于显示顶部的部分图标,代码如下:
<!--<link type="text/css" rel="stylesheet" href="css/material-design-iconic-font.min.css">本地调用-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"><!--远程调用-->
接着设置好页面各元素的显示样式,样式内容有点多,这里只贴出部分代码:
body {
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
color: #444;
background-color: transparent;
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: 0 0 3px 3px;
}
.wrap.loading .content { margin-top: 30px; }
.wrap.loading .loader { display: block; }
.wrap.loading .headbar button { animation: rotate .8s linear infinite; }
.bar {
height: 3px;
background-color: #1976d8;
}
.headbar {
height: 60px;
background-color: #00a2ff;
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;
}
页面body部分结构比较简单,元素多放置在div容器里,代码如下:
<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>3D翻转更新</h3>
</div>
<div class="loader">加载中...</div>
<div class="content" data-pos="0"></div>
</div>
页面的底部需要对加载数据进行处理,还要响应点击刷新的事件,以下贴出部分代码:
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 =
`<div class="tile">
<div class="tile-wrap" style="transition-delay:${70*i}ms;">
<div style="background-color: ${bg}; color: ${contrastYIQ(bg)}">
<header style="background-image:url(${url})"></header>
<section><span>${name}</span><small>${artist}</small></section>
</div>
<div style="background-color: ${d2.bg}; color: ${contrastYIQ(d2.bg)}">
<header style="background-image:url(${d2.url})"></header>
<section><span>${d2.name}</span><small>${d2.artist}</small></section>
</div>
<div style="background-color: ${d3.bg}; color: ${contrastYIQ(d3.bg)}">
<header style="background-image:url(${d3.url})"></header>
<section><span>${d3.name}</span><small>${d3.artist}</small></section>
</div>
<div style="background-color: ${d4.bg}; color: ${contrastYIQ(d4.bg)}">
<header style="background-image:url(${d4.url})"></header>
<section><span>${d4.name}</span><small>${d4.artist}</small></section>
</div>
</div>
</div>`;
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);
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791