CSS3动画实现3D倒计时效果

最新推荐文章于 2024-05-02 17:41:24 发布
最新推荐文章于 2024-05-02 17:41:24 发布
阅读量860 收藏
点赞数
原文链接：https://juejin.im/post/5b5982805188251b3d79d9b5
版权

先介绍CSS3动画如何使用？两步即可搞定。

  1. 定义动画规则

    @keyframe animationName{  
     timeStamp{  
         attr1:value1;  
         attr2:value2;  
         ...
         attrn,valuen;  
     }  
 }
复制代码

说明：

  • animationName表示动画名称；
  • timeStamp表示时间点，可取值from，to或0-100%，from表示0，to表示100%；
  • 每个时间点可以指定多个样式属性attr与对应值value。

  1. 元素应用动画

     elemSelector{  
     animation: animationName animationDuration;   
 }
复制代码

说明：

  • elemSelector表示元素选择器
  • 执行一个动画至少指定动画名称animationName和动画时长animationDuration
  • animation属性是以下属性的简写形式，每个属性的含义说明如下表，
属性名称含义
animation-name@keyframe动画的名称
animation-duration动画的时长，需指定单位如s或ms，默认值为0
animation-timing-function动画的速度曲线，默认值为ease，其他取值有ease-in、ease-out、ease-in-out、linear、step-start、step-end、贝塞尔曲线函数cubic-bezier、步进函数steps
animation-delay动画延时多久开始，需指定指定单位如s或ms，默认为0，，取正值表示延时，负值表示超前
animation-iteration-count动画播放次数，默认为1
animation-direction动画是否在下一周期逆向播放，默认是normal，其他取值有reverse、alternate、alternate-reverse
animation-play-state动画的播放状态，是运行还是暂停，默认是running，其他取值有paused
animation-fill-mode动画执行前、后是否应用目标状态，默认是none，其他取值有forwards、backwards、both

重点来了，一个倒计时效果是如何实现的，先看效果。由于是压缩生成的gif，所以看起来会很快。

下面对主要代码进行说明，

  • HTML部分

      <!--用于呈现数字-->
  <div id="number"></div>
  <!--用于重新倒计时-->
  <button class="button">再来一次</button>
   <!--用于最后的声音播放。-->
  <audio ></audio>
