经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » HTML5 » 查看文章
实现 3D 时间动画展示效果
来源：cnblogs　　作者：python之恋　　时间：2021/3/8 11:49:56　　对本文有异议

搭建舞台

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.       html,
  10.       body {
  11.         width: 100%;
  12.         height: 100%;
  13.         background-color: #000;
  14.         overflow: hidden;
  15.       }
  17.       /* 设置视距1000px 子元素在3D中变换  */
  18.       .preserve {
  19.         transform-style: preserve-3d;
  20.         perspective: 1000px;
  21.       }
  23.       /* 容器 */
  24.       .container {
  25.         position: relative;
  26.         margin-top: 10vh;
  27.         text-align: center;
  28.         /* animation: rotateReverse 10s infinite linear; */
  29.       }
  31.       /* 舞台 */
  32.       .stage {
  33.         transform: rotateX(10deg) rotateZ(0);
  34.         /* animation: rotate 10s infinite linear; */
  35.       }
  36.       /* 数字样式  */
  37.       .number {
  38.         position: relative;
  39.         width: 3vw;
  40.         height: 12vw;
  41.         display: inline-block;
  42.         margin: 3vw 3vw 0 0;
  43.       }
  45.       .line {
  46.         position: absolute;
  47.         top: 0;
  48.         left: 0;
  49.         width: 3vw;
  50.         height: 2px;
  51.         background: #181919;
  52.       }
  54.       .line::before,
  55.       .line::after {
  56.         content: "";
  57.         position: absolute;
  58.         top: 0;
  59.         width: 50%;
  60.         height: 100%;
  61.         background-color: #34eabc;
  62.         box-shadow: 0 0 1vw #0bfdfd, inset 0 0 0.125vmin #0bfdfd;
  63.       }
  64.       .line::before {
  65.         left: 0;
  66.         transition: all 0.5s ease-in;
  67.       }
  68.       .line::after {
  69.         right: 0;
  70.         transition: all 0.5s ease-out;
  71.       }
  73.       /* 计算每根线的位置 */
  74.       .line:nth-child(1) {
  75.         top: -0.2vw;
  76.       }
  77.       .line:nth-child(2) {
  78.         top: 3.2vw;
  79.       }
  80.       .line:nth-child(3) {
  81.         top: 6.6vw;
  82.       }
  84.       .line:nth-child(4) {
  85.         transform: rotate(90deg) translateY(0.2vw);
  86.         /* 设置 旋转中心为 最左边 元素中点  */
  87.         transform-origin: 0 center;
  88.       }
  89.       .line:nth-child(5) {
  90.         transform: rotate(-90deg) translateY(0.2vw);
  91.         /* 设置 旋转中心为 最右边 元素中点  */
  92.         transform-origin: 100% center;
  93.       }
  95.       .line:nth-child(6) {
  96.         top: 3.4vw;
  97.         transform: rotate(90deg) translateY(0.2vw);
  98.         transform-origin: 0 center;
  99.       }
  100.       .line:nth-child(7) {
  101.         top: 3.4vw;
  102.         transform: rotate(-90deg) translateY(0.2vw);
  103.         transform-origin: 100% center;
  104.       }
  106.       /* 减少我们的距离 实现阴影效果 */
  107.       .translate::before,
  108.       .translate::after {
  109.         transform: translateZ(50px);
  110.       }
  111.     </style>
  112.   </head>
  113.   <body>
  114.     <div class="container preserve">
  115.       <div class="stage preserve">
  116.         <div class="number preserve">
  117.           <div class="line preserve translate"></div>
  118.           <div class="line preserve translate"></div>
  119.           <div class="line preserve translate"></div>
  120.           <div class="line preserve translate"></div>
  121.           <div class="line preserve translate"></div>
  122.           <div class="line preserve translate"></div>
  123.           <div class="line preserve translate"></div>
  124.         </div>
  125.       </div>
  126.     </div>
  127.   </body>
  128. </html>
  129. 复制代码
  • 确认组成数字需要多少个块元素
  • 使用伪元素和元素的颜色差，让伪元素向我们的方向移动，实现影子效果。
  • 使用transform属性，计算每一个块元素的位置组成一个数字。

