CSS100Day(3)-clip-path和动画实现金字塔日出日落

HTML部分#

HTML部分全部利用元素实现，包括天空、太阳、金字塔、金字塔右侧、阴影和地面

1
<div class="demo-container">
2
    <div class="circle">
3
        <div class="sky"></div>
4
        <div class="sun"></div>
5
        <div class="side-left"></div>
6
        <div class="side-right"></div>
7
        <div class="shadow"></div>
8
        <div class="ground"></div>
9
    </div>
10
</div>

CSS部分#

• 首先定义一个贝塞尔曲线，在x轴0.4~0.5时候快速变化y

  在中间快速变化为了实现日落日出中间状态持续效果

  1
  :root {
  2
      --cubic-bezier: cubic-bezier(0.4, 0, 0.5, 1);
  3
  }

• 容器.demo-container居中设置宽高

  1
  .demo-container {
  2
      display: grid;
  3
      place-content: center;
  4
      background: #272c34;
  5
      color: #fff;
  6
      width: 400px;
  7
      height: 400px;
  8
      border-radius: 2px;
  9
  }

• 所有元素全部绝对定位掌控位置

  1
  .circle {
  2
      position: relative;
  3
      border-radius: 50%;
  4
      clip-path: circle(90px at 90px 90px);
  5
      overflow: hidden;
  6
      width: 180px;
  7
      height: 180px;
  8
  
  9
      .sky {
  10
          background: #7ddffc;
  11
          height: 124px;
  12
          animation: sky-turns-black 4s var(--cubic-bezier) infinite;
  13
          position: absolute;
  14
          top: 0;
  15
          left: 0;
  16
          right: 0;
  17
      }
  18
  
  19
      .sun {
  20
          z-index: 2;
  21
          position: absolute;
  22
          top: 7px;
  23
          left: 73px;
  24
          width: 34px;
  25
          height: 34px;
  26
          border-radius: 50%;
  27
          background: #ffef00;
  28
          transform-origin: 50% 400%;
  29
          animation: sun-goes-down 4s var(--cubic-bezier) infinite;
  30
      }
  31
  
  32
      .side-left {
  33
          position: absolute;
  34
          background: #f4f4f4;
  35
          height: 57px;
  36
          width: 116px;
  37
          top: 68px;
  38
          left: 35px;
  39
          clip-path: polygon(50% 0, 100% 100%, 0 100%);
  40
          animation: pyramide-shading 4s var(--cubic-bezier) infinite;
  41
      }
  42
  
  43
      .side-right {
  44
          position: absolute;
  45
          top: 68px;
  46
          left: 93px;
  47
          height: 57px;
  48
          width: 58px;
  49
          background: #dddada;
  50
          clip-path: polygon(30% 100%, 100% 100%, 0% 0%);
  51
          animation: pyramide-shading 4s var(--cubic-bezier) infinite reverse;
  52
      }
  53
  
  54
      .shadow {
  55
          position: absolute;
  56
          z-index: 2;
  57
          top: 124px;
  58
          left: -80px;
  59
          height: 30px;
  60
          width: 360px;
  61
          background: rgba(0, 0, 0, 0.2);
  62
          transform-origin: 50% 0;
  63
          clip-path: polygon(115px 0%, 231px 0%, 80% 100%);
  64
          animation: shadow-on-the-floor 4s var(--cubic-bezier) infinite;
  65
      }
  66
  
  67
      .ground {
  68
          position: absolute;
  69
          z-index: 1;
  70
          bottom: 0;
  71
          left: 0;
  72
          right: 0;
  73
          height: 56px;
  74
          background: #f0de75;
  75
          animation: fading-sand 4s var(--cubic-bezier) infinite;
  76
      }
  77
  }

  展开折叠

• 最后关键帧，着重看阴影的关键帧

  1
  @keyframes sky-turns-black {
  2
      0% {
  3
          background: #272c34;
  4
      }
  5
      30% {
  6
          background: #7ddffc;
  7
      }
  8
      70% {
  9
          background: #7ddffc;
  10
      }
  11
      100% {
  12
          background: #272c34;
  13
      }
  14
  }
  15
  
  16
  @keyframes sun-goes-down {
  17
      0% {
  18
          background: #f57209;
  19
          transform: rotate(-70deg);
  20
      }
  21
      30% {
  22
          background: #ffef00;
  23
          transform: rotate(-28deg);
  24
      }
  25
      70% {
  26
          background: #ffef00;
  27
      }
  28
      100% {
  29
          background: #f57209;
  30
          transform: rotate(70deg);
  31
      }
  32
  }
  33
  
  34
  @keyframes pyramide-shading {
  35
      0% {
  36
          background: #272c34;
  37
      }
  38
      30% {
  39
          background: #f4f4f4;
  40
      }
  41
      70% {
  42
          background: #dddada;
  43
      }
  44
      100% {
  45
          background: #272c34;
  46
      }
  47
  }
  48
  
  49
  @keyframes fading-sand {
  50
      0% {
  51
          background: #272c34;
  52
      }
  53
      30% {
  54
          background: #f0de75;
  55
      }
  56
      70% {
  57
          background: #f0de75;
  58
      }
  59
      100% {
  60
          background: #272c34;
  61
      }
  62
  }
  63
  
  64
  @keyframes shadow-on-the-floor {
  65
      0% {
  66
          transform: scaleY(0);
  67
          clip-path: polygon(115px 0%, 231px 0%, 100% 100%);
  68
      }
  69
      30% {
  70
          transform: scaleY(1);
  71
          clip-path: polygon(115px 0%, 231px 0%, 80% 100%);
  72
      }
  73
      55% {
  74
          transform: scaleY(0.4);
  75
      }
  76
      70% {
  77
          transform: scaleY(1);
  78
      }
  79
      100% {
  80
          transform: scaleY(0);
  81
          clip-path: polygon(115px 0%, 231px 0%, 0% 100%);
  82
      }
  83
  }

  展开折叠