背景:
移动端需要做一个倒计时球体水波的效果。主要用到了CSS的SVG瞄点动画和JS的计时器。该动画原型来自于  使用球体水面波动显示进度动画 http://wow.techbrood.com/fiddle/27745
 
效果展示:
 
 
 
 
<div class="homepage">
<div class="timeboxout ball">
<div class="timeboxmiddle ball">
<div class="timeboxin">
<div class="box">
<div class="percent">
<p id="prompt1">第<span id="nw"></span>周</p>
<p id="prompt2">本周剩余时间</p>
<p id="prompt3">
//JS获取时间信息
<span id="days"></span>
<span id="hours"></span>
<span id="minutes"></span>
<span id="seconds"></span>
</p>
</div>
<div id="water" class="water ball"> //最底层水量
//后面的水波
<svg viewBox="0 0 560 20" class="water_wave water_wave_back ball">
<use xlink:href="#wave"></use>
</svg>
//水波前面的波浪
<svg viewBox="0 0 560 20" class="water_wave water_wave_front ball">
<use xlink:href="#wave"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
//SVG波浪瞄点
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px" style="display: none;">
<symbol id="wave">
<path d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z"></path>
<path d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z"></path>
<path d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z"></path>
<path d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z"></path>
</symbol>
</svg>
</div>
 