复制代码

  • CSS部分

      /*初始化数字div样式*/
  #number {
      position: absolute;
      top: 50%;
      left: 50%;
  
      text-align: center;
  
      -webkit-transform: translate3d(-50%, -50%, 0);
      -moz-transform: translate3d(-50%, -50%, 0);
      transform: translate3d(-50%, -50%, 0);
  }
  
  /*绑定动画*/
  .number-anim {
      -webkit-animation: animation_in 10s linear;
      -moz-animation: animation_in 10s linear;
      /*动画时长是10s，且动画的速度是线性的*/
      animation: animation_in 10s linear;
  }
  
  /*定义动画规则*/
  @keyframes animation_in {
      0 {}
      10% {
          /*由于动画时长是10s，此时是1s时刻,字体大小变为100px，z方向距离主屏幕为300px*/
          font-size: 100px;
          -webkit-transform: translate3d(-50%, -50%, -300px);
          -moz-transform: translate3d(-50%, -50%, -300px);
          transform: translate3d(-50%, -50%, -300px);
      }
      11% {
          /*随后字体大小变为300px，z方向距离主屏幕为0，后面每到整秒数都会重复进行*/
          font-size: 300px;
          -webkit-transform: translate3d(-50%, -50%, 0);
          -moz-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
      }
      20% {
          font-size: 100px;
          -webkit-transform: translate3d(-50%, -50%, -300px);
          -moz-transform: translate3d(-50%, -50%, -300px);
          transform: translate3d(-50%, -50%, -300px);
      }
      21% {
          font-size: 300px;
          -webkit-transform: translate3d(-50%, -50%, 0);
          -moz-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
      }
      30% {
          font-size: 100px;
          -webkit-transform: translate3d(-50%, -50%, -300px);
          -moz-transform: translate3d(-50%, -50%, -300px);
          transform: translate3d(-50%, -50%, -300px);
      }
      31% {
          font-size: 300px;
          -webkit-transform: translate3d(-50%, -50%, 0);
          -moz-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
      }
      40% {
          font-size: 100px;
          -webkit-transform: translate3d(-50%, -50%, -300px);
          -moz-transform: translate3d(-50%, -50%, -300px);
          transform: translate3d(-50%, -50%, -300px);
      }
      41% {
          font-size: 300px;
          -webkit-transform: translate3d(-50%, -50%, 0);
          -moz-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
      }
      50% {
          font-size: 100px;
          -webkit-transform: translate3d(-50%, -50%, -300px);
          -moz-transform: translate3d(-50%, -50%, -300px);
          transform: translate3d(-50%, -50%, -300px);
      }
      51% {
          font-size: 300px;
          -webkit-transform: translate3d(-50%, -50%, 0);
          -moz-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
      }
      60% {
          font-size: 100px;
          -webkit-transform: translate3d(-50%, -50%, -300px);
          -moz-transform: translate3d(-50%, -50%, -300px);
          transform: translate3d(-50%, -50%, -300px);
      }
      61% {
          font-size: 300px;
          -webkit-transform: translate3d(-50%, -50%, 0);
          -moz-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
      }
      70% {
          font-size: 100px;
          -webkit-transform: translate3d(-50%, -50%, -300px);
          -moz-transform: translate3d(-50%, -50%, -300px);
          transform: translate3d(-50%, -50%, -300px);
      }
      71% {
          font-size: 300px;
          -webkit-transform: translate3d(-50%, -50%, 0);
          -moz-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
      }
      80% {
          font-size: 100px;
          -webkit-transform: translate3d(-50%, -50%, -300px);
          -moz-transform: translate3d(-50%, -50%, -300px);
          transform: translate3d(-50%, -50%, -300px);
      }
      81% {
          font-size: 300px;
          -webkit-transform: translate3d(-50%, -50%, 0);
          -moz-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
      }
      90% {
          font-size: 100px;
          -webkit-transform: translate3d(-50%, -50%, -300px);
          -moz-transform: translate3d(-50%, -50%, -300px);
          transform: translate3d(-50%, -50%, -300px);
      }
      91% {
          font-size: 300px;
          -webkit-transform: translate3d(-50%, -50%, 0);
          -moz-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
      }
      100% {
          font-size: 100px;
          -webkit-transform: translate3d(-50%, -50%, -300px);
          -moz-transform: translate3d(-50%, -50%, -300px);
          transform: translate3d(-50%, -50%, -300px);
      }
   }
复制代码

  • JS部分

    window.onload = function() {
  
  //第一步：定义全局变量
  num = 10;//数字内容
  isCounting = true;//是否正在计数
  timer = null;//定时器
  numberDiv = document.querySelector("#number");
  audio = document.querySelector("audio");
  button = document.querySelector(".button");

  //第二步：初始化
  init();

  //第三步：开始倒计时
  timer = setInterval(count, 1000);
    
}
复制代码

    初始化函数声明如下，

       function init() {
      numberDiv.innerHTML = num;
      numberDiv.style.color =  getRandomColor();
      numberDiv.style.fontSize = "300px";
      numberDiv.className = "number-anim";
    
      button.addEventListener("click", function() {
          if (isCounting) {
              return;
          }
          isCounting = true;
          num = 10;
  
          numberDiv.innerHTML = num;
          numberDiv.style.color = getRandomColor();   
          numberDiv.style.fontSize = "300px";
          
          //先解绑，再使用setTimeout使浏览器重新渲染页面，重新绑定
          //setTimeout只是一种方式，只要能使浏览器重新渲染即可      
          numberDiv.className = null;
          setTimeout(function() {
              numberDiv.className = "number-anim";
  
              timer = setInterval(count, 1000);
          }, 30); 
      }, false);
  }
复制代码

    倒计数函数声明如下，

      function count() {
  
      numberDiv.innerHTML = --num;
      numberDiv.style.color = getRandomColor();
    
      if (num == 0) {
          clearInterval(timer);
  
          audio.src="./audio/readygo.mp3";
          audio.play();
  
          numberDiv.innerHTML = "Ready Go!";
          numberDiv.style.color = getRandomColor();
          numberDiv.style.fontSize = "100px";
  
          numberDiv.style.opacity = 0.8;
          numberDiv.style.filter = "alpha(opacity=80)";
          CompatibleFunc(numberDiv, "Transition", "opacity 1s");
  
          isCounting = false;
      }
  }
复制代码

这里有一个地方需要特别注意，避免以后踩坑。

关于动画样式的解绑与绑定。