添加数字变换动画

  1. ...
  2.       .number[data-digit="1"] .line:nth-child(1)::before,
  3.       .number[data-digit="1"] .line:nth-child(1)::after,
  4.       .number[data-digit="1"] .line:nth-child(2)::before,
  5.       .number[data-digit="1"] .line:nth-child(2)::after,
  6.       .number[data-digit="1"] .line:nth-child(3)::before,
  7.       .number[data-digit="1"] .line:nth-child(3)::after,
  8.       .number[data-digit="1"] .line:nth-child(4)::before,
  9.       .number[data-digit="1"] .line:nth-child(4)::after,
  10.       .number[data-digit="1"] .line:nth-child(6)::before,
  11.       .number[data-digit="1"] .line:nth-child(6)::after,
  13.       .number[data-digit="2"] .line:nth-child(4)::before,
  14.       .number[data-digit="2"] .line:nth-child(4)::after,
  15.       .number[data-digit="2"] .line:nth-child(7)::before,
  16.       .number[data-digit="2"] .line:nth-child(7)::after,
  18.       .number[data-digit="3"] .line:nth-child(4)::before,
  19.       .number[data-digit="3"] .line:nth-child(4)::after,
  20.       .number[data-digit="3"] .line:nth-child(6)::before,
  21.       .number[data-digit="3"] .line:nth-child(6)::after,
  23.       .number[data-digit="4"] .line:nth-child(1)::before,
  24.       .number[data-digit="4"] .line:nth-child(1)::after,
  25.       .number[data-digit="4"] .line:nth-child(3)::before,
  26.       .number[data-digit="4"] .line:nth-child(3)::after,
  27.       .number[data-digit="4"] .line:nth-child(6)::before,
  28.       .number[data-digit="4"] .line:nth-child(6)::after,
  30.       .number[data-digit="5"] .line:nth-child(5)::before,
  31.       .number[data-digit="5"] .line:nth-child(5)::after,
  32.       .number[data-digit="5"] .line:nth-child(6)::before,
  33.       .number[data-digit="5"] .line:nth-child(6)::after,
  35.       .number[data-digit="6"] .line:nth-child(5)::before,
  36.       .number[data-digit="6"] .line:nth-child(5)::after,
  38.       .number[data-digit="7"] .line:nth-child(2)::before,
  39.       .number[data-digit="7"] .line:nth-child(2)::after,
  40.       .number[data-digit="7"] .line:nth-child(3)::before,
  41.       .number[data-digit="7"] .line:nth-child(3)::after,
  42.       .number[data-digit="7"] .line:nth-child(4)::before,
  43.       .number[data-digit="7"] .line:nth-child(4)::after,
  44.       .number[data-digit="7"] .line:nth-child(6)::before,
  45.       .number[data-digit="7"] .line:nth-child(6)::after,
  46.       
  47.       .number[data-digit="9"] .line:nth-child(6)::before,
  48.       .number[data-digit="9"] .line:nth-child(6)::after,
  49.       
  50.       .number[data-digit="0"] .line:nth-child(2)::before,
  51.       .number[data-digit="0"] .line:nth-child(2)::after {
  52.         transform: translateZ(25px);
  53.         background: #3c4444;
  54.         box-shadow: 0 0 1vw #425454;
  55.       }
  56.  ...
  57.  
  58.     <script type="text/javascript">
  59.       (function () {
  60.         let numbers = document.getElementsByClassName("number")
  61.         setInterval(() => {
  62.           Array.prototype.slice.call(numbers).forEach((key) => {
  63.             key.setAttribute("data-digit",parseInt(Math.random() * 9));
  64.           });
  65.         }, 1000);
  66.       })()
  67.     </script>
  68. ...
  70. 复制代码
  • 使用transition属性给line::before和line::after设置过度动画。
  • 通过css属性选择器，获取自定义属性的值。通过变换的值来设置在不同数字下，哪些块需要改变。
  • 使用js修改自定义属性的值。