.homepage .box{
width: 56%;
height: 100%;
/*ackground-color: #f2f2f2;*/ /*球体内部背景色*/
} .homepage .timeboxout{
width: 11.5625rem;
height: 11.5625rem;
box-sizing: border-box;
border: 1px solid #2edb75;
border-radius: 50%;
position: relative;
margin-left: auto;margin-right: auto;
margin-bottom: 1rem;
}
.homepage .timeboxmiddle{
width: 10.9375rem;height: 10.9375rem;
box-sizing: border-box;
background: -webkit-linear-gradient(top,#ffffff,#f8cd51);
border-radius: 50%;
position: absolute;
top: 50%;left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
.homepage .timeboxin{
background-color: #ffffff;
width: 10.875rem;height: 10.875rem;
box-sizing: border-box;
border-radius: 50%;
position: absolute;
top: 50%;left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
} .homepage .box {
height: 10.875rem;
width: 10.875rem;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 100%;
overflow: hidden;
}
.homepage .box .percent {
text-align: center;
color: black;
margin-top: 2.03125rem;
z-index:;
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100%;width: 100%;
}
/*.homepage p{margin-bottom: 0.5625rem;}*/
#prompt1{
font-size: 1.1875rem;
}
#prompt2{
font-size: 0.8125rem;
}
#prompt3{
font-size: 1.125rem;
}
.homepage .box .water {
position: absolute;
left:;
top:;
z-index:;
width: 100%;
height: 100%;
-webkit-transform: translate(0, 100%);
transform: translate(0, 100%);
background: #2edb75;
}
.homepage .box .water_wave {
width: 200%;
position: absolute;
bottom: 100%;
}
.homepage .box .water_wave_back { /*后面的波纹*/
right:;
fill: #7befaa;
-webkit-animation: wave-back 1.4s infinite linear;
animation: wave-back 1.4s infinite linear;
}
.homepage .box .water_wave_front { /*前面的波纹*/
left:;
fill: #2edb75;
margin-bottom: -1px;
-webkit-animation: wave-front .7s infinite linear;
animation: wave-front .7s infinite linear;
} /*是波浪匀速移动*/
@-webkit-keyframes wave-front {
100% {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
}
@keyframes wave-front {
100% {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
}
@-webkit-keyframes wave-back {
100% {
-webkit-transform: translate(50%, 0);
transform: translate(50%, 0);
}
}
@keyframes wave-back {
100% {
-webkit-transform: translate(50%, 0);
transform: translate(50%, 0);
}
}
 
 
var days = document.getElementById("days"),
hour = document.getElementById("hours"),
minutes = document.getElementById("minutes"),
seconds = document.getElementById("seconds");
var nwweek = document.getElementById("prompt1");
var countdown = document.getElementById("prompt3");
var water = document.getElementById("water");
var ballchange = document.getElementsByClassName("ball"); var timeRate;
var interval; //计算累积第几周
function weeknum(){
var nw = document.getElementById("nw");
// 获取当前时间
var currentTime = new Date();
// 这里写的是2015年11月2日0时0分0秒 Javascript中月份是实际数字减1,故指定日期月份减一,另获取到毫秒。
var targetTime = (new Date(2015, 10, 2, 0, 0, 0)).getTime();
var offsetTime =currentTime - targetTime; // 将时间转位天数
var offsetDays =Math.floor((offsetTime / (3600 * 24 * 1000))/7);
nw.innerHTML=offsetDays+1;
} //计算剩余的时间并更新
function residueTime () {
var newtime = new Date();
var day = newtime.getDay(); //得到今天周几
var hours = newtime.getHours(); //得到现在时间的小时
var minuter = newtime.getMinutes(); //得到现在时间的分数
var second = newtime.getSeconds(); //得到现在时间的秒数 day = 7 - (day ? day : 7);
hours = 23 - hours;
minuter = 59 - minuter;
second = 59 - second;
if (day==0) {
countdown.innerHTML = hours + "时" + minuter + "分" + second + "秒" ;
} else{
countdown.innerHTML = day + "天" + hours + "时" + minuter + "分" + second + "秒" ; } return (day * 24 * 60 * 60 + hours * 60 * 60 + minuter * 60 + second) / 604800 * 100; } //球面颜色变化
interval = setInterval(function () {
timeRate = residueTime();
water.style.transform = 'translate(0' + ',' + (100 - timeRate) + '%)';
if (timeRate == 0) {
document.getElementsByTagName("svg")[0].innerHTML = "";
document.getElementsByTagName("svg")[1].innerHTML = "";
clearInterval(interval);
}
else if(timeRate >50) {
ballchange[0].style.border = "1px solid #2edb75";
ballchange[1].style.background = "-webkit-linear-gradient(top,#ffffff,#2edb75)";
ballchange[2].style.background = "#2edb75";
ballchange[3].style.fill = "#7befaa";
ballchange[4].style.fill = "#2edb75";
}
else if(timeRate <= 50 && timeRate > 20) {
ballchange[0].style.border = "1px solid #fbbc05";
ballchange[1].style.background = "-webkit-linear-gradient(top,#ffffff,#fbbc05)";
ballchange[2].style.background = "#fbbc05";
ballchange[3].style.fill = "#ffd762";
ballchange[4].style.fill = "#fbbc05";
}
else{
ballchange[0].style.border = "1px solid #fe6c0d";
ballchange[1].style.background = "-webkit-linear-gradient(top,#ffffff,#fe6c0d)";
ballchange[2].style.background = "#fe6c0d";
ballchange[3].style.fill = "#ff9753";
ballchange[4].style.fill = "#fe6c0d";
}
},500);
 
 
 
 

RE : 球体波浪倒计时的更多相关文章

  1. android采用MVP漫画APP、适配刘海屏、小黄车主界面、录音波浪动画、综合APP等源码

    Android精选源码 一款采用MVP架构的仿完整漫画APP源码 Android适配刘海屏幕 基于Xmpp协议的即时通讯社交软件(客户端+服务端) Android小黄车(ofo)app主页菜单效果 一 ...

  2. 微信小程序中利用时间选择器和js无计算实现定时器(将字符串或秒数转换成倒计时)

    转载注明出处 改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看 今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...

  3. Android开发案例 – 在AbsListView中使用倒计时

    在App中, 有多种多样的倒计时需求, 比如: 在单View上, 使用倒计时, 如(如图-1) 在ListView(或者GridView)的ItemView上, 使用倒计时(如图-2) 图-1 图-2 ...

  4. JS案例之3——倒计时

    利用简单的数字累加循环模拟倒计时的效果,逻辑比较简单.如果大牛们有更好的办法欢迎补充. 这种效果经常用于在规定的时间做某件事.比如在1分钟之后重新发送验证码等. 案例演示: 源代码如下: <!D ...

  5. js倒计时-倒计输入的时间

    计算指定时间到指定时间之间相差多少天.时.分.秒. 节日.活动.商城常用. 原理: 主要使用到时间戳,也就是从1970 年 1 月 1 日 到指定时间的毫秒数. 1. 求出毫秒差 :当两个时间直接进行 ...

  6. Three.js 第一篇:绘制一个静态的3D球体

    第一篇就画一个球体吧 首先我们知道Three.js其实是一个3D的JS引擎,其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的.那么,我们在写这一篇绘制3D球体的文章的时候,应该注意哪些地 ...

  7. 微信小程序定时器组件(输入时间字符串即可倒计时)

    昨天写了代码,今天发现要重用,干脆就抽出来做个组件得了,顺便还改善了一下代码通用性. 昨天的代码在这里 github下载地址 用法: 引入: var timer = require('../../pl ...

  8. 关于Three.js基本几何形状之SphereGeometry球体学习

    一.有关球体SphereGeometry构造函数参数说明 <1>.SphereGeometry(radius, widthSegments, heightSegments, phiStar ...

  9. jQuery获取短信验证码+倒计时实现

    jQuery 短信验证码倒计时 <script type="text/javascript" charset="utf-8"> $(function ...

随机推荐

  1. 使用Xshell+Xmanager远程监控jvisualvm

    使用jvisualvm的remote方式监控服务器端jvisualvm时,不是很方便,因此通过local方式,应该是正路. 一.服务器端(Linux,最小安装模式,没有图形界面) 1.安装xauth ...

  2. VC维含义的个人理解

    有关于VC维可以在很多机器学习的理论中见到,它是一个重要的概念.在读<神经网络原理>的时候对一个实例不是很明白,通过这段时间观看斯坦福的机器学习公开课及相关补充材料,又参考了一些网络上的资 ...

  3. 我从.net转别的语言的遭遇,现在貌似又要回头(一)

    从2016年开始,作为公司最后的一个.net部门,被迫转向了php. php里面装得一手什么逼呢? 首先,你要来几本入门的书,linux,mysql,php基础语法,nginx或apache.哥那时候 ...

  4. Oracle Database 10g Express Edition系统文件损坏的解决办法

    1.检查错误代码:ora-10010 亦或是ora-10003,上网找响应的解决办法: 异常状态:登陆不上 常用的方法解决 (1)进入Oracle命令行模式 (2)Shutdown immedaite ...

  5. 前端要革命?看我在js里写SQL

    在日新月异的前端领域中,前端工程师能做的事情越来越多,自从nodejs出现后,前端越来越有革了传统后端命的趋势,本文就再补一刀,详细解读如何在js代码中执行标准的SQL语句 为什么要在js里写SQL? ...

  6. 【特效】hover效果之四线动画

    效果预览:http://www.gbtags.com/gb/rtreplayerpreview-standalone/3102.htm html: <div class="wrap&q ...

  7. Java策略模式以及来自lambda的优化

    前言    设计模式是软件工程中一些问题的统一解决方案的模型,它的出现是为了解决一些普遍存在的,却不能被语言特性直接解决的问题,随着软件工程的发展,设计模式也会不断的进行更新,本文介绍的是经典设计模式 ...

  8. 创建UWP通用应用程序

    一,下载VS2015,下载地址:https://www.visualstudio.com/zh-hans/downloads/ VS2015下载地址 二,选择UWP开发工具并安装 VS2015配置 三 ...

  9. event模拟数据库链接

    from threading import Thread,Event,currentThread import time e = Event() def conn_mysql(): count = 1 ...

  10. configparser模块(拷贝)

    该模块适用于配置文件的格式与windows ini文件类似,可以包含一个或多个节(section),每个节可以有多个参数(键=值). 创建文件 来看一个好多软件的常见文档格式如下: [DEFAULT] ...