jquery立体翻转翻页数字时钟走动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：jquery立体翻转翻页数字时钟走动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed&family=Barlow:wght@600&family=Saira+Extra+Condensed:wght@500&display=swap" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/material-icons.min.css">
    <style>
        /*
    font-family: 'Barlow', sans-serif;
    font-family: 'Barlow Condensed', sans-serif;
    font-family: 'Saira Extra Condensed', sans-serif;
    */
    :root {
      --bgcolor: rgb(38, 37, 41);
      --clockheight: 220px;
      --radius: 30px;
      --rotationtime: 0.55s;
      --avobg: rgb(227, 246, 104);
    }
    html {
      box-sizing: border-box;
    }
    
    html *,
    html *::before,
    html *::after {
      box-sizing: inherit;
      padding: 0;
      margin: 0;
    }
    
    body {
      margin: 0;
      display: flex;
      height: 100vh;
      align-items: center;
      justify-content: center;
      background-color: var(--bgcolor);
      color: #fff;
      font-family: "Saira Extra Condensed", sans-serif;
    }
    .clock {
      display: grid;
      padding: 0 12px;
      grid-template-columns: 1fr 1fr 1fr;
      grid-column-gap: 12px;
      min-width: 200px;
      height: var(--clockheight);
      /*   background: rgb(26, 25, 28); */
      border-radius: var(--radius);
      /*   background-repeat: no-repeat; */
      background-image: linear-gradient(
        rgb(14, 14, 15) 0%,
        rgb(26, 25, 28) 20%,
        rgb(44, 44, 52) 50%,
        rgb(20, 20, 27) 100%
      );
      /*   border-top: 6px solid rgb(56, 56, 61); */
      /*   border-bottom: 6px solid rgb(59, 59, 65); */
      box-shadow: inset 0 -3px 6px 3px rgba(0, 0, 0, 0.2),
        inset 0 4px 8px 3px rgba(0, 0, 0, 0.4),
        0 2px 3px 1px rgba(255, 255, 255, 0.3), 0 -2px 4px 4px rgba(56, 56, 61, 0.5);
    }
    .flipper {
      /*   border: 1px solid #c00; */
      position: relative;
      width: 100%;
      min-width: 150px;
      height: 100%;
      transform-style: preserve-3d;
      perspective: 1600px;
    }
    .gear {
      position: absolute;
      top: calc(var(--clockheight) / 3);
      width: 12px;
      height: calc(var(--clockheight) / 3);
      background: linear-gradient(
        to bottom,
        #000000 0%,
        #666666 17%,
        #7f7f7f 52%,
        #7f7f7f 52%,
        #0c0c0c 53%,
        #595959 87%,
        #131313 100%
      );
      outline: 3px solid #000;
      z-index: 99;
      transform-style: preserve-3d;
      transform: translateZ(10px);
      perspective: 0;
    }
    .gear:nth-child(2) {
      left: calc(100% - 12px);
    }
    .top,
    .bottom {
      box-shadow: 0 6px 6px 1px rgba(0, 0, 0, 0.5),
        0 2px 2px 1px rgba(255, 255, 255, 0.15);
      border-top: 2px solid rgb(102, 103, 110);
      border-bottom: 2px solid #000;
      /*   transition: all 1s ease-in-out; */
    }
    .top {
      /*   border: 1px solid #c00; */
      position: relative;
      width: 100%;
      height: calc(50% - 15px);
      background-image: linear-gradient(rgb(48, 49, 53) 0%, rgb(56, 57, 62) 100%);
      margin-top: 10px;
      margin-bottom: 5px;
      border-top-left-radius: calc(var(--radius) * 0.65);
      border-top-right-radius: calc(var(--radius) * 0.65);
    }
    .bottom {
      position: relative;
      /*   border: 1px solid green; */
      width: 100%;
      height: calc(50% - 15px);
      background-image: linear-gradient(rgb(57, 58, 63) 0%, rgb(65, 65, 71) 100%);
      margin-top: 5px;
      margin-bottom: 10px;
      border-bottom-left-radius: calc(var(--radius) * 0.65);
      border-bottom-right-radius: calc(var(--radius) * 0.65);
    }
    .text {
      font-size: 140px;
      display: block;
      position: absolute;
      overflow: hidden;
      width: 100%;
      height: 100%;
      line-height: 193px;
      text-align: center;
    }
    .bottom .text {
      line-height: 0;
    }
    .top.new,
    .bottom.new {
      position: absolute;
      left: 0;
      z-index: 12;
      /*   background: green; */
    }
    .top.new {
      top: 0;
      z-index: 1;
      /*   backface-visibility: hidden; */
    }
    .top.new .text {
      backface-visibility: hidden;
    }
    /* .top.new:before {
      content: "";
      position: absolute;
      top: calc(var(--clockheight) / 3);
      left: 0;
      width: 15px;
      height: calc(var(--clockheight) / 3);
      background: #000;
    }
    .top..........完整代码请登录后点击上方下载按钮下载查看