动画样式animation一执行结束，就不再起作用了，要使其重新生效，需要重新绑定。我试了4种方式。

  • 第一种是直接解绑，然后再绑定。

      numberDiv.className = null;
  numberDiv.className = "number-anim";
复制代码

    结果是不能使动画重新生效。

  • 第二种是使用classlist属性进行解绑定。

      numberDiv.classList.toggle("number-anim");
  numberDiv.classList.toggle("number-anim");
复制代码

    classList返回类名列表对象，调用toggle方法，若类名存在则删除，返回false，若类名不存在则添加，返回true，所以要调用两次，第一次删除类名，第二次添加类名。但是结果依然是不能使动画重新生效。

  • 第三种是开启定时器。

    先解绑，再利用定时器使浏览器重新渲染页面，重新绑定。setTimeout只是一种方式，只要能使浏览器重新渲染即可，最终动画重新生效。

      numberDiv.className = null;
  setTimeout(function() {
      numberDiv.className = "number-anim";
  }, 30); 
复制代码

    在mozilla官方文档介绍了另一种重新渲染方式，

    https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Tips
复制代码

    应用在这里的话，写法是，

      numberDiv.className = null;
  window.requestAnimationFrame(function(){
      window.requestAnimationFrame(function(){
          numberDiv.className = "number-anim";
      });
  });
复制代码

  • 第四种是借助其他重新渲染途径，如颜色、内容、大小的变化。

      numberDiv.className = null;

  numberDiv.innerHTML = num;
  numberDiv.style.color = getRandomColor();   
  numberDiv.style.fontSize = "300px";
  
  numberDiv.className = "number-anim";
复制代码

    结果IE和Microsoft Edge 浏览器是支持的，但是FireFox和Chrome不支持， 但这是不是也说明了Chrome和FireFox已经对浏览器渲染做了优化？

简而言之，要使动画重新生效，需要触发浏览器重新渲染。
好了，附上源码链接。