加入时间

  1. ...
  3.       .colon{
  4.         position: relative;
  5.         display: inline-block;
  6.         width: 2vw;
  7.         height: 12vw;
  8.         margin: 1vw 2vw 0 0;
  9.         animation:colonFra 1s linear infinite ;
  10.       }
  11.       .colon::before {
  12.         content: "";
  13.         position: absolute;
  14.         top: 0;
  15.         left: 0;
  16.         width: 1vw;
  17.         height: 1vw;
  18.         background-color: #34eabc;
  19.         border-radius: 50%;
  20.       }
  21.       .colon::after {
  22.         content: "";
  23.         position: absolute;
  24.         top: 4vw;
  25.         left: 0;
  26.         width: 1vw;
  27.         height: 1vw;
  28.         background-color: #34eabc;
  29.         border-radius: 50%;
  30.       }
  31.       .colonS{
  32.         left: -1.3vw;
  33.       }
  34.       .colonF{
  35.         left: 1vw;
  36.       }
  37.       @keyframes colonFra {
  38.         0% {
  39.           opacity: 0;
  40.         }
  41.         100% {
  42.           opacity: 1;
  43.         }
  44.       }
  45. ...
  47.         <div class="number preserve" data-digit="0">
  48.           <div class="line preserve translate"></div>
  49.           <div class="line preserve translate"></div>
  50.           <div class="line preserve translate"></div>
  51.           <div class="line preserve translate"></div>
  52.           <div class="line preserve translate"></div>
  53.           <div class="line preserve translate"></div>
  54.           <div class="line preserve translate"></div>
  55.         </div>
  56.         <div class="colon preserve colonS"></div>
  57.         <div class="number preserve" data-digit="0">
  58.           <div class="line preserve translate"></div>
  59.           <div class="line preserve translate"></div>
  60.           <div class="line preserve translate"></div>
  61.           <div class="line preserve translate"></div>
  62.           <div class="line preserve translate"></div>
  63.           <div class="line preserve translate"></div>
  64.           <div class="line preserve translate"></div>
  65.         </div>
  66.         <div class="number preserve" data-digit="0">
  67.           <div class="line preserve translate"></div>
  68.           <div class="line preserve translate"></div>
  69.           <div class="line preserve translate"></div>
  70.           <div class="line preserve translate"></div>
  71.           <div class="line preserve translate"></div>
  72.           <div class="line preserve translate"></div>
  73.           <div class="line preserve translate"></div>
  74.         </div>
  75.         <div class="colon preserve colonF"></div>
  76.         <div class="number preserve" data-digit="0">
  77.           <div class="line preserve translate"></div>
  78.           <div class="line preserve translate"></div>
  79.           <div class="line preserve translate"></div>
  80.           <div class="line preserve translate"></div>
  81.           <div class="line preserve translate"></div>
  82.           <div class="line preserve translate"></div>
  83.           <div class="line preserve translate"></div>
  84.         </div>
  85.         <div class="number preserve" data-digit="0">
  86.           <div class="line preserve translate"></div>
  87.           <div class="line preserve translate"></div>
  88.           <div class="line preserve translate"></div>
  89.           <div class="line preserve translate"></div>
  90.           <div class="line preserve translate"></div>
  91.           <div class="line preserve translate"></div>
  92.           <div class="line preserve translate"></div>
  93.         </div>
  94. ...
  96.     <script type="text/javascript">
  97.       function time(){
  98.         let timeTem = new Date();
  99.         let a = timeTem.getHours().toString().substring(0,1);
  100.         let b = timeTem.getHours().length > 1 ? 0 : timeTem.getHours().toString().substring(1,2);
  101.         let c = timeTem.getMinutes().toString().substring(0,1);
  102.         let d = timeTem.getMinutes().length > 1 ? 0 : timeTem.getMinutes().toString().substring(1,2);
  103.         let e = timeTem.getSeconds().toString().substring(0,1);
  104.         let f = timeTem.getSeconds().length > 1 ? 0 : timeTem.getSeconds().toString().substring(1,2);
  105.         return [a,b,c,d,e,f]
  106.       }
  107.       (function () {
  108.         let numbers = document.getElementsByClassName("number")
  109.         setInterval(() => {
  110.           let arr = time();
  111.           Array.prototype.slice.call(numbers).forEach((key,index) => {
  112.             key.setAttribute("data-digit",arr[index]);
  113.           });
  114.         }, 1000);
  115.       })()
  116.     </script>
  118. 复制代码
  • 先定义时分秒钟的，间隔。
  • 使用js获取当前时间，依次修改自定义变量的值。

 

本文首发于前端黑洞网，博客园同步跟新

原文链接：http://www.cnblogs.com/pythonzhilian/p/14496909.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

HTML5热门文章

  • Webpack友好的错误提示插件friendly-errors-webpack-plugin
  • uni-app 微信小程序 picker 三级联动
  • 记录vue用 html5+做移动APP 用barcode做扫一扫功能时安卓 的bug(黑屏、错位等等)和解决方法
  • H5+ 操作手机日历
  • uni-app开发经验分享十五： uni-app 蓝牙打印功能
  • 设计中的设计PDF下载高清完整扫描原版
  • 前端canvas动画如何转成mp4视频的方法
  • antd通过 filterDropdown 自定义--按某天时间搜索
  • H5+ API 设置手机状态栏颜色以及沉浸式状态栏
  • elementui中el-input联想搜索框

    • HTML5推荐文章

  • canvas实现动态替换人物的背景颜色
  • form 表单恢复初始数据
  • canvas?中如何实现物体的框选
  • 前端canvas中物体边框和控制点的实现示例
  • FileReader()读取文件、图片上传预览
  • 跨域访问方法介绍(5)--使用 window.postMessage 传递数据
  • 跨域访问方法介绍(3)--使用片段识别符传值
  • 跨域访问方法介绍(4)--使用 window.name 传值
  • HTML
  • 前端常用模板引擎- artTemplate

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号