倒计时结尾使用动画效果代码实例

最新推荐文章于 2023-05-03 10:50:52 发布
最新推荐文章于 2023-05-03 10:50:52 发布
阅读量594 收藏
点赞数
分类专栏： 前端js

分享一段代码实例，它实现了倒计时效果。

并且在倒计时的结尾有动画效果。

代码实例如下:

     
     

      
      

       
       

        
        
 
            

              01 
            
 
            

              02 
            
 
            

              03 
            
 
            

              04 
            
 
            

              05 
            
 
            

              06 
            
 
            

              07 
            
 
            

              08 
            
 
            

              09 
            
 
            

              10 
            
 
            

              11 
            
 
            

              12 
            
 
            

              13 
            
 
            

              14 
            
 
            

              15 
            
 
            

              16 
            
 
            

              17 
            
 
            

              18 
            
 
            

              19 
            
 
            

              20 
            
 
            

              21 
            
 
            

              22 
            
 
            

              23 
            
 
            

              24 
            
 
            

              25 
            
 
            

              26 
            
 
            

              27 
            
 
            

              28 
            
 
            

              29 
            
 
            

              30 
            
 
            

              31 
            
 
            

              32 
            
 
            

              33 
            
 
            

              34 
            
 
            

              35 
            
 
            

              36 
            
 
            

              37 
            
 
            

              38 
            
 
            

              39 
            
 
            

              40 
            
 
            

              41 
            
 
            

              42 
            
 
            

              43 
            
 
            

              44 
            
 
            

              45 
            
 
            

              46 
            
 
            

              47 
            
 
            

              48 
            
 
            

              49 
            
 
            

              50 
            
 
            

              51 
            
 
            

              52 
            
 
            

              53 
            
 
            

              54 
            
 
            

              55 
            
 
            

              56 
            
 
            

              57 
            
 
            

              58 
            
 
            

              59 
            
 
            

              60 
            
 
            

              61 
            
 
            

              62 
            
 
            

              63 
            
 
            

              64 
            
 
            

              65 
            
 
            

              66 
            
 
            

              67 
            
 
            

              68 
            
 
            

              69 
            
 
            

              70 
            
 
            
 
             
 
              <!doctype html> 
             
 
             
 
              < 
              html 
              > 
             
 
             
 
              < 
              head 
              > 
             
 
             
 
              < 
              meta  
              charset 
              = 
              "utf-8" 
              > 
             
 
             
 
              < 
              title 
              >倒计时</ 
              title 
              > 
             
 
             
 
              < 
              style 
              > 
             
 
             
 
              * { 
             
 
             
 
                 
              margin: 0px; 
             
 
             
 
                 
              padding: 0px; 
             
 
             
 
              } 
             
 
             
 
              body { 
             
 
             
 
                 
              background: rgba(0, 0, 0, .7); 
             
 
             
 
              } 
             
 
             
 
              .container { 
             
 
             
 
                 
              position: absolute; 
             
 
             
 
                 
              top: 50%; 
             
 
             
 
                 
              left: 50%; 
             
 
             
 
                 
              transform: translate(-50%, -50%); 
             
 
             
 
                 
              -webkit-transform: translate(-50%, -50%); 
             
 
             
 
                 
              -moz-transform: translate(-50%, -50%); 
             
 
             
 
                 
              -o-transform: translate(-50%, -50%); 
             
 
             
 
                 
              font-size: 81px; 
             
 
             
 
                 
              color: #ddd; 
             
 
             
 
                 
              font-family: '微软雅黑'; 
             
 
             
 
              } 
             
 
             
 
              b { 
             
 
             
 
                 
              transition: .5s; 
             
 
             
 
                 
              -webkit-transition: .5s; 
             
 
             
 
                 
              -moz-transition: .5s; 
             
 
             
 
                 
              -o-transition: .5s; 
             
 
             
 
              } 
             
 
             
 
              .test { 
             
 
             
 
                 
              text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444; 
             
 
             
 
                 
              animation: test 0.4s linear; 
             
 
             
 
                 
              -webkit-animation: test 0.4s linear; 
             
 
             
 
                 
              -moz-animation: test 0.4s linear; 
             
 
             
 
                 
              -o-animation: test 0.4s linear; 
             
 
             
 
              } 
             
 
             
 
              @keyframes test { 
             
 
             
 
                 
              0% { 
             
 
             
 
                   
              font-size: 12px; 
             
 
             
 
                 
              } 
             
 
             
 
                 
              50% { 
             
 
             
 
                   
              font-size: 576px; 
             
 
             
 
                 
              } 
             
 
             
 
                 
              100% { 
             
 
             
 
                   
              font-size: 81px; 
             
 
             
 
                 
              } 
             
 
             
 
              } 
             
 
             
 
              </ 
              style 
              > 
             
 
             
 
              </ 
              head 
              > 
             
 
             
 
              < 
              body 
              > 
             
 
             
 
              < 
              div  
              class 
              = 
              "container"  
              align 
              = 
              "center" 
              > 
             
 
             
 
                 
              < 
              b 
              >5</ 
              b 
              > 
             
 
             
 
              </ 
              div 
              > 
             
 
             
 
              < 
              script 
              > 
             
 
             
 
              var b = document.querySelector('.container b'); 
             
 
             
 
              var num = b.innerHTML - 1; 
             
 
             
 
              var action = setInterval(function () { 
             
 
             
 
                 
              b.innerHTML = num; 
             
 
             
 
                 
              num--; 
             
 
             
 
                 
              if (num < 0) { 
             
 
             
 
                   
              clearInterval(action); 
             
 
             
 
                   
              b.setAttribute('class', 'test'); 
             
 
             
 
                 
              } 
             
 
             
 
              }, 1000); 
             
 
             
 
              </ 
              script 
              > 
             
 
             
 
              </ 
              body 
              > 
             
 
             
 
              </ 
              html 
              >