https://github.com/muzhidong/frontend-demo/tree/master/countdown
复制代码
weixin_34143774
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用css3实现一个超浪漫的新年倒计时
xingyu_qie的专栏
12-21 3911
希望伴随着倒计时，2022年一切的不如意都早点烟消云散，但不管未来的2023年会怎么样，我们也应该勇敢的冲上去，哪怕失败了，至少我们冲过。
js+css实现翻页时钟效果
m0_56938501的博客
01-05 1522
js+css实现翻页时钟效果
使用CSS3 + Vue3 + js-tool-big-box工具，实现炫酷五一倒计时动效
最新发布
爱生活爱学习。
05-02 39
首先，我们需要创建一个Vue组件来显示倒计时，并利用CSS3来添加动画效果。我们还会使用js-tool-big-box库来辅助我们进行日期计算。首先，确保你已经安装了Vue CLI，并创建了一个Vue项目。函数来计算距离五一劳动节的剩余时间，并将其显示为日时分秒的形式。倒计时数字的更新使用Vue的。现在，你就可以在应用中看到一个炫酷的五一倒计时动效了！来监听，并利用CSS3的动画效果使数字有轻微的放大和缩小动画。在这个组件中，我们使用了js-tool-big-box库中的。
50个html+css+js项目小练习（二：动画的倒计时效果）
m0_54088431的博客
11-26 957
本案例使用css+js+html实现倒计时效果，知识点为：使用classList添加class、删除class、查询class；行内块、行内、块级元素nextSibling 和nextElementSibling。
css炫酷的倒计时,CSS3 无尽的倒计时型LOADING动效
weixin_39726971的博客
08-03 531
CSS语言：CSSSCSS确定:root {--duration: 5s;--bg: #001823;--color: #00c15e;}html {font-size: 1vmin;background: var(--bg) radial-gradient(closest-corner, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));heig...
translate()进行水平垂直居中
前端博客
09-10 2257
html &lt;div class="load_box"&gt; &lt;div class="load_cont"&gt; &lt;div class="load_img"&gt;&lt;/div&gt; 加载失败，稍后再试 &lt;/div&gt; &lt;/div&gt; css
CSS3倒计时时钟动画
04-16
解压密码：RJ4587 现在分享的这款CSS3应用是一个倒计时插件，这款倒计时插件的外观还是比较简单大气的，加上阴影，有着3D立体的视觉效果。倒计时标有天、时、分、秒，我们可以很清晰的看出时钟的走动。我们可以将它...
CSS3手表倒计时动画 可自定义主题皮肤
04-16
解压密码：RJ4587 早段时间，我们为大家分享过一些比较炫酷和实用的时钟手表插件，比如这款纯CSS3...今天我们要利用CSS3来实现一个手表样式的倒计时动画，功能相对比较简单，最大的特点在于可以切换4种不同的主题皮肤。
css3 3D时钟效果翻转计时效果源码下载
11-10
在这个“css3 3D时钟效果翻转计时效果源码下载”中，我们将深入探讨如何利用CSS3的3D变换和动画特性来实现一个具有立体感且动态翻转的时钟效果。 首先，让我们了解一下3D变换。在CSS3中，3D变换允许元素在三维空间...
倒计时（css3实现的彩球掉落效果）
05-19
总的来说，创建一个CSS3倒计时彩球掉落效果涉及了JavaScript计时器、HTML布局、CSS3选择器、动画和过渡等多个方面。通过合理组合这些技术，我们可以创造出各种富有创意和动态感的网页元素，提升用户的互动体验。在...
SVG+CSS3圆形倒计时滚动条动画效果
03-16
综上所述，这个SVG+CSS3圆形倒计时滚动条动画效果是通过SVG的矢量图形和CSS3的动画特性相结合实现的，它不仅可以展示动态的进度变化，还能配合JavaScript实现倒计时功能，为网页添加了生动的交互体验。通过理解和...
css炫酷的倒计时,CSS3 实现倒计时效果
weixin_30838923的博客
08-03 1098
实现效果html%div.wrapper%div.time-part-wrapper%div.time-part.minutes.tens%div.digit-wrapper%span.digit 0- (-5..0).each do |i|%span.digit= -i%div.time-part.minutes.ones%div.digit-wrapper%span.digit 0- (-9....
html5倒计时进度条,html5+css3进度条倒计时动画特效代码【推荐】
weixin_28994935的博客
06-05 300
html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的，看到效果非常棒并且很实用，就第一时间把它整理出来与大家分享了，主要用到了html5、javascript和css3技术，用到了svg、circle、text。。。核心代码如下复制代码代码如下:function alertSet(e) {document.getElementById("js-alert-box"...
用CSS3实现倒计时
weixin_52630329的博客
01-25 368
实现效果： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .digit { display
过度 3d转换
why3935308的博客
12-17 314
3D转换 perspective属性用于定义3D元素距离视图的间距，为元素定义该属性时，其子元素会获得透视效果，而不是元素本身，只影响3D转换元素，注意浏览器的兼容。 1、3D位移 3D位移可以改变元素在Z轴的位置，语法为： transform:translateZ(value)/translate3d(x,y,z); 2、3D旋转 3D旋转主要包含rotateX(deg)/rotat
纯CSS实现倒计时动画
热门推荐
whqet
02-25 1万+
OK，CSS3演武场今天继续，我们重点来看看css3 animation实现逐帧动画，额，按照惯例，看效果点这里，下载戳这里。 实现原理 a.外盒子div.cell，一个字的宽和高，超过不显示，确保只能显示一个字。 b.内盒子div.num,一个字的宽，行高一个字高，我们通过这个盒子的移动实现动画。 c.内盒子的移动动画的animation-timing-function使用step。 d.倒计时结束，外盒子动画消失掉。
HTML+CSS动画实现倒计时
MockingBird
11-16 5696
想做一个倒计时的动画，看了一些方法找了一个比较巧妙的实现方法 首先，当有人说你能不能做一个圆形进度条效果出来时，如果是静态完整圆形进度条，可以通过css设置盒子的圆角（50%）做一个如下的进度条 .circleprogress{ width: 160px; height: 160px; border:20px solid red; border-radius: 50...
CSS transform: translate(-50%,-50%)导致的像素模糊问题解决办法
Tycho‘s Blog
02-22 1万+
一、抛出问题 .modal-container { position: fixed; width: 100vw; height: 100vh; z-index: 999; } .modal { position: absolute; top: 50%; right: 50%; margin: auto; transf...
css3实现3D动画
08-05
使用 CSS3 可以实现 3D 动画效果。要实现 3D 动画，需要使用 CSS3 中的 `transform` 属性。 要将一个元素变为 3D 元素，可以使用 `transform: perspective(depth)` 属性。depth 参数表示 3D 元素的透视深度，值越大...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值