纯CSS实现的3D倒计时效果

最新推荐文章于 2024-07-16 15:25:44 发布
最新推荐文章于 2024-07-16 15:25:44 发布
阅读量4.9k 收藏 1
点赞数 1
分类专栏： HTML5.CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/damys/article/details/48655263
版权

纯CSS实现的3D倒计时效果，从0 到 9 ~


效果图：

css  纯CSS内容较多，现打包下载：http://pan.baidu.com/s/1c0Db7Ni


html:

结构图：

代码：

<div class="box">
  <div class="axis">
    <div class="layer">
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
    </div>
    <div class="layer">
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
    </div>
    <div class="layer">
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
      <div class="cube">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
      </div>
    </div>
  </div>
</div>


damys
关注
专栏目录
抽奖动画效果html,利用css实现一个抽奖动画效果
weixin_34058060的博客
06-03 2719
首先我们先来看下最终的运行效果：从效果图我们可以看到，抽奖会自动进行，并显示中奖信息。这个效果基本是用CSS实现的，没有用图片，加一丢丢JS。完全没有考虑兼容性。具体步骤如下：首先画一个转盘幸运大转盘/* 重置默认样式 */* {margin: 0;padding: 0;border: none;outline: none;}.wrapper {position: relative;height:...
好看的照片效果html,9款超绚丽的HTML5 3D图片动画特效
weixin_36250086的博客
06-03 1882
1.SVG玫瑰花盛开动画SVG还是很强大的，我们之前也分享过很多利用SVG绘制出来的各种动画特效。比如超炫酷的SVG轮船行驶动画和HTML5 SVG圆形钢琴动画都是用SVG实现的超酷动画。今天我们要分享另外一款基于SVG的玫瑰花盛开动画，当鼠标滑过玫瑰花时，玫瑰花就会缓缓盛开，情景非常浪漫。2.jQuery/CSS3动感实用的进度条插件 10种漂亮外观最近这两天一直在为大家分享一些HTML5、CS...
js，css倒计时样式
04-23
js与css写的非常漂亮的倒计时效果，与大家一起分享
css3倒计时效果
03-18
css3倒计时效果
css - - - - - 环形倒计时进度条实现
最新发布
Dark_programmer的博客
07-16 819
css - - - - - 环形倒计时进度条实现
纯CSS实现新年倒计时
fengyiyangdeli的博客
11-29 373
新年倒计时，时钟
css计时动画,纯CSS实现倒计时动画
weixin_35092037的博客
08-04 716
OK，CSS3演武场今天继续，我们重点来看看css3 animation实现逐帧动画，额，按照惯例，看效果点这里，下载戳这里。实现原理a.外盒子p.cell，一个字的宽和高，超过不显示，确保只能显示一个字。b.内盒子p.num,一个字的宽，行高一个字高，我们通过这个盒子的移动实现动画。c.内盒子的移动动画的animation-timing-function使用stepd.倒计时结束，外盒子动画消失...
网页通过CSS写出生日倒计时（利用：日期倒计时、元素自动旋转、边框视觉按钮效果）[直接复制代码即可实现、含注释]
qq_30306717的博客
07-25 1914
图片效果 ↓（代码为粉图，生日歌自动播放） 视频效果 ↓（音乐为自动播放） 网页通过CSS写出生日倒计时（利用：日期倒计时、元素自动旋转、边框视觉按钮效果） 代码 ↓（可直接复制使用，音乐引用网易云音乐的外部链接） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &.
CSS3手表倒计时动画 可自定义主题皮肤
04-16
解压密码：RJ4587 早段时间，我们为大家分享过一些比较炫酷和实用的时钟手表插件，比如这款纯CSS3 3D立体圆盘时钟动画和HTML5仿Apple Watch时钟动画，效果都非常不错。今天我们要利用CSS3来实现一个手表样式的倒计时...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
基于jquery实现倒计时钟插件下载,Flip-Down Clock特效效果 4.基于jquery实现多功能日历插件(weekcalendar)1.2版本下载 5.实用漂亮jQuery网页日历插件datePicker下载 6.简洁实用jquery日期选择插件之jQuery ...
Html+Css+js实现春节倒计时效果（移动端和PC端）
热门推荐
geyaoisnice的博客
01-12 3万+
html+css+js实现春节倒计时效果 喜欢的朋友一键三连呀
Js+CSS完成漂亮的网页倒计时效果
06-08
一个Js+CSS完成漂亮的倒计时效果，仿广州亚运会的网页倒计时效果，CSS的功能其实占了一大半，仅供参考。
js结合css3倒计时三秒动画特效.zip
07-05
js结合css3倒计时三秒动画特效是一款带有动画效果的倒计时时间代码。 js结合css3倒计时三秒动画特效截图
jquery翻牌倒计时
01-19
jquery翻牌倒计时
css3 实现圆形旋转倒计时
12-14
很多答题的H5界面上有旋转倒计时的效果，一个不断旋转减少的动画，类似于下图的这样。 今天研究了下，可以通过border旋转得到。一般我们可以通过border得到一个四段圆。 See the Pen circle by stoneniqiu (@stoneniqiu) on CodePen.  接下来接可以通过旋转的方式形成一个倒计时的效果： See the Pen circle-rotate by stoneniqiu (@stoneniqiu) on CodePen.  一开始旋转45度是为了让半圆刚好立起来。然后旋转一百八十度。 .rightcircle{
JS做的环形倒计时
01-28
JS做的环形倒计时，界面酷炫，可以用与付款、比赛等场合
css炫酷的倒计时,CSS3 实现倒计时效果
weixin_30838923的博客
08-03 1139
实现效果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....
html网页css3倒计时代码,CSS3 实现倒计时效果
weixin_39553423的博客
07-17 443
实现效果实现代码html0543210098765432100543210098765432100987654321009876543210css/* Play with speed and easing of the animation *//* =========================================== */.digit {display: inline-block...
CSS：倒计时案例
weixin_52589346的博客
05-19 790
倒计时代码案例 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
CSS实现3D书籍翻页效果实例
本文档详细介绍了如何使用纯CSS（层叠样式表）来实现书籍3D翻页效果，这是一个Web前端开发中的有趣且视觉吸引力强的效果。通过CSS3的3D转换功能，开发者可以模拟真实的书籍翻页动作，为网站或网页增添动态和交互性。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值