上面的代码进行了简单演示，代码总体非常简单，更多内容可以参阅相关阅读。

相关阅读:

Return_KB
关注
专栏目录
好玩的WPF第一弹：窗口抖动+边框阴影效果+倒计时显示文字
nomasp
06-10 1万+
大家一进到博客就应该看到这张GIF了吧……好吧，今天不是星期一……那么就来一起做做这个效果啦！看完记得点赞哦~新建一个WPF项目如果新建WPF项目应该不用我说了吧，在C#下面找找就好了。MainWindow.xaml在初始的Window下添加如下属性：x:Name="mainWindow" WindowStartupLocation="CenterScreen" WindowState="N
属性动画原理解析
mrRuby的博客
01-15 903
前言 属性动画作为现在开发中常用的动画，我们需要对他有比较详细的了解，才能够在开发中随心和高效的使用。在了解属性动画之前我们先了解Android前期的视图动画 一、视图动画 视图动画是为View对象添加动画效果的功能，如果想为非对象动画添加效果，则必须自己实现自己的代码才能做到。 视图动画仅公开 对象的部分方面来供您添加动画效果，比如旋转、错放、移动 视图动画只是在绘制视图的位置进行修改，而不会修改实际的视图本身。例如，为某个按钮添加了移动动画，该按钮会正确绘制，但能够点击按钮的实际位置并回修更改，我们必须
Flash实现倒计时动画
12-09
Flash脚本控制实现倒计时的效果，可以添加在网页中的效果
实现倒计时的动画效果
修的专栏
01-29 3623
项目要求做一个这样子的gif View的代码是package com.example; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Paint.Style; import android.g
Gooey十秒倒计时动画特效代码
03-20
Gooey十秒倒计时动画代码基于CSS3+SVG制作，圆形数字倒计时代码。
原生jquery实现倒计时功能【animate】动画特效包含天，时分秒
最新发布
ALoye_喜樂的博客
05-03 806
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>倒计时</t
HTML5动画时钟倒计时例子（5种）
05-28
支持HTML5显示 时钟倒计时动画显示 （5种）
第三十九篇：IOS核心高级动画 Core Animation、Core Graphics
青山绿水之辈 专栏
06-12 2703
一、 CALayer 图层： 1. 图层属性及功能介绍： 1）contents ：id 类型， 内容显示。 在ARC环境下使用： = (__bridge id)image.CGImage; 在MRC环境下使用：去掉(__bridge id) 2）contentsGravity：字符串型，图层的内容模式。功能与UIView 的contentMode用法相同；比如内容居中显示
jQuery源码解析（5）—— Animation动画
梦回forever的博客
04-11 9537
闲话 jQuery的动画机制有800行， 虽然不如样式的1300行，难度上却是不减。由于事前不了解animate接口的细节使用规则，看代码期间吃了很多苦头，尤其是深恶痛绝的defaultPrefilter函数，靠着猜想和数次的逐行攻略，终于全部拿下。本文将一点一点拆解出jq的动画机制及具体实现，解析各种做法的目的、解耦的方式、必要的结构、增强的辅助功能。 需要提前掌握queue队列的知识，
vrml编程时钟实例
05-24
6. **Interpolator** 节点：可能被用来平滑地改变指针的位置，提供更流畅的动画效果。 7. **Anchor** 节点：可以定义一个可点击区域，当用户点击时，触发特定的事件，例如启动时钟的计时。 8. **ROUTE** 语句：...
Android 倒计时动画
11-07
android 倒计时动画，
Android代码-倒计时效果数字变化动画
08-06
Scroll Number Widget 中文 | English A Simple、Graceful、Easy-to-Use Scroll Number Widget！ > Don't forget give me a star :） Feature Just need to call setNumber() could be performed. You can dynamically customize number's colors、size、range、font... Dependency There are two ways: clone this project, and use as dependency just add following code to you build.gradle: compile 'top.wuhaojie:scrollnumber:1.0.0' Usage Add this to your layout xml file: Call setNumber() in your java code: MultiScroll
电影胶片立方体切换视觉5秒倒计时开场PPT特效.rar
07-16
这是一套电影胶片立方体切换视觉5秒倒计时开场PPT特效，第一PPT模板网提供幻灯片动画免费下载； PPT动画是倒计时动画，PPT背景图片设计成了抽象的电影胶片，中间部分是5秒倒计时；本PPT动画可以用作PowerPoint动画倒计时开场； 关键词：倒计时、数字PPT动画下载，.PPTX格式；
js结合css3倒计时三秒动画特效.zip
07-05
js结合css3倒计时三秒动画特效是一款带有动画效果的倒计时时间代码。 js结合css3倒计时三秒动画特效截图
QML实现倒计时程序
07-12
qml通过动画实现倒计时程序，支持Qt5.5及其以上，可以直接用qmlscene运行
安卓中如何实现倒计时效果
doke_mege的博客
08-21 2858
在做注册时候，使用到了手机号注册，这个时候需要接收验证码，点击获取验证码按钮后，需要等待一段时间后才能再次点击，这个时候就需要一个带倒计时的按钮。 // 自定义倒计时 class TimeCount extends CountDownTimer { public TimeCount(long millisInFuture, long countDownInterval) {
关于QT倒计时的简单实现
和过去说再见的博客
08-22 3757
关于QT倒计时的简单实现功能效果展示源码 功能 可以实现按下从100开始倒计时，再次按下停止计时的功能。 效果展示 源码 .h文件： #ifndef COUNTDOWN_H #define COUNTDOWN_H #include <QMainWindow> #include <QTimer> namespace Ui { class CountDown; } cla...
案例分析｜最佳倒数计时器设计分析【附原型实例】
设计“1+2”，摹客就够了！
10-23 790
视觉效果和动画效果已经成为产品设计中不可或缺的一部分，开发人员使用动画效果可以创建引人入胜的内容，营销人员可以使用这些效果来获得更好的产品覆盖率和良好的转化率。倒数计时器就是这样一种元素，当用户登陆页面时，它会给用户产生一种紧迫感。 在我们的日常生活中，会看到各种各样的倒计时设计效果，比如：视频的开头；APP启动页面的右上角；某些电子商务和活动网站的价格区域，等等。 毫无疑问，倒计时是非常有用...
Android倒计时效果
常灿光的博客
12-19 3918
借用聚美优品的广告词来开始今天的文章之旅： 从未年轻过的人，一定无法体会这个世界 的偏见。我们被世俗拆散，也要为爱情勇 往直前；我们被房价羞辱，也要让简陋的 现实变的温暖；我们被权威漠视，也要为 自己的天分保持骄傲；我们被平庸折磨， 也要开始说走就走的冒险。所谓的光辉岁 月，并不是后来闪耀的日子，而是无人问 津时，你对梦想的偏执，你是否有勇气， 对自己忠诚到底，我是Bruce常，我为自己加
RecyclerView倒计时问题修复策略与代码实例
作者推荐使用系统的`CountDownTimer`类，并在`onDestroy()`或`onPause()`方法中清理计时器实例。 4. **处理用户交互和异常情况**：特别指出，对于不太严格的时间准确性要求，如非用户主动修改系统时间，可以容忍较...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值